Javascript DOM 元素的增删改查
1. 什么是DOM
DOM 全称是 Document Object Model，也就是文档对象模型。
DOM 就是针对 HTML 和 XML 提供的一个API。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。
我们可以把一个HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如 <div></div> 这些标签都看做一个对象，每个对象都叫做一个节点（node），节点可以理解为 DOM 中所有 Object 的父类。
2. DOM 有什么用
简单来说，通过 DOM 操作HTML元素，你可以改变网页。比如我们现在要更改网页标题，可以直接键入代码：
document.title = 'How to learn javascript'
这个 API 使得在网页被下载到浏览器之后改变网页的内容成为可能。
- 你可以使用 Javascript 语言来操作 DOM 以改变网页。
- 为了改变网页，你必须告诉 Javascript 改变哪一个节点。这就是操作 DOM。
- 改变网页，实际就是操作DOM对节点进行增删改查。
3. DOM元素的增删改查
3.1 添加元素
- Document.createElement() // 创建元素
语法：
let element = document.createElement(tagName[, options]) - Document.createTextNode() // 创建一个新的文本节点
语法：
var text = document.createTextNode() - Document.createAttribute() // 创建并返回一个新的属性节点
语法：
attribute = document.createAttribute(name) - Document.createComment() // 创建并返回一个注释节点
语法：
var commentNode = document.createComment(data) - Document.createDocumentFragment() // 创建一个新的空的文档片段
语法：
var docFragment = document.createDocumentFragment() - Node.appendChild() // 将一个节点添加到指定父节点的子节点列表末尾
语法：
var child = node.appendChild(child) - Element.classList.add() // 添加指定的类值class
语法：
elementNodeReference.classList.add( String [, String] ) - Document.write()
Document.writeIn() // 将文本字符串写入打开的文档流
语法：
document.write(markup)
document.writeIn(line)
document.write()和writeIn()的区别是前者没有换行，而后者有换行。
3.2 删除元素
- Element.removeAttribute() // 从元素中删除指定的属性
语法：
element.removeAttribute(attrName) - Element.removeChild(）// 删除子元素
语法：
var oldChild = node.removeChild(child);
OR
element.removeChild(child); - ChildNode.remove() // 删除元素
语法：
elementNodeReference.remove() - Child.parentNode.removeChild(child) // 不确定父元素时可这样删除子元素
示例：
if (node.parentNode) {
//判断node是否在DOM树中
node.parentNode.removeChild(node);
} - Element.classList.remove() // 移除元素中一个或多个类名
语法：
elementNodeReference.classList.remove( String [,String] )
3.3 修改元素
-
Node.innerText // 修改元素文本内容
语法：
Node.innerHTML =new content -
Element.innerHTML // 设置或获取描述元素后代的HTML语句
语法：
const content = element.innerHTML;
// 返回时，内容包含描述所有元素后代的序列化HTML代码。
element.innerHTML = markup;
// 除所有元素的子节点，解析内容字符串，并将生成的节点分配给元素的子元素。 -
node.cloneNode() // 拷贝元素(包括所有属性和值)
语法及示例：
var dupNode = node.cloneNode(deep)
<body>
<ul id="myList1">
<li>iPhone</li>
<li>iPad</li>
</ul>
<ul id="myList2">
<li>Macbook</li>
<li>appleMusic</li >
</ul>
<button onclick="myFunction()">复制</button>
<script>
function myFunction(){
var itm=document.getElementById("myList2").lastChild;
var cln=itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
}
</script>
</body>
-
Element.setAttribute() // 设置或者改变指定属性并指定值
语法：
element.setAttribute(name, value) -
style.property = new style // 修改元素CSS属性值
示例：
var title= document.querySelector("h1")
title.style.backgroundColor = red // h1背景色改为红色 -
Node.replaceChild() // 替换子节点
语法及示例：
replacedNode = parentNode.replaceChild(newChild, oldChild)
<body>
<ul id="myList">
<li>iPhone</li>
<li>iPod</li>
<li>Macbook</li>
</ul>
<button onclick="myFunction()">替换</button>
<script>
function myFunction(){
var textnode=document.createTextNode("Surface pro");
var item=document.getElementById("myList").childNodes[0];
item.replaceChild(textnode,item.childNodes[0]);
}
</script>
3.4 查找元素
- attribute.getAttribute() // 返回元素的指定属性值
语法：
let attribute = element.getAttribute(attributeName) - Document.getElementsByClassName() // 返回一个节点列表（数组），包含了所有拥有指定 class 的子元素
语法：
var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names); - Document.getElementsByName() // 返回带有指定名称的对象集合
语法：
elements = document.getElementsByName(name) - Document.getElementsByTagName() // 返回带有指定标签名的对象集合
语法：
var elements = document.getElementsByTagName(name) - Document.getElementById() // 返回对拥有指定 id 的第一个对象的引用
语法：
element = document.getElementById(id) - Document.querySelector() // 返回文档中匹配指定的CSS选择器的第一元素
语法及示例：
element = document.querySelector(selectors) // 语法
//example
document.querySelector("#demo") // 获取文档中ID为demo的元素 - Document.querySelectorAll() // 返回与指定的选择器组匹配的文档中的元素列表
语法：
elementList = document.querySelectorAll(selectors)
4. 总结
上述具体说明了Javascript中利用文档对象模型（DOM）来对HTML或XML的增删改查；在利用原生的DOM操作文档时，常常会很复杂。在实际使用中还是推荐使用第三方库，例如jQuery来对文档进行操作。但是，熟练DOM也是掌握Javascript的基本要求，希望总结出的内容对大家有所帮助 _。
