js-DOM元素节点操作、属性节点操作

DOM节点包含元素节点，属性节点，注释节点，文本节点。

DOM节点操作

IE低版本也支持

获取节点集合

1   获取节点集合（伪数组），可以使用下标遍历，不能使用数组方法。
document.getElementsByClassName('.box')类名
document.getElementsByTagName('p')  标签名
document.getElementsByTagName('name')name值
2	获取单个标签
document.body body标签
document.documentElement html标签
document.getElementById('id') 通过id

以下属性IE低版本不支持

document.querySelector('css选择器')，通过css选择器例如，
document.querySelectorAll('css选择器') ，伪数组

获取兄弟节点，或兄弟元素节点

有返回 节点， 没有返回值为null。

1   获取下一个节点
node.nextSibling; 
2	获取下一个元素节点
node.nextElementSibling
3	获取上一个节点
node.previousSibling; 
4	获取上一个元素节点
node.previousElementSibling

子节点操作

1	node元素节点下的第一个子节点
node.firstChild
2	node元素节点下的第一个子元素节点
node.firstElementChild
3	node元素节点下的所有子元素节点
node.children
4	node元素节点下的所有子节点
node.childNodes

获取父节点

1	获取node的父元素节点
node.parentElement;
2	获取node的父元素节点，包含空格换行等；
 node.parentNode;

增加元素节点

1. 创建元素节点

var elem= document.createElement('标签名');创建元素节点
var text= document.createTextNode('文本')；创建文本节点

2. 把创建的元素节点插入到node元素节点中。把文本节点插入到新创建的元素节点中

elem.appendChild(text);
在元素的最末尾添加节点
node.appendChild(elem);
在元素的最前面插入节点 
node.insertBefore(elem);

删除元素节点。

node.removeChild('要删除的元素节点')；
node.remove()；删除自身

替换节点

在node节点，把 li 替换成 p。

parentNode.replaceChild(新节点,旧节点)
ul.replaceChild(p,li)

复制节点

参数默认没有，只复制标签；

如果为true，复制标签及其内容；

 var p1= p.cloneNode(true);

属性节点操作

获取元素的最终样式

1. 标准浏览器：

 window.getComputedStyle(元素名字, 伪类名字).getPropertyValue("background-color");

返回值带单位

2. IE低版本

   p.currentStyle.width);

Window getComputedStyle() 方法和 style 的异同

1. 相同点
   二者返回的都是 CSSStyleDeclaration 对象，取相应属性值得时候都是采用的 CSS 驼峰式写法，均需要注意 float 属性。

2. 不同点

• element.style 读取的只是元素的内联样式，即写在元素的 style 属性上的样式；
• getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。
• element.style 既支持读也支持写，我们通过 element.style 即可改写元素的样式。而
• getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式
  我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式。

原生属性

1. 获取原生属性，直接元素.style.属性。

			li.style.color='red';
            li.style.backgroundColor='blue';

2.获取类名。
className 获取类名

console.log(li.className);

classList获取类名列表，得到一个数组，通过下标可以遍历对应类名

 console.log(li.classList);

自定义属性

H5新增属性

通过dataSet新增自定义属性；
一般以data-开头的属性名，为程序员之间默认的格式，认为这是一个自定义属性。
代码如下

效果

获取属性的值其他方法

isId 检查属性是否为元素的 ID 属性：

document.getElementById("demo").attributes[0].isId;

输出结果：

true

attributes   获取node属性的集合：是一个伪数组，可以通过下标获取。

node.attributes;

getAttribute方法，返回指定元素的属性值

 console.log(li.getAttribute('data-index'));

getAttributeNode() 方法，返回属性节点

     console.log(li.getAttributeNode('data-index'));

setAttribute（‘属性名’，属性值）

    console.log(li.setAttribute('color','red'));

创建属性节点并赋值。

1	创建class属性
var atr=document.createAttribute("class");

2	给class添加属性值为democlass
	atr.nodeValue="democlass";
3  给h1标签设置属性节点。
	var h=document.getElementsByTagName("H1")[0];
	h.setAttributeNode(atr); 
	delete 元素.dataset.key