一、自定义属性值两种方法的注意事项
1、用元素节点.属性(元素节点[属性])绑定的属性值不会出现在标签上。
2、用get/set/removeAttribut(,)等绑定的属性会出现在标签上。且两种方式不能交换使用
二、节点访问关系相关
父节点 parentNode
兄弟节点
- nextSibling
- nextElementSibling
- previousSibling（前一个）
- previousElementSibling
子节点
- firstChild
- firstElementChild
- lastChild
- lastElementChild
所有子节点
- childNodes
- children
***自己.parentNode.children[] 可以获取自己的兄弟节点***
有element的是获取节点元素,没有的可以获取任意节点(空格、换行都能获取到)
IE旧版本不支持有element的方法,一般用 ele.firstElementChild || ele.firstChild 方式获取期望的元素节点,且顺序不能调换,否则类如Chrome会获取到一个文本节点
1 <body> 2 <div id="box">我是一个盒子</div> 3 <script> 4 var ele = document.getElementById('box');//元素节点 5 var att = ele.getAttributeNode('id');//属性节点 6 var txt = ele.firstChild;//文本节点 7 8 console.log(ele); //-->输出 <div id="box">我是一个盒子</div> 9 console.log(att); //-->输出 id="box" 10 console.log(txt); //-->输出 "我是一个盒子" 11 12 console.log(ele.nodeType); //-->输出 1 13 console.log(att.nodeType); //-->输出 2 14 console.log(txt.nodeType); //-->输出 3 15 16 console.log(ele.nodeName); //-->输出 div 17 console.log(att.nodeName); //-->输出 id 18 console.log(txt.nodeName); //-->输出 #text 19 </script> 20 </body>
nodeType值与顺序无关,元素节点是1,属性节点是2,文本节点是3