一，什么是dom
DOM（文档对象模型）是针对 HTML和 XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。DOM 脱胎于Netscape及微软公司创始的 DHTML（动态 HTML），但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。
二，DOM0
JavaScript在早期版本中提供了查询和操作Web文档的内容API（如：图像和表单），在JavaScript中定义了定义了'images'、'forms'等，因此我们可以像下这样访问第一张图片或名为“user”的表单：
document.images[0] document.forms['user'] 还有我们所熟知的onclick事件，也是与DOM0级的事件。
<div id="container" onclick="log1()">点我</div> <script> function log1() {
console.log('log1......'); } // 移除事件 container.onclick = null </script> 三，DOM1
大家熟知的Node，document, document.createElement都是在DOM1级别定义的。
四，DOM2
我们熟知的·addEventListner, document.body.style， getElementById这些都是DOM2级别的东西。
至于dom3和dom4，平时开发很少用到。
五，节点类型
DOM节点共有12种类型，不过常见的只有3种（其他的不用管）。
- （1）元素节点
- （2）属性节点
- （3）文本节点
六，节点操作
1，获取元素
获取元素，准确来说，就是获取“元素节点（注意不是属性节点或文本节点）”。对于一个页面，我们想要对某个元素进行操作，就必须通过一定的方式来获取该元素，只有获取到了，才能对其进行相应的操作。
只不过css选择器是CSS的操作方式，而JavaScript却有着属于自己的另一套方法。在JavaScript中，我们可以通过以下6种方式来获取指定元素。
（1）getElementById()
<div id="div1">JavaScript</div> var oDiv = document.getElementById("div1"); （2）getElementsByTagName()
<ul id="list"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Vue.js</li> </ul> var oUl = document.getElementById("list"); var oLi = oUl.getElementsByTagName("li"); oLi[2].style.color = "red"; （3）getElementsByClassName()
<ul id="list"> <li>HTML</li> <li>CSS</li> <li class="select">JavaScript</li> <li class="select">jQuery</li> <li class="select">Vue.js</li> </ul> var oLi =document.getElementsByClassName("select"); oLi[0].style.color = "red"; （4）querySelector()和querySelectorAll()
JavaScript新增了querySelector()和querySelectorAll()两个方法，使得我们可以使用CSS选择器的语法来获取所需要的元素。
document.querySelector("#main") document.querySelector("#list li:nth-child(1)") document.querySelectorAll("#list li") document.querySelectorAll("input:checkbox") （5）getElementsByName()
对于表单元素来说，它有一个一般元素都没有的name属性。如果想要通过name属性来获取表单元素，我们可以使用getElementsByName()方法来实现。
<label><input type="radio" name="status" value="本科" />本科</label> var oInput =document.getElementsByName("status"); oInput[0].checked = true; （6）document.title和document.body
由于一个页面只有一个title元素和一个body元素，因此对于这两个元素的选取，JavaScript专门为我们提供了两个非常方便的方法：document.title和document.body。
document.title = "测试文本？"; document.body.innerHTML = "<strong style='color:red'>测试。</strong>"; 2，创建新的元素节点
使用createElement()来创建一个元素节点
使用createTextNode()来创建一个文本节点
然后可以将元素节点与文本节点“组装”成为文档片段（此时的文档片段是无根浮萍，因为还没插入到dom中）。
var e1 = document.createElement("元素名"); //创建元素节点 var txt = document.createTextNode("文本内容"); //创建文本节点 e1.appendChild(txt); 在创建元素节点的时候，还可以为其添加属性：
var oImg = document.createElement("img"); oImg.className = "pic"; oImg.src = "img/test.png"; oImg.style.border = "1px solid #000000"; document.body.appendChild(oImg); 3，插入元素节点
（1），appendChild()
A表示父元素，B表示动态创建好的新元素。将B插入到父元素A的内部子元素的 末尾
A.appendChild(B); （2）、insertBefore()
A表示父元素，B表示新子元素。ref表示指定子元素，在这个元素之前插入新子元素。
A.insertBefore(B,ref); 4，删除元素节点
A.removeChild(B); A表示父元素，B表示父元素内部的某个子元素。用这个方法可以删除父元素下的某个子元素。
var oUl = document.getElementById("list"); //删除最后一个子元素 oUl.removeChild(oUl.lastElementChild); 5，复制元素
el.cloneNode(boolean) 如果需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。需要注意克隆出来的依旧是无根浮萍的文档片段。需要插入html中才算数。
6，替换元素
A.replaceChild(new,old); A表示父元素，new表示新子元素，old表示旧子元素。
7，查找父元素
el.parentNode 8，查找子元素
（1）childNodes、firstChild、lastChild （2）children、firstElementChild、lastElementChild 值得注意的是第一行childNodes获取的是所有的子节点。这个子节点是包括元素节点以及文本节点（换行符也算一个文本节点）的。
而第二行children获取的是所有的元素节点，不包括文本节点。
9，查找兄弟元素
（1）previousSibling、nextSibling （2）previousElementSibling、nextElementSibling 和之前一样，previousSibling和nextSibling查找出来的可能是文本节点（一般是空白节点），因此如果你希望只操作元素节点，可以使用previousElementSibling和nextElementSibling。
七，dom元素节点的属性操作
在JavaScript中，有两种操作HTML元素属性的方式：一种是使用“对象属性”；另外一种是使用“对象方法”。
（1），对象属性操作
获取元素节点的某个属性值
el.attr 使用el.attr这种方式，不仅可以用来获取静态HTML元素的属性值，还可以用来获取动态创建的DOM元素中的属性值。
设置元素节点的某个属性值
el.attr = "value"; 如修改样式：
el.style.border = "1px solid #000000"; （2），对象方法操作
获取元素节点的某个属性值
el.getAttribute("attr") 值得注意的是，当是自定义属性，也就是这个属性是用户自己定义的而不是元素自带的。此时我们使用obj.attr（也就是对象属性方式）是无法实现的，只能用getAttribute("attr")（也就是对象方法方式）来实现。
设置元素节点的某个属性值
el.setAttribute("attr","值") 移除元素节点的某个属性值
el.removeAttribute("attr") 判断元素是否具有某个属性值
el.hasAttribute("attr") 八，元素节点的样式操作
（1），获取CSS属性值
getComputedStyle(el).attr 另外，值得注意的是，el.style.att也能获取css的属性值。但是，obj.style.attr只可以获取元素style属性中设置的CSS属性（即行内样式），对于内部样式或者外部样式，它是没办法获取的。
而getComputedStyle(el).attr则是都可以获取到。
（2），设置CSS属性值
el.style.attr = "值"; 值得注意的是，这个设置的是行内样式。
（3），cssText一次性设置CSS属性值
el.style.cssText = "值"; 例如：
oDiv.style.cssText = "width:100px;height:100px;border:1px solid gray;"; 版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10984.html