孙肖宁

javascript中的DOM节点(元素节点、属性节点、文本节点)
元素节点元素节点就是HTML标签元素,元素节点主要提供了对元素标签名、子节点及属性的访问;属性节点属性节点,有的叫...
扫描右侧二维码阅读全文
30
2018/03

javascript中的DOM节点(元素节点、属性节点、文本节点)

元素节点

元素节点就是HTML标签元素,元素节点主要提供了对元素标签名、子节点及属性的访问;

属性节点

属性节点,有的叫特性节点,差不多一个意思;

文本节点

文本节点的三个node属性,nodeType:3、nodeName:'#text'、nodeValue:节点所包含的文本,其父节点 parentNode 指向包含该文本节点的元素节点,文本节点没有子节点;IE8及以下浏览器不识别空白文本节点,而其他浏览器会识别空白文本节点 ;所以有时候我们需要清理空白文本节点;
操作案例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box" value="111">节点</div>

<script>

    var ele = document.getElementById("box");//元素节点
    var att = ele.getAttributeNode("id");//属性节点
    var txt = ele.firstChild;//文本节点

    console.log(ele.nodeType);//1
    console.log(att.nodeType);//2
    console.log(txt.nodeType);//3

    //nodeName
    console.log(ele.nodeName);//DIV
    console.log(att.nodeName);//id
    console.log(txt.nodeName);//#text

    //nodeValue
    console.log(ele.nodeValue);//null
    console.log(att.nodeValue);//box
    console.log(txt.nodeValue);//你好

</script>
</body>
</html>
Last modification:March 30th, 2018 at 08:36 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment