【js】DOM基础

看了李炎恢老师的《JavaScript》视频教程，学到DOM这章，整理一下资料！

1.节点

从上图的树形结果，我们理解几个概念，html标签没有父辈，没有兄弟，所以html为根标签。head标签是html的子标签，meta和title标签之间是兄弟关系。

ps：后面我们经常把标签称为元素，是一个意思

2.节点种类

3.节点方法

3.1  getElementById()方法

 接受一个参数。如果找到相对应的元素则返回该元素的HTMLDivElement对象，如果不存在，则返回null。

document.getElementById('box'); //获取id为box的元素节点。

当我们通过getElementById()获取到特定元素节点时，这个节点对象就被我们获取到了，而通过这个节点对象，我们可以访问它的一系列属性。

document.getElementById('box').tagName;  //DIV

document.getElementById('box).innerHTML; //测试Div

document.getElementById('box').id;       //获取id

document.getElementById('box').id='perdon' ; //设置id

3.2  getElementsByTagName() 方法

 getElementsByTagName()方法将返回一个对象数组HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。

documen.getElementsByTagName('*');  //获取所有元素

document.getElementsByTagName("li")[0];  //获取第一个li元素，HTMLLIElement

documen.getElementsByTagName("li").item(0);  //获取第一个li元素，HTMLLIElement

documen.getElementsByTagName("li").length;   //获取所有li元素的数目

3.3  getElementsByName()方法

getElementByName()方法可以获取相同名称（name）的元素，返回一个对象数组HTMLCollection(NodeList)。

document. getElementsByName(''add'');    //获取input元素

document. getElementsByName(''add'')[0].value;   //获取input元素的value值

document. getElementsByName(''add'')[0].checked; //获取input元素的 checked值

3.4  getAttribute()方法

getAttribute()方法将获取元素中某个属性的值，它和直接使用，属性获取属性值得方法有一定区别。

document.getElementById('box').getAttribute(''id'');  //获取元素的id值

document.getElementById("box").id;       //获取元素的id值

区别就是浏览器的兼容

3.5  setAttribute()方法

setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数：属性名和值

document.getElementById("box").setAttribute('alingn','center');  //设置属性和值

document.getElementById("box").setAttribute('bbb','aaa);   //设置自定义的属性和值

3.6 removeAttribute() 方法

移除html属性

document.getElementById("box").removeAttribute("style"); //移除属性

4.  DOM节点

4.1  node节点属性

节点可以分为元素节点，属性节点和文本节点。而这些节点又有三个非常有用的属性，分别为：nodeName，nodeType和nodeValue。

document.getElementById("box").nodeType; //1 元素节点

4.2 层次节点属性

节点的层次结构又可以分为父节点和子节点，兄弟节点。当我们获取其中一个元素节点的时候，就可以使用层次节点属性来获取它的相关层次的节点。

4.2.1  childNodes 属性

childeNodes属性可以获取某个元素节点的所以子节点，这些子节点包括元素子节点和文本子节点

var box=document.getElementById("box");  //获取一个元素节点

alert(box.childeNodes.length);               //获取这个元素节点的所以子节点

alert(box.childeNodes[0]);       //获取第一个子节点对象

ps：使用childNodes[i]返回子节点对象的时候，有可能返回的是元素的子节点，比如HTMLElement；也可能出现的事文本的子节点，比如Text。元素的子节点可以使用nodeName或者tagName获取标签名称，而文本子节点可以使用nodeValue获取。

for(var i = 0; i <box.childNodes.length;i++){  //判断是元素节点，输出元素的标签名    if(box.childNodes[i].nodeType===1) {       alert('元素节点：' + box.childNodes[i].nodeName);    //判断是文本节点，输出文本内容      }else if ( box.childNodes[i].nodeType===3 ){       alert("文本节点："+box.childNodes[i].nodeValue);  }}

ps:innerHTML和nodeValue 第一个区别，就是取值。那么第二个区别就是赋值的时候，nodeValue 会包括在文本里面的HTML转义成特殊字符，从而达到形成单纯文本的效果。

box.childNodes[0].nodeValue="<strong>abc</strong>";  //结果为<strong>abc</strong>

box.innerHTML="<strong>abc</strong>";    //结果为：abc

4.2.2 firstChild 和lastChild 属性

firstChild 用于获取当前元素节点的第一个子节点，相当于childNodes[0];

lastChild 用于获取当前元素节点的最后一个节点，相当于childNodes.[box.childNodes.length-1]

4.2.3 ownerDocument 属性

ownerDocument 属性返回该节点的文档对象根节点，返回的对象相当document。

alert(box.ownerDocument===document);  //true 根节点

4.2.4 parentNode  previousSibling  nextSibling 属性

parentNode 属性返回该节点的父节点

previousSibling 属性返回该节点的前一个同级节点

nextSibling  属性返回该节点的后一个同级节点

5. attributes 属性 返回该节点的属性节点集合

document.getElementById("box").attributes   //NamedNodeMap

document.getElementById("box").attributes.length; //返回属性节点的个数

 

6.忽略空白文本节点

var body=document.getElementByTagName("body")[0];  //获取body元素节点

alert(body.childNodes.length);     //得到子节点个数，IE3个 非IE7个

ps：在非IE中，标准DOM具有识别空白文本节点的功能，所以在火狐浏览器是7个、而IE自动忽略了，如果要保持一致的子元素节点，需要手工忽略它。这个地方我还没弄清楚，等弄清楚再补上

7.节点操作 DOM不单单可以查找节点，还可以创建节点，复制节点，插入节点，删除节点和替换节点。