欢迎光临
我们一直在努力

JavaScript | 深入理解元素节点Element

文章目录

元素节点Element是最常用的DOM节点之一,必须非常熟练的掌握它。DOM节点是HTML标签元素的DOM化结果,我们可以通过JavaScript很好地操作他们。

基础部分

Element节点的三个node属性和对应的值依次为:

  • nodeType === 1
  • nodeName === 标签名(大写的)
  • nodeValue === null

Element节点的父节点(parentNode)指向包含该节点的Element或文档节点Document。

可以通过nodeName或tagName属性访问元素的标签名,这两个属性的返回值相同。

<div id="test">123</div>
<script>
console.log(test.nodeType);//1
console.log(test.nodeName);//'DIV'
console.log(test.nodeValue);//null
console.log(test.parentNode);//<body>
console.log(test.childNodes);//[text]
console.log(test.tagName,test.tagName === test.nodeName);//'DIV' true
</script>

childNode属性

元素可以有任意数目的子节点和后代节点。通过childNode属性可以获取Element包含的所有子节点,这些子节点可能是:元素、文本、注释、处理指令节点等。

<ul class="list" id="list">
    <li class="in"></li>
    <li class="in"></li>
</ul>
<script>
var oList = document.getElementById('list');
//IE8-浏览器返回2,其他浏览器返回5。因为IE8-浏览器子节点中不包含空白文本节点
//关于空白文本节点的详细内容移步至此
console.log(oList.childNodes.length)
</script>

通过结合nodeType属性可以只获取元素节点。

<ul class="list" id="list">
    <li class="in"></li>
    <li class="in"></li>
</ul>
<script>
var oList = document.getElementById('list');
var children = oList.childNodes;
var num = 0;
for(var i = 0; i < children.length; i++){
    if(children[i].nodeType == 1){
        num++;
    }
}
console.log(num);//2   
</script>

特性操作

每个元素都有一个或多个的特性,这些特性的用途是可以给出元素的附加信息。元素的操作特性DOM方法主要有以下几种。

  • hasAttribute() - 查看是否包含指定属性
  • getAttribute() - 用于取得特定属性的值
  • setAttribute() - 用于设置特定属性和值
  • removeAttribute() - 用于删除特定属性的值

hasAttribute()

hasAttribute()返回一个bool值,表示当前元素节点是否包含了指定的属性。IE7-不支持hasAttribute()方法.

<div id="test" class="class1"></div>
<script>
console.log(test.hasAttribute('class'));//true
console.log(test.hasAttribute('title'));//false
</script>

getAttribute()

getAttribute()方法用于取得特性的值,如果给定名称的特性不存在或无参数则返回null

<div id="test" class="class1"></div>
<script>
console.log(test.getAttribute('class'));//'class1'
console.log(test.getAttribute('title'));//null
console.log(test.getAttribute('b'));//null
console.log(test.getAttribute(''));//null
</script>

setAttribute()

setAttribute()方法接受两个参数:要设置的特性名和值,如果已经存在,则替换现有的值。如果特性不存在,setAttribute()则创建该属性并设置相应的值。该方法无返回值

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
oBox.setAttribute("id","test");
console.log(oBox.id);//test
</script>

通过setAttrbute()方法设置的特性名会统一转换成小写形式

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
oBox.setAttribute("ABC","test");
console.log(oBox.getAttribute("ABC"));//test
console.log(oBox.getAttribute("abc"));//test
</script>

removeAttribute()

removeAttribute()方法用于彻底删除元素的特性,这个方法不仅会彻底删除元素的特性值,还会删除元素特性。该方法无返回值

<div class="box" id="box"></div>
<script>
var oBox = document.getElementById('box');
console.log(oBox.getAttribute("id"));//box
console.log(oBox.removeAttribute("id"));//undefined
console.log(oBox.getAttribute("id"));//null    
</script>

attributes属性

attribute是元素节点Element特有的属性。attributes属性中包含一个NamedNodeMap,与NodeList十分相似,也是一个动态的集合。

Element的每一个特性都由一个Attr节点表示,每个节点都保存在NamedNodeMap对象中,每个节点的nodeName就是特性的名称,nodeValue就是特性的值。

attributes共有四个方法:

getNamedItem(name)

getNamedItem(name)方法返回nodeName属性等于name的节点。

<div class="box" id="box" name="abc" index="123" title="test"></div>
<script>
var oBox = document.getElementById('box');
console.log(oBox.attributes);//NamedNodeMap {0: class, 1: id, 2: name, 3: index, 4: title}
console.log(oBox.attributes.getNamedItem("index"));//index='123'
console.log(oBox.attributes.getNamedItem("index").nodeName);//'index'
console.log(oBox.attributes.getNamedItem("index").nodeValue);//'123'
console.log(oBox.attributes.index);//index='123'
</script>

removeNamedItem(name)

removeNamedItem(name)方法从列表中移除nodeName属性等于name的节点,并返回该节点。

<div class="box" id="box" name="abc" index="123" title="test"></div>
<script>
var oBox = document.getElementById('box');
console.log(oBox.attributes);//NamedNodeMap {0: class, 1: id, 2: name, 3: index, 4: title}
console.log(oBox.attributes.getNamedItem("index"));//index='123'
console.log(oBox.attributes.removeNamedItem("index"));//index='123'
console.log(oBox.attributes.getNamedItem("index"));//null
</script>

setNamedItem(node)

steNamedItem(node)方法向列表中添加节点,该方法无返回值

<div class="box" id="box" name="abc" index="123" title="test"></div>
<script>
var oBox = document.getElementById('box');
console.log(oBox.attributes);//NamedNodeMap {0: class, 1: id, 2: name, 3: index, 4: title}
var oldItem = oBox.attributes.removeNamedItem("index");
console.log(oBox.attributes.getNamedItem("index"));//null
console.log(oldItem);//index='123'
console.log(oBox.attributes.setNamedItem(oldItem));//null
console.log(oBox.attributes.getNamedItem("index"));//index='123'
</script>

item(pos)

item(pos)方法返回位于数字pos位置处的节点,也可以用方括号法[]简写

<div class="box" id="box" name="abc" index="123" title="test"></div>
<script>
var oBox = document.getElementById('box');
console.log(oBox.attributes);//NamedNodeMap {0: class, 1: id, 2: name, 3: index, 4: title}
console.log(oBox.attributes.item(2));//name="abc"
console.log(oBox.attributes[2]);//name="abc"
</script>

遍历

attributes属性主要用于特性遍历。在需要将DOM结构序列化为HTML字符串时,多数都会涉及遍历元素特性

function outputAttributes(element){
    var pairs = new Array(),attrName,attrValue,i,len;
    for(i = 0,len=element.attributes.length;i<len;i++){
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        pairs.push(attrName +"=\"" + attrValue + "\"");
    }
    return pairs.join(" ");
}

针对attributes对象中的特性,不同浏览器返回的顺序不同

<div class="box" id="box" name="abc" index="123" title="test"></div>
<script>
function outputAttributes(element){
    var pairs = new Array(),attrName,attrValue,i,len;
    for(i = 0,len=element.attributes.length;i<len;i++){
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        pairs.push(attrName +"=\"" + attrValue + "\"");
    }
    return pairs.join(" ");
}
//(chrome\safari)class="box" id="box" name="abc" index="123" title="test"
//(firefox)title="test" index="123" name="abc" id="box" class="box"
//(IE8+)title="test" class="box" id="box" index="123" name="abc"
//(IE7-)输出所有的特性
console.log(outputAttributes(document.getElementById("box")))
</script>

由上面结果看出,IE7-浏览器会返回HTML元素中所有可能的特性,包括没有指定的特性

specified

可以利用特性节点的specified属性来解决IE7-浏览器的这个问题。如果specified属性的值为true,则意味着该属性被设置过。在IE中,所有未设置过的特性的该属性值都是false。而在其他浏览器中,任何特性节点的specified值始终为true

<div id="box" name="abc" index="123" title="test"></div>
<script>
var oBox = document.getElementById('box');
var yesItem = oBox.attributes.getNamedItem("index");
var noItem = oBox.attributes.getNamedItem("onclick");
//所有浏览器浏览器都返回true
console.log(yesItem.specified);
//IE7-浏览器返回false,而其他浏览器报错,noItem不存在
console.log(noItem.specified);
</script>
<div class="box" id="box" name="abc" index="123" title="test"></div>
<script>
function outputAttributes(element){
    var pairs = new Array(),attrName,attrValue,i,len;
    for(i = 0,len=element.attributes.length;i<len;i++){
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        if(element.attributes[i].specified){
            pairs.push(attrName +"=\"" + attrValue + "\"");    
        }
    }
    return pairs.join(" ");
}
//所有浏览器下都返回title="test" class="box" id="box" index="123" name="abc"(顺序不一样)
console.log(outputAttributes(document.getElementById("box")))
</script>

如果从头到尾看完这篇博文,会发现全篇篇幅最多的内容是特性的设置。特性设置不是应该在特性节点上吗?特性节点可以设置,但是使用元素节点来操作特性更方便。

赞(1) 打赏
未经允许不得转载:散人研 » JavaScript | 深入理解元素节点Element
分享到: 更多 (0)

评论 抢沙发

1 + 7 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏