一.Node节点(几乎都继承于该接口)
(1).node基本属性:
1.someNode.childNodes;//NodeList类型//获取该节点所有的内容
2.someNode.children;//HTMLCollection类型,真正的element节点//获取该节点下所有的元素节点(DOM-HTML类型)(区别上一个属性,
注释或别的不在其内)
3.let oneNode = someNode.childNodes[0];//someNode.childNodes.item(1);//获得其中一个节点
4.let nextNode = oneNode.nextSibling;//下一个node
5.let preNode = oneNode.previousSibling;//上一个node
(2).node基本方法
1.someNode.appendChild(newNode);//添加节点
2.someNode.insertBefore(newNode, null);//在最后插入
3.someNode.insertBefore(newNode, firstChild);//插入最前面
4.someNode.replaceChild(newNode, oldNode);//替换旧的节点
5.someNode.removeChild(someNode.Node);//删除其中一个节点
6.someNode.clone(boolean);//参数为boolen值,意为是否深拷贝
二.Document类型
(1).基本属性
1.document.nodeName 为 #document
2.document.nodeType 为 9
3.document.parentNode为 null
4.document.title;//为htmlhead的tittle标签
5.document.body,document.html,document.URl,document.referrer(来源网站)
(2).基本方法
1.document.getElementById('id');//通过id获取节点
2.document.getElementsByTagName('img');//获取一类的HTMLCollection类型的集合对象
3.document.getElementsByName('name');//获取HTMLCollection集合对象
(3).特殊HTMLCocllection集合
1.document.links//所有带href特性的<a>元素
2.document.images//所有<img>元素==document.getElementsByTagName('img');
三.Element类型
(1).基本属性
所有继承与Node节点的节点nodeType 为 1则为Element节点;
判断方法如下:
if (someNode.nodeType == Node.ELEMENT_NODE){ //在 IE 中无效
alert("Node is an element.");
}
1.element.nodeType 为 1
2.element.nodeName == element.tagName为元素标签名入<div>的为DIV
3.element.parentNode可能是Document或Element
4.e.id//e.title//e.lang//e.className
(2).基本方法
//属性操作
1.element.getAttrbute('');//获取属性值
2.element.setAttribute('','');//设置属性
3.element.removeAttribute('');//删除属性
4.element.oneAttr = ""//添加自定义属性
//创建元素
5.document.createElement('div');//创建新元素
6.element.appendChild(div);//加入到某节点
(3).注意事项
1.if (element.tagName.toLowerCase() == "div"){ //这样最好（适用于任何文档）
//在此执行某些操作
}
不要这么判断
if (element.tagName == "div"){ //不能这样比较，很容易出错！
//在此执行某些操作
}
四.Text类型
(1).基本属性
1.text.nodeType 为 3;
2.text.typeName 为#text;
3.text.nodevalue 为节点所包含的文本text;
4.parentNode是一个Element;
5.不支持(没有)子节点
(2).基本方法
1.appendData(text);//将text添加到尾部
2.deleteData(offset, count);//某位置删除count个字符
3.insertData(offset, text);//在某位置插入text
4.replaceData(offset, count, text);//替换
5.splitText(offset);//从某位置将该节点分为两个文本节点
6.substringData(offset, count);//截取一段text
五.Comment类型
六.CDATASection类型
七.DocumentFragment类型
八.Attr类型
九.动态创建样式
(1)创建element节点
1.document.createElement("link");
2.document.createElement("script");
3.document.createElement("div");
(2)创建txtNode
1.document.createTextNode('str');//各个节点中的文本text