JavaScript-节点属性知识讲解

节点共有属性（元素节点有，属性节点有，文本节点有）

var title = document.getElementsByTagName('title')[0]

console.log(title.nodeName);    //nodeName节点名称

console.log(title.nodeType);   //nodeType   
​
//节点类型： 元素节点； 属性节点；文本节点

console.log(title.nodeValue);  
​
//节点值 ： 元素节点为null  ；  属性节点   属性值  ；  文本节点    文本值；

子节点

var box = document.getElementById('box')
console.log(box.childElementCount);   //返回节点的元素个数  1
console.log(box.childNodes);   //返回所有的节点集合，返回类型是一个nodelist 包含所有的子节点
console.log(box.children)   //返回子元素  返回的是一个htmlCollection  只包含了元素节点

属性节点

元素的几个属性

innerHTML innerText tagName

id 获取id值 ; className 获取classs属性值 ； title 获取对应的title属性值 style样式属性；

对于 input元素 对应存在 name属性值 value属性值

对于 img元素 存在src属性值

对于 a标签 存在href 属性值

获取属性节点

1.对于标签本身天生自带的属性，我们可以通过 标签元素.属性名 来获取对应的属性值

<div opo='a' name='张三' id='box' >
<a href="http://www.baidu.com"></a>

console.log(document.getElementsByTagName('div')[0].id);
​
console.log(document.getElementsByTagName('a')[0].href);
​
console.log(document.getELementsByTagName('div')[0].opo);  //后面加上去的属性无法获取

2.通过 attributes 获取所有的属性节点

var attrs = box.attributes    //获取所有的属性节点
console.log(box.attributes);     
//返回的是一个nameNodeMap 里面包含的是多个数据
//nameNodeMap里面包含下标 以及length属