JS DOM篇（一）

Node类型

DOM1级定义了一个Node接口，节点类型定义了12个常数值常量来表示（用nodeType区分）
开发人员最常用的就是元素节点和文本节点

1. nodeName 和 nodeValue属性

if(someNode.nodeType == 1){
	value = someNode.nodeName  //nodeName是元素的标签名
}

2. 节点关系 childNodes parentNode
   每个节点都有childNodes属性，保存着一个NodeList对象（是个伪数组）

var firstChild = someNode.childNodes[0]
var secondChild = someNode.childNodes.items(1) //可以通过items()方法获取
var count = someNode.childNodes.length  

var firstChild = someNode.firstChild  //快速找到第一个
var lastChild = someNode.lastChild  //快速找到最后一个
console.log(firstChild == secondChild.previousSibling)
console.log(secondChild == firstChild.nextSibling)

关系图如下
假装有图

3. 操作节点

//appendChild()
someNode.appendChild(newNode)
//insertBefore(newNode,xxxNode)
someNode.insertBefore(newNode,xxxNode)
//removeChild()
someNode.removeChild(xxxNode)
//replaceChild()
someNode.replaceChild(newNode,oldNode)

Document 类型

1. 文档信息

属性	说明
document.domain	取得域名
document.URL	取得完整URL（可设置）
document.referrer	取得来源页面的URL

2. 查找元素

document.getElementById()  //根据id
document.getElementByTagName() //根据标签名
document.getElementByName() //根据属性名
document.images //页面所有image
document.forms //页面所有form
document.anchors //页面所有带name特性的a标签

Element 类型

1. 标签汇总（省略,在html中总结）
2. 操作属性方法

nodeName || tagName  //访问元素的标签名
getAttribute(attrName)  //获取属性
setAttribute(atrtName,attrVal) //设置属性

3. 创建元素

var odiv = document.createElement('div')
odiv.id = 'myDiv'
odiv.className = 'box'
document.body.appendChild(odiv)

4. 获取子元素

var oDiv = document.getElementById('myDiv')
for(let i=0,len = oDiv.childNodes.length;i<len;i++){
	if(oDiv.childNodes[i].nodeType == 1){
		//执行操作
	}
}