浅谈DOM

由于昨天面试问到的关于Dom的一些操作，自己并不能够灵活的运用，就打算总结一下常用的关于Dom的操作。

什么是DOM？，

官方释义：Document Object Model，即就是文档对象模型，更通俗的说就是文档内容的结构关系．w3c解释它为：中立于平台和语言的接口

DOM的组成

• 核心 DOM - 针对任何结构化文档的标准模型
• XML DOM - 针对 XML 文档的标准模型
• HTML DOM - 针对 HTML 文档的标准模型

DOM可以做什么？

DOM允许程序和脚本动态地访问和更新文档的内容、结构和样式

重点聊聊HTMLDOM

HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
深入理解HTML DOM：HTML 文档中的所有内容都是节点

HTML DOM

DOM节点关系

DOM中常用的方法：

• getElementById()：返回指定ID的元素
• getElementByClassName():返回指定类名的元素列表
• getElementByTagName():返回指定标签名称的所有元素列表
• appendChild():将新的子节点添加到指定节点
• removeChild():删除指定节点
• createElement():创建元素节点
• createAttribute():创建属性节点
• createTextNode:创建文本节点
• getAttribute()：返回指定属性值
• setAttribute()：把指定属性设置或修改为指定的值。
  来个小栗子：

//html核心代码

hello 



//js代码
var text1 = document.createTextNode( "dom");
var ele = document.getElementById('ele');
ele.appendChild(text1);  //页面显示出dom

var text2 = document.createTextNode( "hi ");
var text3 = document.createTextNode( "javascript ");
var eles = document.getElementsByClassName('dom');
eles[0].appendChild(text2);   //页面显示出hi
eles[1].appendChild(text3);  //页面显示出javascript

eles[0].removeChild(text2);   //移除text2，页面上没有了hi
eles[1].replaceChild(text2,text3);   //用text2替换了text3，javascript变为hi
ele.insertBefore(text3,text1);  //在text1之前插入text3，页面上dom之前显示出了javascript

var newEle = document.createElement("button");
var content = document.createTextNode("click");
newEle.appendChild(content); 
ele.appendChild(newEle); //id为ele的div节点中添加了一个button节点

运行结果

DOM中常见的属性

• innerHTML:设置或修改html元素的内容

//html代码



//js代码
var lis = document.getElementsByTagName("DIV");
lis[0].innerHTML = "hello"; //页面显示hello

• nodeName:节点的名称
• nodeName是只读的
• 元素节点的 nodeName 与标签名相同
• 属性节点的 nodeName 与属性名相同
• 文本节点的 nodeName 始终是 #text
• 文档节点的 nodeName 始终是 #document
• nodeName 始终包含 HTML 元素的大写字母标签名。

//html代码

  


//js代码
var lis = document.getElementsByTagName("DIV");
lis[0].innerHTML = "hello";
console.log(lis[0].nodeName); //输出"DIV"
var textNode = document.createTextNode("world");
console.log(textNode.nodeName);//输出"#text"
console.log(document.nodeName);//输出"#document"

• nodeValue:规定节点的值
• 元素节点的 nodeValue 是 undefined 或 null
• 文本节点的 nodeValue 是文本本身
• 属性节点的 nodeValue 是属性值

//html

  


//js
var lis = document.getElementsByTagName("DIV");
lis[0].innerHTML = "hello";
var textNode = document.createTextNode("world");
console.log(textNode.nodeValue);//输出"world"
console.log(lis[0].nodeValue);//输出null

• nodeType 属性：返回节点的类型，只读
  常见的节点类型：
• 元素：1
• 属性：2
• 文本：3
• 注释：8
• 文档：9

//html

  


//js代码
var lis = document.getElementsByTagName("DIV");
lis[0].innerHTML = "hello";
var textNode = document.createTextNode("world");
console.log(textNode.nodeType); //输出3
console.log(lis[0].nodeType);//输出1

• childNodes：返回当前元素所有子元素的数组

//html代码

 

   
fdg
   fd
 

//js代码
var ele = document.getElementById("ele");
var childs = ele.childNodes;
console.log(childs.length);  //5
ele.removeChild(ele.childNodes[0]);
console.log(childs.length);  //4

• parentNode:返回当前元素的父元素

//html代码

 

  
fdg
  fd
 

//js代码
var ele1 = document.getElementById("ele1");
console.log(ele1.parentNode.nodeName); //"DIV"