DOM操作.png
一、什么是DOM？
1.1 理解DOM
DOM，Document Object Model，文档对象模型。编程语言当中对象的意义，是现实生活当中事物特征抽象之后的具体实现。文档对象，也就意味着将文档抽象成了一个对象，文档对象模型将HTML文档表达为树结构。
这个树结构将文档中出现的所有元素节点、属性节点以及文本节点都表达为树结构的一个节点。
HTML文档树.jpg
1.2 addLoadEvent(window.onload的升级版)
我们常常在文档树加载完毕之后直接执行某个操作，可以使用window.onload把所有待执行的方法写入。
window.onload = function()
{
func1();
func2();
......
}
上面这种方法虽然可行，但是按照这种挨个执行操作的方法，不如创建一个队列，将所有待处理的操作添加入队列。
function addLoadEvent(func) {
var oldonload = window.onload;
if(typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
二、获取元素（查）
2.1 直接获取指定元素
getElementById()：一个指定的元素
getElementByClassName()：相同class的元素集合
getElementByTagName()：相同标签的元素集合
document.getElementsByTagName("form") = document.forms
document.getElementsByTagName("body")[0] = document.body
document.getElementsByTagName("img") = document.images
document.getElementsByTagName("a") = document.links
2.2 获取子节点
elem.firstChild：获取父元素的第一个孩子 等价于elem.childNodes[0]
elem.lastChild：获取父元素的最后一个孩子 等价于elem.childNodes[elem.childNodes.length-1]
elem.childNodes：获取父元素的所有子节点
2.3 获取父节点
elem.parentNode：获取子元素的父节点
2.4 获取兄弟节点
elem.nextSibling：获取当前元素的下一个兄弟节点
elem.previousSibling：获取当前元素的上一个兄弟节点
三、增添元素（增）
3.1 创建元素
createElement("p")：创建一个元素节点，参数为标签名
createTextNode(str)：创建一个文本节点，参数为任意文本
3.2 插入元素
elem.appendChild()：插入到父元素末尾
insertBefore()：插入到某个元素的前面
3.3 使用insertBefore()实现insertAfter
insertBefore()是DOM操作中提供的API，但是insertAfter是不存在的，如果我们想要在目标元素的后面插入某个元素，可以使用insertBefore来实现。
思路：
因为不知道目标元素是否为父元素的最后一个元素，如果是，则意味着直接使用appendChild()插入到元素就行；但若不是，我们可以使用insertBefore()插入到目标元素下一个兄弟节点的前面即可。
function insertAfter(newElement,targetElement)
{
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement)
{
parent.appendChild(newElement);
}
else
{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
3.4 实例
add.1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document Object Model</title>
<script type="text/javascript" src="scripts/add.1.js"></script>
</head>
<body>
</body>
</html>
add.1.js
function addLoadEvent(func)
{
var oldonload = window.onload;
if(typeof window.onload != 'function')
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
function insertAfter(newElement,targetElement)
{
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement)
{
parent.appendChild(newElement);
}
else
{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
function prepare()
{
var body = document.getElementsByTagName("body")[0];
var h1 = document.createElement("h1");
var h1_text = document.createTextNode("DOM");
h1.appendChild(h1_text);
var h2 = document.createElement("h2");
var h2_text = document.createTextNode("Document Object Model");
h2.appendChild(h2_text);
var p = document.createElement("p");
var p_text = document.createTextNode("编程语言当中对象的意义，是现实生活当中事物特征抽象之后的具体实现。文档对象，也就意味着将文档抽象成了一个对象，文档对象模型将HTML文档表达为树结构。");
p.appendChild(p_text);
body.appendChild(h1);
body.appendChild(p);
insertAfter(h2,h1);
}
addLoadEvent(prepare);
四、修改元素（改）
4.1 修改元素的属性
setAttribute("属性名","属性值")
4.2 修改元素的样式
-
通过设置属性的方式：预先为添加的className或者idName添加样式
setAttribute("class","className")
setAttribute("id","idName"); -
通过设置元素的style：这种方式只能修改在内联样式中已经设定的值
elem.style.background = "#e8e8e8"；
elem.style.fontSize = "12px";
4.3 修改元素的内容
elem.innerHTML("<span><a href="#"></a></span>")：在p元素中嵌入html代码
innerHTML 和 innerText获取特定元素内的值时，innerHTML返回的是完整的HTML代码，innerText返回的是去除标签之后的纯文本信息。
4.4 replaceChild()
elem.replaceChild(newNode,oldNode)：用新元素替换elem内的旧元素
五、删除元素（删）
elem.removeChild(childNode)：删除父元素的某个子元素也就是childNode
elem.removeNode(true)：删除elem元素
六、其它
getAttribute("属性")：返回属性值
nodeName：返回元素节点的名称
nodeValue：返回文本节点的值
nodeType：返回节点的类型
nodeType:1 元素节点
nodeType:2 属性节点
nodeType:3 文本节点
介绍到这里，大致的JS DOM操作就在这里了，使用DOM可以在页面上做很多事，所以先熟悉的掌握这些基础的API和操作，Jquery中的DOM操作大多是从原生JS衍生而来。
网友评论