原生JavaScript常用的DOM操作
阿新 • • 發佈:2017-08-19
需要 ssi dom操作 哈哈 原來 rtc font tno 多個
之前項目一直都是用JQuery或者Vue來做的,確實好用,畢竟幫我們解決了很多瀏覽器兼容問題,但是後面發現大公司面試題都是要原生Javascript來做,然後我就一臉懵逼哈哈哈,畢竟大公司需要的框架或者庫好多都是公司內部自己構建的,所以說到頭來還是要原生JavaScript,這裏總結了一些原生js常用的dom操作函數。
一:節點關系
//元素的子元素都可以通過someNode下的childNodes對象來訪問 var firstChild = someNode.firstChild; //獲得第一個子元素 var lastChild = someNode.lastChild; //獲得最後一個子元素 var secondChild = someNode.childNodes[1]; //獲得第二個子元素 var secondChild = someNode.childNodes.item(1) //獲得第二個子元素 var count = someNode.childNodes.length; //獲得子元素個數 var parentNode = someNode.parentNode; //獲得父元素 var prevNode = someNode.previousSibling; //獲得前一個同胞元素,如果沒有則為nullvar nextNode = someNode.nextSibling; //獲得後一個同胞元素,如果沒有則為null var isHave = someNode.hasChildNodes(); //節點包含一個或多個子節點返回true var owner = someNode.ownerDocument; //指向表示整個文檔的文檔節點
二:操作節點
appendChild(newNode): 在節點子元素列表最後插入一個新節點,返回新增節點,如果節點本來就是文檔的一部分,那就是將節點從原來的位置移到新位置。
var returnedNode = someNode.appendChild(newNode);
insertBefore(newNode, 參照節點): 在指定節點之前插入一個新的節點。
var returnedNode = someNode.insertBefore(newNode, null) //參照物為null,則插入子節點列表最後
var returnedNode = someNode.insertBefore(newNode, someNode.fisrtChild) //以第一個子節點為參照物,相當於新節點變成了第一個子節點
replaceChild(newNode,參照節點): 用新的節點替換舊節點,返回被替換的節點,被替換的節點依然屬於文檔,只是沒有了位置。
var returnedChild = someNode.replaceChild(newNode, someNode.firstChild) //新節點替換第一個子元素
removeChild(): 移除一個子節點,並且作為返回值返回,被移除的節點依然屬於文檔,只是沒有了位置。
var formerFirstChild= someNode.removeChild(someNode.firstChild); //移除第一個子節點
cloneNode(布爾值):復制一個節點,當參數為false時只復制節點本身,當參數為true是復制節點和他的所有子節點樹。該函數不會復制事件處理程序,但是ie存在一個bug會復制處理程序,所以復制前最好先移除事件處理程序。
有這樣的html代碼:
<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>
假設我們已經將<ul>元素的引用保存在了myList中。
var deepList = myList.cloneNode(true); alert(deepList.childNodes.length); //3(IE < 9) 或 7(其他瀏覽器) var deepList = myList.cloneNode(false); alert(deepList.childNodes.length); //0
原生JavaScript常用的DOM操作