2018-06-05 JavaScript DOM
DOM操作.png
一、什么是DOM？
1.1 理解DOM
DOM，Document Object Model，文档对象模型。编程语言当中对象的意义，是现实生活当中事物特征抽象之后的具体实现。文档对象，也就意味着将文档抽象成了一个对象，文档对象模型将HTML文档表达为树结构。
这个树结构将文档中出现的所有元素节点、属性节点以及文本节点都表达为树结构的一个节点。
HTML文档树.jpg
1.2 addLoadEvent(window.的升级版)
我们常常在文档树加载完毕之后直接执行某个操作，可以使用window.把所有待执行的方法写入。
window. = function(){
func1();
func2();
......
}上面这种方法虽然可行，但是按照这种挨个执行操作的方法，不如创建一个队列，将所有待处理的操作添加入队列。
function addLoadEvent(func) { var old = window.; if(typeof window. != 'function')
{ window. = func;
} else
{ window. = function() {
old();
func();
}
}
}二、获取元素（查）
2.1 直接获取指定元素
getElementById()：一个指定的元素
getElementByClassName()：相同class的元素集合
getElementByTagName()：相同标签的元素集合
document.getElementsByTagName("form") = document.formsdocument.getElementsByTagName("body")[0] = document.bodydocument.getElementsByTagName("img") = document.imagesdocument.getElementsByTagName("a") = document.links2.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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="scripts/add.1.js"></script></head><body> </body></html>
add.1.js
function addLoadEvent(func){ var old = window.; if(typeof window. != 'function')
{ window. = func;
} else
{ window. = function() {
old();
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衍生而来。
作者：瑾瑜爱上猫
链接：https://www.jianshu.com/p/300f6267220a
共同学习，写下你的评论
评论加载中...
作者其他优质文章
