- A+
所属分类：Web前端
- getElementById()
- getElementsByName()
- getElementsByClassName
- getElementsByTagName()
- querySelector
- querySelectorAll
- childNodes
- children
- firstChild
- firstElementChild
- lastChild
- lastElementChild
- parentNode
- nextSibling
- nextElementSibling
- previousSibling
- previousElementSibling
- innerHTML
- innerText
- style
- className
- getAttribute
- setAttribute
- removeAttribute
- attributes
- appendChild()
- insertBefore
- removeChild
- replaceChild
- createTextNode()
- cloneNode(true)
语雀链接
（1）文档对象模型DOM
- 全称：Document Object Model
- 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）
- HTML文档是由节点构成的集合，常见的三种DOM节点
- 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
- 文本节点：向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
- 属性节点：元素属性，如<a>标签的链接属性href="http://www.imooc.com"。
（2）document根节点
- 相关方法都封装在document对象中，document是整个文档的根节点
- 输出内容(document.write)
- 输出HTML标签
var mystr="hello"; document.write(mystr+"<br>");//输出hello后，输出一个换行符 - 输出空格
document.write(" 1 2 3 ");//只会有一个空格 结果: 1 2 3 document.write("aa"+" "+"的忠实粉丝!"); （3）节点的访问
getElementById()
- id是唯一的
- 如果存在多个相同的id，则返回第一个
var mychar= document.getElementById('id'); getElementsByName()
- 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素
var mynode= document.getElementsByName('myt') console.log(mynode.length) console.log(mynode[0]) <input name="myt" type="text" value="1"> <input name="myt" type="text" value="2"> <input name="myt" type="text" value="3"> <input name="myt" type="text" value="4"> <input name="myt" type="text" value="5"> <input name="myt" type="text" value="6"> getElementsByClassName
<div class="con">11</div> <div class="con">22</div> <div class="con">33</div> <script type="text/javascript"> var divs = document.getElementsByClassName('con') console.log(divs.length) </script> getElementsByTagName()
- 返回带有指定标签名的节点对象的集合
querySelector
- 只得到符合条件的第一个元素
<div id="container"> <p class="name">111</p> <p class="name">222</p> <p class="name">333</p> </div> <script type="text/javascript"> var item = document.querySelector('#container .name') // <p class="name">111</p> console.log(item) </script> querySelectorAll
- 符合条件的所有元素
<div id="container"> <p class="name">111</p> <p class="name">222</p> <p class="name">333</p> </div> var item = document.querySelectorAll('#container .name') // 3 console.log(item.length) // <p class="name">111</p> console.log(item[0]) childNodes
- IE浏览器会忽略节点之间生成的空白文本节点，而其它浏览器不会。
- 我们可以通过检测节点类型过滤子节点
<div> <p id="name">javascript</p> <div>jQuery</div> <h5>PHP</h5> </div> <script type="text/javascript"> var aa = document.getElementsByTagName('div')[0].childNodes; // 7 console.log(aa.length) // #text, ,3 文本节点(空白) // p, null, 1 元素节点 // #text, , 3 文本节点(空白) // div, null, 1 元素节点 // #text, ,3 文本节点(空白) // H5, null, 1 元素节点 // #text, , 3 文本节点(空白) for (var i = 0; i < aa.length; i++) { console.log(aa[i].nodeName + ',' + aa[i].nodeValue + ',' + aa[i].nodeType); } </script> children
- children可以避免文本节点，只考虑元素节点
<div> <p id="name">javascript</p> <div>jQuery</div> <h5>PHP</h5> </div> <script type="text/javascript"> var aa = document.getElementsByTagName('div')[0].children; // p, null, 1 元素节点 // div, null, 1 元素节点 // H5, null, 1 元素节点 for (var i = 0; i < aa.length; i++) { console.log(aa[i].nodeName + ',' + aa[i].nodeValue + ',' + aa[i].nodeType); } </script> firstChild
- 该属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL
- node.firstChild
- 说明：与elementNode.childNodes[0]是同样的效果。
firstElementChild
- 可以避免文本节点，只考虑元素节点
lastChild
- lastChild 最后一个子节点
- 该属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL
- node.lastChild
- 说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
lastElementChild
- 可以避免文本节点，只考虑元素节点
parentNode
- 获取指定节点的父节点
<div id="text"> <p id="con"> parentNode 获取指点节点的父节点</p> </div> <script type="text/javascript"> var mynode = document.getElementById("con"); // DIV console.log(mynode.parentNode.nodeName) </script> nextSibling
nextElementSibling
previousSibling
previousElementSibling
- 访问兄弟节点nextSibling previousSibling
- nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。 如果无此节点，则该属性返回 null
- previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。如果无此节点，则该属性返回 null。
- 注意事项
- 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略
- 解决问题方法：判断节点nodeType是否为1, 如是不为元素节点，跳过。
- nextElementSibling可以避免文本节点，只考虑元素节点
- previousElementSibling可以避免文本节点，只考虑元素节点
function get_nextSibling(n){ var x=n.nextSibling; while (x && x.nodeType!=1){ x=x.nextSibling; } return x; } （4）节点类型
- 元素节点、属性节点、文本节点都有三个重要属性
- 节点名 nodeName
- 节点值 nodeValue
- 节点类型 nodeType（元素1、属性2、文本3、注释8、文档9）
<div> <p id="name">javascript</p> <div>jQuery</div> <h5>PHP</h5> </div> <script type="text/javascript"> var aa = document.getElementsByTagName('div')[0].childNodes; // 7 console.log(aa.length) // #text, ,3 文本节点(空白) // p, null, 1 元素节点 // #text, , 3 文本节点(空白) // div, null, 1 元素节点 // #text, ,3 文本节点(空白) // H5, null, 1 元素节点 // #text, , 3 文本节点(空白) for (var i = 0; i < aa.length; i++) { console.log(aa[i].nodeName + ',' + aa[i].nodeValue + ',' + aa[i].nodeType); } </script> - 属性节点
for (var i = 0; i < aa.length; i++) { if(aa[i].nodeName == 'P'){ // 子节点 var ps = aa[i].childNodes // 1 console.log(ps.length) // #text,javascript,3 for(let j = 0; j < ps.length; j++){ console.log(ps[j].nodeName + ',' + ps[j].nodeValue + ',' + ps[j].nodeType) } var attrs = aa[i].attributes // 1 console.log(attrs.length) // id,name,2 for(let j = 0; j < attrs.length; j++){ console.log(attrs[j].nodeName + ',' + attrs[j].nodeValue + ',' + attrs[j].nodeType) } } } - 其他节点
// 文档节点 // #document undefined 9 console.log(document.nodeName,document.nodeValue,document.nodeType) for (var i = 0; i < document.childNodes.length; i++) { var item = document.childNodes[i] // html undefined 10 文档声明节点 // HTML undefined 1 html元素节点 console.log(item.nodeName,item.nodeValue,item.nodeType) } // BODY undefined 1 BODY节点 console.log(document.body.nodeName,document.body.nodeValue,document.body.nodeType) // HEAD undefined 1 HEAD节点 console.log(document.head.nodeName,document.head.nodeValue,document.head.nodeType) （5）节点属性
innerHTML
- 设置元素的文本内容，支持HTML各类标签
innerText
- 纯文本方式设置元素的文本内容
<div id="div1"> <span>sss</span> </div> <script type="text/javascript"> var mychar = document.getElementById('div1'); // 网页上显示dddd mychar.innerHTML = '<span>dddd</span>' // <span>dddd</span> console.log(mychar.innerHTML); // 网页上显示<span>dddd</span> mychar.innerText = '<span>dddd</span>' // <span>dddd</span> console.log(mychar.innerText); </script> style
- backgroudColor
- width
- height
- color
- font
- fontFamily
- display
- none：该元素不会被显示
- block：该元素会被显示为块级元素
mychar.style.color='red'; mychar.style.fontSize='20'; mychar.style.backgroundColor='blue'; mychar.style.height='30px'; mychar.style.width='250px'; mychar.style.display = 'block'; className
- 设置元素的类选择器
- className也可以在attributes数组中找到
var p1 = document.getElementById("p1"); p1.className="one"; getAttribute
- 通过元素节点的属性名称获取属性的值
elementNode.getAttribute(name)
setAttribute
- setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值
elementNode.setAttribute(name,value)
removeAttribute
object.removeAttribute("style");
attributes
- 返回该节点的所有属性，是一个数组
<div id="div1" class="top" style="width: 100px;"> <span>sss</span> </div> <script type="text/javascript"> var mychar = document.getElementById('div1'); var attrs = mychar.attributes // 3 console.log(attrs.length) // id // class // style for(let i = 0; i < attrs.length; i++){ console.log(attrs[i]) } </script> （6）节点操作
createElement()
- createElement()方法可创建元素节点。此方法可返回一个 Element 对象
<script type="text/javascript"> var body = document.body; var input = document.createElement("input"); input.type = "button"; input.value = "创建一个按钮"; body.appendChild(input); </script> appendChild()
- 插入节点appendChild()：在指定节点的最后一个子节点列表之后添加一个新的子节点。
- ul添加一个li，内容为PHP
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <body> <ul id="test"> <li>JavaScript</li> <li>HTML</li> </ul> <script type="text/javascript"> var otest = document.getElementById("test"); var add = document.createElement('li'); add.innerHTML = "PHP"; otest.appendChild(add); </script> </body> </html> - 下面的例子会发现p在div2中了，div1中没有了
<div id="div1"> <p id="p1">aaa</p> </div> <div id="div2"></div> <script type="text/javascript"> var div1 = document.getElementById('div1') var div2 = document.getElementById('div2') var p1 = document.getElementById('p1') div2.appendChild(p1) </script> - appendChild不要重复添加
<div id="div1"> <div id="div2">2222</div> </div> <script type="text/javascript"> var div1 = document.getElementById('div1') var div2 = document.getElementById('div2') var div3 = document.createElement('div'); div3.innerHTML = '3333' // div3 div2并列 div1.appendChild(div3); // div3在div2里面，并且之前并列的div3不见了 //div2.appendChild(div3); </script> insertBefore
- insertBefore() 方法可在已有的子节点前插入一个新的子节点。
- 语法：insertBefore(newnode,node);
- newnode: 要插入的新节点。
- node: 指定此节点前插入节点。
<ul id="test"> <li>JavaScript</li> <li>HTML</li> </ul> <script type="text/javascript"> var otest = document.getElementById("test"); var add = document.createElement('li'); add.innerHTML = "PHP"; otest.insertBefore(add, otest.childNodes[2]); </script> removeChild
- 必须父节点调用
- removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL
- 注意: 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x=null操作
<div id="content"> <h1>html</h1> <h1>php</h1> <h1>javascript</h1> <h1>jquery</h1> <h1>java</h1> </div> <script type="text/javascript"> var content = document.getElementById("content"); for (var i = content.childNodes.length - 1; i >= 0; i--) { // 倒叙删除 var childNode = content.childNodes[i]; content.removeChild(childNode); } </script> <button onclick="clearText()">清除节点内容</button> replaceChild
- replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
- 语法：node.replaceChild (newnode,oldnew )
- 参数：
- newnode : 必需，用于替换 oldnew 的对象
- oldnew : 必需，被 newnode 替换的对象
- b标签换成i
<div> <b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。 </div> <a href="javascript:replaceMessage()"> 将加粗改为斜体</a> <script type="text/javascript"> function replaceMessage() { var oldnode = document.getElementById("oldnode"); var oldHTML = oldnode.innerHTML; var newnode = document.createElement("i"); oldnode.parentNode.replaceChild(newnode, oldnode); newnode.innerHTML = oldHTML; } </script> createTextNode()
- 创建文本节点
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/css"> .message { width: 200px; height: 100px; background-color: #CCC; } </style> </head> <body> <script type="text/javascript"> var element = document.createElement("p"); element.className = "message"; var textNode = document.createTextNode("I love JavaScript!"); element.appendChild(textNode); document.body.appendChild(element); </script> </body> </html> cloneNode(true)
- true：深度克隆，所有子节点会被克隆
- false：只会克隆节点自身
- 节点操作后，节点原位置会丢失
- 下面的例子会发现p在div2中了，div1中没有了
<div id="div1"> <p id="p1">aaa</p> </div> <div id="div2"></div> <script type="text/javascript"> var div1 = document.getElementById('div1') var div2 = document.getElementById('div2') var p1 = document.getElementById('p1') div2.appendChild(p1) </script> - 克隆
<div id="div1"> <p id="p1">aaa</p> </div> <div id="div2"></div> <script type="text/javascript"> var div1 = document.getElementById('div1') var div2 = document.getElementById('div2') var p1 = document.getElementById('p1') var p2 = p1.cloneNode(true); div2.appendChild(p2) </script> 
