创立节点
一、createElement
let elem = document.createElement("div"); elem.id = 'test'; elem.style = 'color: red'; elem.innerHTML = '我是新创建的节点'; document.body.appendChild(elem);二、createTextNode
var node = document.createTextNode("我是文本节点"); document.body.appendChild(node);三、cloneNode
var dupNode = node.cloneNode(deep); deep : true => 深克隆， false => 浅克隆实际：<body> <div id="parent"> 我是父元素的文本 <br/> <span> 我是子元素 </span> </div> <button id="btnCopy">复制</button></body><script> var parent = document.getElementById("parent"); document.getElementById("btnCopy").onclick = function(){ var parent2 = parent.cloneNode(true); parent2.id = "parent2"; document.body.appendChild(parent2); }</script>四、createDocumentFragment
let fragment = document.createDocumentFragment();实际:<body> <ul id="ul"></ul></body><script> (function() { var start = Date.now(); var str = '', li; var ul = document.getElementById('ul'); var fragment = document.createDocumentFragment(); for(var i=0; i<1000; i++) { li = document.createElement('li'); li.textContent = '第'+(i+1)+'个子节点'; fragment.appendChild(li); } ul.appendChild(fragment); })();</script>批改节点
一、appendChild
child节点将会作为parent节点的最初一个子节点。
appendChild这个办法很简略，然而还有有一点须要留神：如果被增加的节点是一个页面中存在的节点，则执行后这个节点将会增加到指定地位，其本来所在的地位将移除该节点，也就是说不会同时存在两个该节点在页面上，相当于把这个节点挪动到另一个中央。
如果child绑定了事件，被挪动时，它仍然绑定着该事件
parent.appendChild(child);<body> <div id="child"> 要被增加的节点 </div> <br/> <br/> <br/> <div id="parent"> 要挪动的地位 </div> <input id="btnMove" type="button" value="挪动节点" /></body><script> document.getElementById("btnMove").onclick = function(){ var child = document.getElementById("child"); document.getElementById("parent").appendChild(child); } </script>二、insertBefore
parentNode.insertBefore(newNode,refNode);// parentNode示意新节点被增加后的父节点 newNode示意要增加的节点 refNode示意参照节点，新节点会增加到这个节点之前 // refNode 为必传项// 如果refNode是undefined或null，则insertBefore会将节点增加到子元素的开端<body> <div id="parent"> 父节点 <div id="child"> 子元素 </div> </div> <input type="button" id="insertNode" value="插入节点" /></body><script> var parent = document.getElementById("parent"); var child = document.getElementById("child"); document.getElementById("insertNode").onclick = function(){ var newNode = document.createElement("div"); newNode.textContent = "新节点" parent.insertBefore(newNode,child); }</script>三、 removeChild
var deletedChild = parent.removeChild(node);// deletedChild指向被删除节点的援用，它等于node，被删除的节点依然存在于内存中，能够对其进行下一步操作。// 如果被删除的节点不是其子节点，则程序将会报错。咱们能够通过上面的形式来确保能够删除：if(node.parentNode){ node.parentNode.removeChild(node);}四、 replaceChild
parent.replaceChild(newChild,oldChild)// newChild是替换的节点，能够是新的节点，也能够是页面上的节点，如果是页面上的节点，则其将被转移到新的地位 oldChild是被替换的节点实际：<body> <div id="parent"> 父节点 <div id="child"> 子元素 </div> </div> <input type="button" id="insertNode" value="替换节点" /></body><script> var parent = document.getElementById("parent"); var child = document.getElementById("child"); document.getElementById("insertNode").onclick = function(){ var newNode = document.createElement("div"); newNode.textContent = "新节点" parent.replaceChild(newNode,child) }节点查问
一、document.getElementById
var element = document.getElementById(id);// 如果元素不存在返回null// 留神id的大小写// 文档中可能存在多个id雷同的元素，则返回第一个元素// 只会从文档中搜寻，如果创立一个新的并指定id，然而没有增加到文档中，则这个元素不会被查找<body> <p id="para1">Some text here</p> <button onclick="changeColor('blue');">blue</button> <button onclick="changeColor('red');">red</button></body><script> function changeColor(newColor) { var elem = document.getElementById("para1"); elem.style.color = newColor; }</script>二、document.getElementsByTagName
返回一个包含所有给定标签名称的元素的HTML汇合HTMLCollection。 整个文件构造都会被搜寻，包含根节点。返回的 HTML汇合是动静的, 意味着它能够自动更新本人来放弃和 DOM 树的同步而不必再次调用document.getElementsByTagName()
var elements = document.getElementsByTagName(name);// 不传参数返回null// name 是一个元素的名称的字符串，特殊字符*代表所有元素<body> <div>div1</div> <div>div2</div> <input type="button" value="显示数量" id="btnShowCount"/> <input type="button" value="新增div" id="btnAddDiv"/> </body><script> var divList = document.getElementsByTagName("div"); document.getElementById("btnAddDiv").onclick = function(){ var div = document.createElement("div"); div.textContent ="div" + (divList.length+1); document.body.appendChild(div); } document.getElementById("btnShowCount").onclick = function(){ alert(divList.length); }</script>三、document.getElementsByName
var elements = document.getElementsByName(name)// 返回的是nodeList， 且是随着减少删除主动变动的// 在html中，并不是所有元素都有name属性，比方div是没有name属性的，能够强制加上name属性，也是能够被增加的// 在IE中，如果id设置成某个值，而后传入getElementsByName的参数值和id值一样，则这个元素是会被找到的，所以最好不好设置同样的值给id和name<script type="text/javascript"> function getElements() { var x=document.getElementsByName("myInput"); alert(x.length); }</script><body> <input name="myInput" type="text" size="20" /><br /> <input name="myInput" type="text" size="20" /><br /> <input name="myInput" type="text" size="20" /><br /> <br /> <input type="button" onclick="getElements()" value="How many elements named 'myInput'?" /></body>四、document.getElementsByClassName
var elements = document.getElementsByClassName(names); // or: var elements = rootElement.getElementsByClassName(names);// elements 是一个汇合，也是动静更新的，蕴含所有元素// names 是一个字符串 示意要匹配的类名列表，类名通过空格分隔// getElementsByClassName 能够在任何元素上调用，不仅仅是document，调用这个办法的元素将作为本次查找的根元素 var elements = document.getElementsByClassName("test1 test2");// 获取所有class为test的元素 var elements = document.getElementsByClassName("test");// 获取所有class同时包含 test1 和 test2 的元素var elements = document.getElementsByClassName('test1 test2')// 在id为father的元素子节点中获取所有class为child的元素var elements = document.getElementById('father').getElementsByClassName('child)// 还能够调用Array.prototype 的办法var testElements = document.getElementsByClassName('test'); var testDivs = Array.prototype.filter.call(testElements, function(testElement){ return testElement.nodeName === 'DIV';; });五、document.querySelector
通过css选择器查问元素，留神选择器要合乎css选择器的规定，
返回的是匹配的第一个元素，无匹配则返回null
var element = document.querySelector(selectors);// 应用深度优先遍历元素获取<body> <div> <div> <span class="test">第三级的span</span> </div> </div> <div class="test"> 同级的第二个div </div> <input type="button" id="btnGet" value="获取test元素" /></body><script> document.getElementById("btnGet").addEventListener("click",function(){ var element = document.querySelector(".test"); alert(element.textContent); })</script>// 拿到的第一个呈现的第三级span六、document.querySelectorAll
返回的是所有匹配的元素， 而且能够匹配多个选择符
var elementList = document.querySelectorAll(selectors);// elementList 是一个动态nodeList// selector 是一个逗号连贯的蕴含一个或多个css选择器的字符串// 如果selectors 参数中蕴含css伪元素，则返回一个空的elementListvar matches = document.querySelectorAll("div.note, div.alert");<body> <div class="test"> class为test </div> <div id="test"> id为test </div> <input id="btnShow" type="button" value="显示内容" /></body><script> document.getElementById("btnShow").addEventListener("click",function(){ var elements = document.querySelectorAll("#test,.test"); for(var i = 0,length = elements.length;i<length;i++){ alert(elements[i].textContent); } })</script>// alert => class为test关系节点
一、parentNode
每个节点都有一个parentNode属性，它示意元素的父节点。Element的父节点可能是Element，Document或DocumentFragment
二、parentElement
返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element，如果不是，则返回null
三、childNodes
返回一个即时的NodeList，示意元素的子节点列表，子节点可能会蕴含文本节点，正文节点等
四、children
一个即时的HTMLCollection，子节点都是Element，IE9以下浏览器不反对
children属性为只读属性，对象类型为HTMLCollection，你能够应用elementNodeReference.children[1].nodeName来获取某个子元素的标签名称
五、firstChild
只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null
六、lastChild
返回以后节点的最初一个子节点。如果父节点为一个元素节点，则子节点通常为一个元素节点，或一个文本节点，或一个正文节点。如果没有子节点，则返回null
七、hasChildNode
返回一个布尔值,表明以后节点是否蕴含有子节点.
八、previousSibling
返回以后节点的前一个兄弟节点,没有则返回null
Gecko内核的浏览器会在源代码中标签外部有空白符的中央插入一个文本结点到文档中.因而,应用诸如Node.firstChild和Node.previousSibling之类的办法可能会援用到一个空白符文本节点, 而不是使用者所预期失去的节点
九、previousElementSibling
previousElementSibling返回以后元素在其父元素的子元素节点中的前一个元素节点,如果该元素曾经是第一个元素节点,则返回null,该属性是只读的。留神IE9以下浏览器不反对
十、nextSibling
Node.nextSibling是一个只读属性，返回其父节点的childNodes列表中紧跟在其前面的节点，如果指定的节点为最初一个节点，则返回null
Gecko内核的浏览器会在源代码中标签外部有空白符的中央插入一个文本结点到文档中.因而,应用诸如Node.firstChild和Node.previousSibling之类的办法可能会援用到一个空白符文本节点, 而不是使用者所预期失去的节点
十一、nextElementSibling
nextElementSibling返回以后元素在其父元素的子元素节点中的后一个元素节点,如果该元素曾经是最初一个元素节点,则返回null,该属性是只读的。留神IE9以下浏览器不反对
元素属性
一、setAttribute
设置指定元素上的一个属性值，如果属性曾经存在，则更新该值，否则增加一个新的属性用的名称和值
element.setAttribute(name, value);body> <div id="div1">ABC</div></body><script> let div1 = document.getElementById("div1"); div1.setAttribute("align", "center");</script>二、getAttribute
getAttribute()返回元素上一个指定的属性值。如果指定的属性不存在，则返回null或""（空字符串）
let attribute = element.getAttribute(attributeName); <body> <div id="div1">ABC</div></body><script> let div1 = document.getElementById("div1"); let align = div1.getAttribute("align"); alert(align);</script> 三、removeAttribute
removeAttribute()从指定的元素中删除一个属性
body> <div id="div1" style="color:red" width="200px">ABC </div></body><script> let div = document.getElementById("div1") div.removeAttribute("style");</script>元素款式
一、window.getComputedStyle
二、getBoundingCLientRect
getBoundingClientRect用来返回元素的大小以及绝对于浏览器可视窗口的地位