本文我們將跟大家分享原生js 操作dom ,希望對大家有用。
ng-click="brandFnc($event)"$scope.brandFnc = function($event) { // 通过 $event.target 来获取 } ev.target.parentElementev.target.parentElement.children[0].srcev.target.previousElementSiblingev.target.nodeNameconsole.log(ev.target.outerHTML);//<button ng-click="ngGetSrc($event)">获取src</button>---整个console.log(ev.target.innerHTML);//获取src--中间的内容原生js的方法:1)创建节点:createElement创建元素, 也可以使用createTextNode创建文本节点. document.body指向的是<body>元素;document.documentElement则指向<html>元素 //创建节点 var createNode = document.createElement("p"); var createTextNode = document.createTextNode("hello world"); createNode.appendChild(createTextNode); document.body.appendChild(createNode); document.documentElement.appendChild(createNode);2)插入节点:appendChild,insertBefore, insertBefore接收两个参数,第一个是插入的节点,第二个是参照节点,如insertBefore(a,b),则a会插入在b的前面 //插入节点 var createNode = document.createElement("p");var createTextNode = document.createTextNode("hello world"); createNode.appendChild(createTextNode); var p1 = document.getElementById("p1"); document.body.insertBefore(createNode,p1);3)替换和删除元素,从replaceChild和removeChild的字面意思看,就是删除子节点,因此调用者,需要包含子节点p1,不然调用会报错。返回的节点是替换的或删除的元素,被替换/删除的元素仍然存在,但document中已经没有他们的位置了。 //替换元素 var replaceChild = document.body.replaceChild(createNode,p1);//删除元素 var removeChild = document.body.removeChild(p1);4)节点的属性:firstChild:第一个子节点lastChild:最后一个子节点childNodes:子节点集合,获取其中子节点可以someNode.childNodes[index]或者someNode.childNodes.item(index)nextSibling:下一个兄弟节点 previousSibling:上一个兄弟节点 parentNode:父节点 <ul id="ul"><li>sdsssssss</li><li>qqqq</li><li>wwww</li><li>eeee</li></ul> 复制代码 //节点属性 var ul = document.getElementById("ul"); var firstChild = ul.firstChild; console.log(firstChild.innerHTML); var lastChild = ul.lastChild; console.log(lastChild.innerHTML); var length = ul.childNodes.length; console.log(length); var secondChild = ul.childNodes.item(1); console.log(secondChild.innerHTML); var forthChild = ul.childNodes.item(2).nextSibling; console.log(forthChild.innerHTML); var thridChild = forthChild.previousSibling; console.log(thridChild.innerHTML); var parentNode = forthChild.parentNode; console.log(parentNode.innerHTML);5) 文档片段,好处在于减少dom的渲染次数,可以优化性能。 //文本片段 var fragment = document.createDocumentFragment(); var ul = document.getElementById("ul"); var li = null; for (var i = 4; i >= 0; i--) { li = document.createElement("li"); li.appendChild(document.createTextNode("item "+i)); fragment.appendChild(li); } ul.appendChild(fragment);6)克隆元素 someNode.cloneNode(true):深度克隆,会复制节点及整个子节点 someNode.cloneNode(false):浅克隆,会复制节点,但不复制子节点 //克隆 var clone = ul.cloneNode(true);
document.body.appendChild(clone);
注意:1、childNodes.length存在跨瀏覽器的問題
#可以看到清單的html片段沒有用
<ul id="ul"> <li>sdsssssss</li> <li>qqqq</li> <li>wwww</li> <li>eeee</li> </ul>
這種書寫格式而是使用沒有換行的格式書寫,是因為在不同的瀏覽器中,取得ul.childNodes.length的結果有差異:
在ie中,ul.childNodes.length不會計算li之間的換行空格,從而得到數值為4在ff、chrome,safari中,會有包含li之間的空白符的5個文本節點,因此ul. childNodes.length為9若要解決跨瀏覽器問題,可以將li之間的換行去掉,改成一行書寫格式。
2、cloneNode存在跨瀏覽器的問題
在IE中,透過cloneNode方法複製的元素,會複製事件處理程序,比如,var b = a.cloneNode(true).若a存在click,mouseover等事件監聽,則b也會擁有這些事件監聽。
在ff,chrome,safari中,透過cloneNode方法複製的元素,只會複製特性,其他一切都不會複製
因此,若要解決跨瀏覽器問題,在複製前,最好先移除事件處理程序。
ng-click="brandFnc($event)"$scope.brandFnc = function($event) { // 通过 $event.target 来获取 } ev.target.parentElementev.target.parentElement.children[0].srcev.target.previousElementSiblingev.target.nodeNameconsole.log(ev.target.outerHTML);//<button ng-click="ngGetSrc($event)">获取src</button>---整个console.log(ev.target.innerHTML);//获取src--中间的内容原生js的方法:1)创建节点:createElement创建元素, 也可以使用createTextNode创建文本节点. document.body指向的是<body>元素;document.documentElement则指向<html>元素 //创建节点 var createNode = document.createElement("p"); var createTextNode = document.createTextNode("hello world"); createNode.appendChild(createTextNode); document.body.appendChild(createNode); document.documentElement.appendChild(createNode);2)插入节点:appendChild,insertBefore, insertBefore接收两个参数,第一个是插入的节点,第二个是参照节点,如insertBefore(a,b),则a会插入在b的前面 //插入节点 var createNode = document.createElement("p");var createTextNode = document.createTextNode("hello world"); createNode.appendChild(createTextNode); var p1 = document.getElementById("p1"); document.body.insertBefore(createNode,p1);3)替换和删除元素,从replaceChild和removeChild的字面意思看,就是删除子节点,因此调用者,需要包含子节点p1,不然调用会报错。返回的节点是替换的或删除的元素,被替换/删除的元素仍然存在,但document中已经没有他们的位置了。 //替换元素 var replaceChild = document.body.replaceChild(createNode,p1);//删除元素 var removeChild = document.body.removeChild(p1);4)节点的属性:firstChild:第一个子节点lastChild:最后一个子节点childNodes:子节点集合,获取其中子节点可以someNode.childNodes[index]或者someNode.childNodes.item(index)nextSibling:下一个兄弟节点 previousSibling:上一个兄弟节点 parentNode:父节点 <ul id="ul"><li>sdsssssss</li><li>qqqq</li><li>wwww</li><li>eeee</li></ul> 复制代码 //节点属性 var ul = document.getElementById("ul"); var firstChild = ul.firstChild; console.log(firstChild.innerHTML); var lastChild = ul.lastChild; console.log(lastChild.innerHTML); var length = ul.childNodes.length; console.log(length); var secondChild = ul.childNodes.item(1); console.log(secondChild.innerHTML); var forthChild = ul.childNodes.item(2).nextSibling; console.log(forthChild.innerHTML); var thridChild = forthChild.previousSibling; console.log(thridChild.innerHTML); var parentNode = forthChild.parentNode; console.log(parentNode.innerHTML);5) 文档片段,好处在于减少dom的渲染次数,可以优化性能。 //文本片段 var fragment = document.createDocumentFragment(); var ul = document.getElementById("ul"); var li = null; for (var i = 4; i >= 0; i--) { li = document.createElement("li"); li.appendChild(document.createTextNode("item "+i)); fragment.appendChild(li); } ul.appendChild(fragment);6)克隆元素 someNode.cloneNode(true):深度克隆,会复制节点及整个子节点 someNode.cloneNode(false):浅克隆,会复制节点,但不复制子节点 //克隆 var clone = ul.cloneNode(true); document.body.appendChild(clone);注意:1、childNodes.length存在跨浏览器的问题
可以看到有关列表的html片段没有用 <ul id="ul"> <li>sdsssssss</li> <li>qqqq</li> <li>wwww</li> <li>eeee</li> </ul>
這種書寫格式而是使用沒有換行的格式書寫,是因為在不同的瀏覽器中,取得ul.childNodes.length的結果有差異:
在ie中,ul.childNodes.length不會計算li之間的換行空格,從而得到數值為4在ff、chrome,safari中,會有包含li之間的空白符的5個文字節點,因此ul.childNodes.length為9若要解決跨瀏覽器問題,可以將li之間的換行去掉,改成一行書寫格式。
2、cloneNode存在跨瀏覽器的問題
在IE中,透過cloneNode方法複製的元素,會複製事件處理程序,比如,var b = a.cloneNode(true).若a存在click,mouseover等事件監聽,則b也會擁有這些事件監聽。
在ff,chrome,safari中,透過cloneNode方法複製的元素,只會複製特性,其他一切都不會複製
因此,若要解決跨瀏覽器問題,在複製前,最好先移除事件處理程序。
相關推薦:
以上是原生js 操作dom的詳細內容。更多資訊請關注PHP中文網其他相關文章!