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属性,还存在 增改（set） 删（remove） 查（get）的方法

console.log(attrs[0]);    //通过下标访问第一个属性节点

console.log(attrs['opo']);   //通过键(属性名)来进行访问opo属性节点

console.log(attrs.length);    //访问里面的属性节点个数

3.通过 item 方法

//通过item方法  获取是getNamedItem方法
console.log(attrs.item(0));   //访问第一个属性  attrs[0] = attrs.item(0)
console.log(attrs.getNamedItem('opo'));    //访问名字为opo的属性内容  attrs['opo'] = attrs.getNamedItem('opo')

4.通过attrs.属性名 attrs['opo']是一致的

console.log（attrs.opo);    //通过键(属性名)来进行访问opo属性节点

设置 获取的是一个节点对象 attr对象 属性节点对象 设置的时候也要是属性节点对象

attrs.opo = attrs.id    //只读的，不能直接进行赋值

attrs.removeNamedItem('opo');    //删除opo这个属性名对应的属性节点

//attrs表示属性节点对象，设置方法需要传进去一个新的属性节点对象
//创建一个属性节点对象  参数为属性名
var opo = document.createAttribute('opo')
opo.value = 'hello'   //给节点设置属性值
attrs.setNamedItem(opo)   //设置属性节点
console.log(attrs);

总结：

1.属性操作：对于本身天生就有的属性，直接通过元素，属性名 来获取属性值

2.属性节点操作： attributes 获取所有的属性节点，返回的是一个NameNodeMap

3.可以通过下标 以及对应的属性名进行方法

4.NameNodeMap 里面存在三个方法：

        1.getNamedItem 获取属性节点

        2.removeNameItem 移除属性节点

        3.setNameItem 设置属性节点

5.属性节点不能直接进行赋值 需要修改可以调用setNameItem 里面需要传入一个新的属性节点

属性操作方法

对于本身天生就有的属性，直接通过元素.元素名 来获取属性值

<div id="box" class="content"  name="hello"></div>
<a href="http://www.baidu.com">点击</a>

var box = document.getElementById('box')
//访问对应的class属性的属性值
//所有的标签天生就有的属性值 id class style title
console.log(box.className);  //对于本身天生就有的
console.log(document.getElementsByTagName('a')[0].href);

//也可以直接给这个属性赋值，来进行更改
box.className = '你吃饭了吗'

对于本身不是天生有的属性，可以通过 getAttribute 来进行获取（只要里面有的属性都可以获取）

console.log(box.name)  //访问不到，返回值为undefined

var name = box.getAttribute('name')   //参数1为属性名  类型为string
console.log(name);

通过对应的方法进行设置 setAttribute

设置一个属性   属性名为username   属性值为123
box.setAttribute('username',123)   //参数1 为属性名  参数2 为属性值  两个都是string 

删除 你需要删除的属性名 removeAttribute

box.removeAttribute('class')   //删除class属性

总结:

元素的三个方法 element的方法 getAttribute setAttribute removeAttribute 属性操作（常用的）

NameNodeMap 里面存在三个方法 getNamedItem 获取属性节点 removeNameItem 移除属性节点 属性节点操作（一般不用)

属性节点是属于节点对象 ，属性是属于元素中的一个属性 ，属性在元素中被获取为节点

节点 对象 属性 是一个对象里面的属性

属性节点是对象 ， 元素节点包含属性节点

var element = { //元素节点
    age:18  //age就是一个属性
}
统一获取的话，可以使用attributes  返回的一个属性节点集合
var element = {  //元素节点
    attr:{  //属性节点
        age:18//属性
        }
}