webAPI学习第三天---节点

节点属性

节点的属性:可以使用标签–元素.出来,可以使用属性节点.出来,文本节点.点出来
nodeType:节点的类型:1----标签,2—属性,3—文本
nodeName:节点的名字:标签节点—大写的标签名字,属性节点—小写的属性名字,文本节点----#text
nodeValue:节点的值:标签节点—null,属性节点—属性值,文本节点—文本内容

节点操作

var body = document.body;
var div = document.createElement('div');
body.appendChild(div);

var firstEle = body.children[0];
body.insertBefore(div,firstEle);

body.removeChild(firstEle);

var text = document.createElement('p');
body.replaceChild(text, div);

案例：

权限选择
节点层级
重点讲父子属性，兄弟属性画图讲解

var box = document.getElementById('box');
console.log(box.parentNode);
console.log(box.childNodes);
console.log(box.children);
console.log(box.nextSibling);
console.log(box.previousSibling);
console.log(box.firstChild);
console.log(box.lastChild);

• 注意

childNodes和children的区别，childNodes获取的是子节点，children获取的是子元素
nextSibling和previousSibling获取的是节点，获取元素对应的属性是nextElementSibling和previousElementSibling获取的是元素
nextElementSibling和previousElementSibling有兼容性问题，IE9以后才支持

• 总结

节点操作，方法

> appendChild()
> insertBefore() 
> removeChild()
> replaceChild()

节点层次，属性

parentNode
childNodes
children
nextSibling/previousSibling
firstChild/lastChild

创建元素的三种方式

document.write()

document.write('新设置的内容<p>标签也可以生成</p>');
innerHTML

var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';
document.createElement()

var div = document.createElement('div');
document.body.appendChild(div);

性能问题

1. innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。
2. 可以借助字符串或数组的方式进行替换，再设置给innerHTML。
3. 优化后与document.createElement性能相近。