1500字范文 > 原生js 操作dom

原生js 操作dom

时间：2022-03-24 18:35:45

相关推荐

原生js 操作dom

web前端|js教程

javascript,操作,原生

web前端-js教程

本文我们将和大家分享原生js 操作dom ，希望对大家有用。

有了源码怎么运行,vscode设置斜体,ubuntu的好处,iead添加tomcat,sqlite释放内存,windows服务器禁止ip房屋,jquery 缩略图的轮播插件,云平台前端框架,爬虫抓取淘宝销量数据,PHP老被黑,seo网络营销教程,网站qq临时会话,网页滚动公告栏代码,checkbox模板,jquery刷新当前页面,文章管理员管理系统,程序源代码是什么lzw

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);//---整个console.log(ev.target.innerHTML);//获取src--中间的内容原生js的方法:1)创建节点：createElement创建元素，也可以使用createTextNode创建文本节点.document.body指向的是元素;document.documentElement则指向元素 //创建节点 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：父节点

sdsssssssqqqqwwwweeee复制代码 //节点属性 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);

dzzoffice源码,ubuntu自启动frp,测试tomcat服务器无法打开,爬虫软件代码行数,php如何获得客户端文件,seo数据讲解lzw

注意：1、childNodes.length存在跨浏览器的问题

视频评比网站源码,xps安装Ubuntu省电,tomcat免安装版6,谷歌爬虫频繁访问,php爬取互动网页数据,seo高级教学lzw

可以看到有关列表的html片段没有用

sdsssssssqqqqwwwweeee

这种书写格式而是使用没有换行的格式书写，是因为在不同的浏览器中，获取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方法复制的元素，只会复制特性，其他一切都不会复制

因此，若要解决跨浏览器问题，在复制前，最好先移除事件处理程序。