浅谈DOM

2017-04-05 本文已影响62人 baiying

由于昨天面试问到的关于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核心代码
<body>
<div id = "ele">hello </div>
<div class = "dom"></div>
<div class = "dom"></div>
</body>
//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代码
<body>
<div></div>
</body>
//js代码
var lis = document.getElementsByTagName("DIV");
lis[0].innerHTML = "hello"; //页面显示hello

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

//html代码
<body>
  <div ></div>
</body>
//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
<body>
  <div ></div>
</body>
//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
<body>
  <div ></div>
</body>
//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代码
<body>
 <div id = "ele">
   <p>fdg</p>
   <button>fd</button>
 </div>
</body>
//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代码
<body>
 <div id = "ele">
  <p id = "ele1">fdg</p>
  <button>fd</button>
 </div>
</body>
//js代码
var ele1 = document.getElementById("ele1");
console.log(ele1.parentNode.nodeName); //"DIV"