由于昨天面试问到的关于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"
网友评论