js--DOM--1.常用的节点类型

1.什么是DOM

DOM(文档对象模型),是针对HTML和XML文档的一个API。描述了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

2.Node

2.1节点类型

只写几个此博文提到的：

节点类型	nodeType	nodeName	nodeValue
ELEMENT_NODE	1	元素标签名	null
ATTRIBUTE_NODE	2	属性名	属性值
TEXT-NODE	3	text	节点包含的文本内容
DOCUMENT-NODE	9	document	null

2.2节点关系

1.每个节点都有childNodes属性，保存NodeList对象
2.父亲和孩子之间：firstChild、lastChild、parentNode
3.同级之间：nextSibling，previousSibling

2.3操作节点

appendChild(),insertBefore(),replaceChild(),removeChild()

1.appendChild()–用于向childNodes列表末尾添加一个节点
参数：要插入的节点

someNode.appendChild(newNode);

Dom树可以看成一系列指针连接起来的，但DOM任何节点都不能同时出现在文档的多个位置。
如下：传入了父节点的第一个子节点，此时变成父节点的最后一个节点。

var node = someNode.appendChild(someNode.firstChild);
alert(node == someNode.firstChild);//false
alert(node == someNode.lastChild);//true

2.insertBefore()
参数：要插入的节点和作为参照的节点

//插入后成为最后一个节点
someNode.insertBefore(newNode,null);

//插入后成第一个节点
someNode.insertBefore(newNode,someNode.firstChild);

//插入到最后一个子节点前面
someNode.insertBefore(newNode,someNode.lastChild);
//插入到最后一个子节点前面
someNode.insertBefore(newNode,someNode.childNodes[someNode.childNodes.length-2]);

3.replaceChild()
参数：要插入的节点和要替换的节点

//替换第一个子节点
someNode.replaceNode(newNode,someNode.firstChild);
//替换最后一个子节点
someNode.replaceNode(newNode,someNode.lastChild);

4.removeChild()
参数：要删除的节点

//删除第一个子节点
someNode.removeNode(someNode.firstChild);
//删除最后一个子节点
someNode.removeNode(someNode.lastChild);

5.cloneNode()
参数：布尔值函数，若为true是深度复制，false则为浅度复制

3.常用的节点类型

3.1Document类型

操作document类型的对象，可以取得页面有关的信息
查找元素
getElementById();
参数：id名称

getElementByTagName();
参数：标签名
返回值：HTML中，返回HTMLCollection对象，和NodeList相似。
注意item()和namedItem()方法的使用

var images = document.getElementByTagName("img");
alert(images.length);
alert(images[0].src);
alert(images.item(0).src);
var myImage = images.namedItem("myImage");//根据name寻找相应的image
var myImage = images["myImage"];//根据name寻找相应的image

getElementByName()
—与getElementByTagName()相似，也返回HTMLCollection对象

3.2Element类型

查找元素：
如3.1
取得、设置、删除元素特性：

var div = document.getElementById("myDiv");
//取得属性两种方法
alert(div.id);//myDiv
alert(div.getAttribute("id"));//myDiv
//设置属性两种方法
div.id = "theDiv";
alert(div.setAttribute("id","theDiv"));
//删除属性
div.removeAttribute("id");

attributes属性：
Element类型是使用attributes属性的唯一一个DOM节点类型。
attributes属性包含一个NamedNodeMap，与NodeList类似，也是一个动态的集合。
这里不介绍用attributes来获取属性删除属性等，因为这些我们更喜欢用上边讲述的方法，这里只讲述遍历元素的属性。

function(element) {
    var attrName,
        attrValue,
        i,
        len,
        pairs = new Array();
    for(i = 0,len = element.attributes.length;i < len;i++) {
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        pairs.push(attrName + "=\"" + attrValue + "\"");//eg格式为id="myID"
    }
    return pairs.join(" ");
}

创建元素：

//创建元素，参数：创建元素的标签名
var liNode = document.createElement("li");

创建之后，可以增加属性等

liNode.id = li1;

虽然新元素上有了相应信息，但是新元素并未被增加到文档树中，因此不会影响浏览器的显示，用appendChild(),insertBefore(),replaceChild()添加到文档中。

var ulNode = document.getElementById('aqi-list');
ulNode.appendChild(liNode);

元素的子节点：

  <ul id="source">
      <li>北京空气质量</li>
      <li>上海空气质量</li>
      <li>天津空气质量</li>
  </ul>

在IE中，上述代码ul是三个子节点，但是其他浏览器却不一定，可能是7个（包含li之间的空白符），所以遍历子节点应该：

for(var i = 0,len = ul.childNodes.length;i < len;i++) {
    //判断是否为元素节点，此例中判断是否为li元素
    if(ul.childNodes[i].nodeType == 1){
        //do something
    }
}

3.3Text类型

创建文本节点
document.createTextNode();

//div中加入文本
//创建元素div
var element = document.createElement("div");
element.className = "message";
//创建文本节点
var textNode = document.createTextNode("Hello wanghuan!");
//文本节点加入到div中
element.appendChild(textNode);
//div加到body中
document.body.appendChild(element);

合并文本节点和分隔文本节点
normalize()—所有文本节点合并成一个文本节点
splitText()—-将一个文本节点分成两个文本节点

var element = document.createElement("div");
element.className = "message";

var textNode1 = document.createTextNode("Hello wanghuan!");
var textNode2 = document.createTextNode("Hello shuguang!");

element.appendChild(textNode1);
element.appendChild(textNode2);

document.body.appendChild(element);
alert(element.childNodes.length);//2
//合并文本节点
element.normalize();
alert(element.childNodes.length);//1
alert(element.firstChild.nodeValue);//Hello wanghuan!Hello shuguang!
//分隔文本节点
element.splitText(15);
alert(element.firstChild.nodeValue);//Hello wanghuan!