DOM 操作
下面用的代碼
<div id="box" data_a_b="ccc"><ul class="banner"><li></li><li></li><li></li></ul><ul class="number"><li></li><li></li><li></li></ul> </div> <div id="navBar"><ul class="nav"><li></li><li></li><li></li></ul> </div> <div id="content"><ul class="list"><li></li><li></li><li></li></ul> </div> <div id='text'></div> <script>var box = document.getElementById('box')var content = document.getElementById('contet')var banner = document.getElementsByClassName('banner')var li = document.getElementsByTagName('li')var list = document.getElementsByClassName('list')var navBar = document.getElementById('navBar')var nav = document.getElementsByClassName('nav')//childNodes 所有子元素var boxChildNodes = box.childNodes//children 所有子元素var boxChildren = box.children//Array.prototype.slice() 將偽數組變成數組var array = Array.prototype.slice.call(boxChildren,0)//用遍歷將偽數組變成數組var aaa = []for(var i = 0; i < boxChildNodes.length; i++){aaa.push(boxChildNodes[i])}//parentNode 父元素if(banner[0].parentNode === box){console.log('true')}else{console.log('false')}//previousSibling 上一個兄弟元素var previous = boxChildNodes[0].previousSibling//nextSibling 下一個兄弟元素var next = boxChildNodes[4].nextSibling//firstChild 第一個子元素if(boxChildNodes[0] === box.firstChild){console.log('true')}//lastChild 最后一個子元素if(boxChildNodes[boxChildNodes.length-1] === box.lastChild){console.log('true')}//hasChildNodes() 是否有子元素var boxHasChildNodes = box.hasChildNodes()var liHasChildNodes = li[0].hasChildNodes()//ownerDocument 根元素var boxOwner = box.ownerDocument//appendChild() 插入子元素boxChildNodes[1].childNodes[1].appendChild(list[0]) //在 banner 下第一個 li 下最后一個元素后添加 listboxChildNodes[1].appendChild(list[0]) //在 banner 下最后一個元素后添加 listboxChildren[1].appendChild(list[0]) //在 number 下最后一個元素后添加 Listbox.appendChild(list[0]) //在 box 下最后一個元素后添加 list//insertBefore() 在指定元素前插入某元素box.insertBefore(list[0],null) //在 box 下最后一個元素后添加 list 和 appendChild() 方法相同box.insertBefore(list[0],banner[0]) //在 box 下 banner 前添加 listboxChildNodes[1].insertBefore(list[0],banner[0].children[0]) //在 banner 下第一個 li 前添加 listnavBar.childNodes[1].insertBefore(list[0],nav[0].children[2]) //在 nav 下第三個 li 前添加 list//replaceChild() 替換子元素box.replaceChild(list[0],banner[0]) // 把 banner 替換成 listboxChildNodes[1].replaceChild(list[0],banner[0].childNodes[1]) //把 banner 下第一個 li 替換成 list//removeChild() 移除節點box.removeChild(banner[0]) //把 banner 移除掉boxChildNodes[1].removeChild(banner[0].children[0]) //把 banner 下第一個 li 移除掉//getAttribute() 獲取屬性if(box.getAttribute('id') === box.id){console.log('true')}//setAttribute() 設置屬性box.id = 'xxx' 和 box.setAttribute('id','xxx') 效果一樣//createElement() 創建一個元素標簽var p = document.createElement('p')banner[0].insertBefore(p,banner[0].children[1])//createTextNode() 創建文本var hello = document.createTextNode('Hello')var text= document.getElementById('text')text.appendChild(hello)//normalize() 合并文本節點text.normalize()//splitText()text.childNode[0].splitText(5) </script>Node
Document
<!doctype html> <html><head><title>xx</title><head><body><script>var html = document.documentElement</script></body> </html>Element
<div class="nav"><ul class="leftNav"><li></li><li></li><li></li></ul><ul class="rightNav"><li></li><li></li></ul> </div> <script>var ulId = document.getElementById('leftNav')//querySelector() 返回找到匹配的第一元素var ul = document.querySelector('ul li')// querySelectorAll() 返回找到匹配的所有元素var ulAll = document.querySelectorAll('ul li')//matches() 檢測該元素與選擇符是否匹配ulId.matches('.leftNav') </script>
DOM Selector
刪除或添加class另一種比較復雜的方法
<div id="xx" class="bd user disabled"></div>var div = document.getElementById('xx') var className = div.className.split(/\s/g) var pos = -1 for(var i = 0; i <className.length; i++){if(className[i] === 'user'){pos = ibreak;} } console.log(pos) className.splice(i,1,'dddddd') div.className = className.join(' ')總結
- 上一篇： RxLifecycle详细解析
- 下一篇： 【在线报表设计】提升报表外观的15个技巧