首页 > 编程笔记 > JavaScript笔记 > JS DOM 阅读:2,870

JS操作属性节点(非常详细)

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

创建属性节点

使用 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() 方法读取元素附加的信息。

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章