2022年9月16日 - 第40页 - hosteons中文网

JS操作属性节点（非常详细）

属性节点的主要特征值：nodeType 等于 2、nodeName 等于属性的名称、nodeValue 等于属性的值、parentNode 等于 null，在 HTML 中不包含子节点。属性节点继承于 Node 类型，包含以下 3 个专用属性。

name：表示属性名称，等效于 nodeName。
value：表示属性值，可读可写，等效于 nodeValue。
specified：如果属性值是在代码中设置的，则返回 true；如果为默认值，则返回 false。

创建属性节点

使用 document 对象的 createAttribute() 方法可以创建属性节点，具体用法如下：

document.createAttribute(name)

参数 name 表示新创建的属性的名称。

示例1

下面示例创建一个属性节点，名称为 align，值为 center，然后为标签 <div id="box"> 设置属性 align，最后分别使用 3 种方法读取属性 align 的值。

<div id="box">document.createAttribute(name)</div>
<script>
    var element = document.getElementById("box");
    var attr = document.createAttribute("align");
    attr.value = "center";
    element.setAttributeNode(attr);
    console.log(element.attributes["align"].value);  //"center"
    console.log(element.getAttributeNode("align").value);  //"center"
    console.log(element.getAttribute("align"));  //"center"
</script>

属性节点一般位于元素的头部标签中。元素的属性列表会随着元素信息预先加载，并被存储在关联数组中。例如，针对下面 HTML 结构。

<div id="div1" class="style1" lang="en" title="div"></div>

当 DOM 加载后，表示 HTML div 元素的变量 divElement 就会自动生成一个关联集合，它以名值对形式检索这些属性。

divElement.attributes = {
    id : "div1",
    class : "style1",
    lang : "en",
    title : "div"
}

在传统 DOM 中，常用点语法通过元素直接访问 HTML 属性，如 img.src、a.href 等，这种方式虽然不标准，但是获得了所有浏览器的支持。

示例2

img 元素拥有 src 属性，所有图像对象都拥有一个 src 脚本属性，它与 HTML 的 src 特性关联在一起。下面两种用法都可以很好地工作在不同浏览器中。

<img id="img1" src="" />
<script>
    var img = document.getElementById("img1");
    img.setAttribute("src", "http://www.w3.org");  //HTML 属性
    img.src = "http://www.w3.org";  //JavaScript 属性
</script>

类似的还有 onclick、style 和 href 等。为了保证 JavaScript 脚本在不同浏览器中都能很好地工作，建议采用标准用法，而且很多 HTML 属性并没有被 JavaScript 映射，所以也就无法直接通过脚本属性进行读写。

读取属性值

使用元素的 getAttribute() 方法可以读取指定属性的值。用法如下：

getAttribute(name)

参数 name 表示属性名称。

使用元素的 attributes 属性、getAttributeNode() 方法可以返回对应属性节点。

示例1

下面示例访问红色盒子和蓝色盒子，然后读取这些元素所包含的 id 属性值。

<div id="red">红盒子</div>
<div id="blue">蓝盒子</div>
<script>
    var red = document.getElementById("red");  //获取红色盒子
    console.log(red.getAttribute("id"));  //显示红色盒子的id属性值
    var blue = document.getElementById("blue");  //获取蓝色盒子
    console.log(blue.getAttribute("id"));  //显示蓝色盒子的id属性值
</script>

示例2

HTML DOM 也支持使用点语法读取属性值，使用比较简便，也获得了所有浏览器的支持。

var red = document.getElementById("red");
console.log(red.id);
var blue = document.getElementById("blue");
console.log(blue.id);

对于 class 属性，则必须使用 className 属性名，因为 class 是 JavaScript 的保留字；对于 for 属性，则必须使用 htmlFor 属性名，这与 CSS 脚本中 float 和 text 属性被改名为 cssFloat 和 cssText 是一个道理。

示例3

使用 className 读写样式类。

<label id="label1" class="class1" for="textfield">文本框：
    <input type="text" name="textfield" id="textfield" />
</label>
<script>
    var label = document.getElementById("label1");
    console.log(label.className);
    console.log(label.htmlFor);
</script>

示例4

对于复合类样式，需要使用 split() 方法劈开返回的字符串，然后遍历读取类样式。

<div id="red" class="red blue">红盒子</div>
<script>
    //所有类名生成的数组
    var classNameArray = document.getElementById("red").className.split(" ");
    for (var i in classNameArray) {  //遍历数组
        console.log(classNameArray[i]);  //当前class名
    }
</script>

设置属性值

使用元素的 setAttribute() 方法可以设置元素的属性值。用法如下：

setAttribute(name, value)

参数 name 和 value 分别表示属性名称和属性值。属性名和属性值必须以字符串的形式进行传递。如果元素中存在指定的属性，它的值将被刷新；如果不存在，则 setAttribute() 方法将为元素创建该属性并赋值。

示例1

下面示例分别为页面中 div 元素设置 title 属性。

<div id="red">红盒子</div>
<div id="blue">蓝盒子</div>
<script>
    var red = document.getElementById("red");  //获取红盒子的引用
    var blue= document.getElementById("blue");  //获取蓝盒子的引用
    red.setAttribute("title", "这是红盒子");  //为红盒子对象设置title属性和值
    blue.setAttribute("title", "这是蓝盒子");  //为蓝盒子对象设置title属性和值
</script>

示例2

下面示例定义了一个文本节点和元素节点，并为一级标题元素设置 title 属性，最后把它们添加到文档结构中。

var hello = document.createTextNode("Hello World!");  //创建一个文本节点
var h1 = document.createElement("h1");  //创建一个一级标题
h1.setAttribute("title", "你好，欢迎光临！");  //为以及标题定义title 属性
h1.appendChild(hello);  //把文本节点增加到一级标题中
document.body.appendChild(h1);  //把一级标题增加到文档

示例3

也可以使用快捷方法设置 HTML DOM 文档中元素的属性值。

<label id="label1">文本框：
    <input type="text" name="textfield" id="textfield" />
</label>
<script>
    var label1 = document.getElementById("label1");
    label.className = "class1";
    label.htmlFor = "textfield";
</script>

DOM 支持使用 getAttribute() 和 setAttribute() 方法读写自定义属性，不过 IE 6.0 及其以下版本浏览器对其的支持不是很完善。

示例4

直接使用 className 添加类样式，会覆盖掉元素原来的类样式。这时可以采用叠加的方式添加类。

<div id="red">红盒子</div>
<script>
    var red = document.getElementById("red");
    red.className = "red";
    red.className += "blue";
</script>

示例5

使用叠加的方式添加类也存在问题，这样容易添加大量重复的类。为此，定义一个检测函数，判断元素是否包含指定的类，然后再决定是否添加类。

<script>
    function hasClass (element, className) {  //检测类名函数
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
        return reg.test(element.className);  //使用正则检测是否有相同的样式
    }
    function addClass (element, className) {  //添加类名函数
        if (! hasClass (element, className))
            element.className += ' ' + className;
    }
</script>
<div id="red">红盒子</div>
<script>
    var red = document.getElementById("red");
    addClass(red, 'red');
    addClass(red, 'blue');
</script>

删除属性

使用元素的 removeAttribute() 方法可以删除指定的属性。用法如下：

removeAttribute(name)

参数 name 表示元素的属性名。

示例1

下面示例演示了如何动态设置表格的边框。

<script>
    window.onload = function () {  //绑定页面加载完毕时的事件处理函数
        var table = document.getElementByTagName("table")[0];  //获取表格外框的引用
        var del = document.getElementById("del");
        var reset = document.getElementById("reset");
        del.onclick = function () {
            table.removeAttribute("border");
        }
        reset.onclick = function () {
            table.setAttribute("border", "2");
        }
</script>
<table width="100%" border="2">
    <tr>
        <td>数据表格</td>
    <tr>
</table>
<button id="del">删除</button><button id="reset">恢复</button>

在上面示例中设计了两个按钮，并分别绑定了不同的事件处理函数。单击“删除”按钮即可调用表格的 removeAttribute() 方法清除表格边框，单击“恢复”按钮即可调用表格的 setAttribute() 方法重新设置表哥便可的粗细。

示例2

下面示例演示了如何自定义删除类函数，并调用该函数删除指定类名。

<script>
    function hasClass (element, className) {  //类名检测函数
        var reg = new RegExp ('(\\s|^)' + className + '(\\s|$)');
        return reg.test (element, className);  //使用正则检测是否有相同的样式
    }
    function deleteClass (element, className) {
        if (hasClass (element, className)) {
            element.className.replace (reg, ' ');  //捕获要删除样式，然后替换为空白字符串
        }
    }
</script>
<div id="red" class="red blue bold">盒子</div>
<script>
    var red = document.getElementById ("red");
    deleteClass (red, 'blue');
</script>

上面代码使用正则表达式检测 className 属性值字符串中是否包含指定的类名，如果存在，则使用空字符串替换掉匹配到的子字符串，从而实现删除类名的目的。

使用类选择器

HTML 5 为 document 对象和 HTML 元素新增了 getElementsByClassName() 方法，使用该方法可以选择指定类名的元素。getElementsByClassName() 方法可以接收一个字符串参数，包含一个或多个类名，类名通过空格分隔，不分先后顺序，方法返回带有指定类的所有元素 NodeList。

浏览器支持状态：IE 9+、Firefox 3.0+、Safari 3+、Chrome 和 Opera 9.5+。

如果不考虑兼容早期 IE 浏览器或者怪异模式，用户可以放心使用。

示例1

下面示例使用 getElementsByClassName("red") 方法选择文档中所有包含 red 类的元素。

<div class="red">红盒子</div>
<div class="blue red">蓝盒子</div>
<div class="green red">绿盒子</div>
<script>
    var divs = document.getElementsByClassName("red");
    for (var i = 0; i < divs.length; i ++) {
        console.log(divs[i].innerHTML);
    }
</script>

示例2

下面示例使用 document.getElementById("box") 方法先获取 <div id="box">，然后在它下面使用 getElementsByClassName("blue red") 选择同时包含 red 和 blue 类的元素。

<div id="box">
    <div class="blue red green">blue red green</div>
</div>
<div class="blue red black">blue red black</div>
<script>
    var divs = document.getElementById("box").getElementsByClassName("blue red");
    for (var i = 0; i < divs.length; i ++) {
        console.log(divs[i].innerHTML);
    }
</script>

在 document 对象上调用 getElementsByClassName() 会返回与类名匹配的所有元素，在元素上调用该方法就只会返回后代元素中匹配的元素。

自定义属性

HTML 5 允许用户为元素自定义属性，但要求添加 data- 前缀，目的是为元素提供与渲染无关的附加信息，或者提供语义信息。例如：

<div id="box" data-myid="12345" data-myname="zhangsan" data-mypass="zhang123">自定义数据属性</div>

添加自定义属性之后，可以通过元素的 dataset 属性访问自定义属性。dataset 属性的值是一个 DOMStringMap 实例，也就是一个名值对的映射。在这个映射中，每个 data-name 形式的属性都会有一个对应的属性，只不过属性名没有 data- 前缀。

浏览器支持状态：Firefox 6+ 和 Chrome。

示例

下面代码演示了如何自定义属性，以及如何读取这些附加信息。

var div = document.getElementById("box");
//访问自定义属性值
var id = div.dataset.myid;
var name = div.dataset.myname;
var pass = div.dataset.mypass;
//重置自定义属性值
div.dataset.myid = "66666";
div.dataset.myname = "zhangsan";
div.dataset.mypass = "zhangsan666";
//检测自定义属性
if (div.dataset.myname) {
    console.log(div.dataset.myname);
}

虽然上述用法未获得所有浏览器支持，但是我们仍然可以使用这种方式为元素添加自定义属性，然后使用 getAttribute() 方法读取元素附加的信息。

hosteons中文网

2022年09月16日

JS操作属性节点（非常详细）

创建属性节点

示例1

示例2

读取属性值

示例1

示例2

示例3

示例4

设置属性值

示例1

示例2

示例3

示例4

示例5

删除属性

示例1

示例2

使用类选择器

示例1

示例2

自定义属性

示例

MySQL TRUNCATE：清空表记录

Django数据表关联关系映射（一对一、一对多、多对多）

C++ const常量在多文件编程中的3种用法

PHP屏蔽错误

Django实现数据表数据插入（创建Model实例）