原生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 的详细内容,更多请关注其它相关文章!