js获取节点内容,javascript获取页面中的元素,最常用的几种方式

　　本文给大家带来了一些关于javascript的知识，主要介绍了获取元素和节点的相关内容，包括通过id、类名、名称、标记名获取元素，创建、删除、克隆节点。来看看吧，希望对你有帮助。

　　【相关推荐：javascript视频教程，web前端】

获取元素

　　通过选择器获取元素(getElementById)通过名称属性(getElementsByName)通过标记名(getElementsByTagName)通过类名(getElementsByClassName)获取组体元素(010

　　//按id(按id查找元素，区分大小写，如果有多个id，将只找到第一个)

　　document . getelementbyid( P1 )；

1.通过ID获取（getElementById）

　　上下文必须是文档。必须传递一个参数，该参数是字符串类型，并且是所获取元素的id。只为返回值获取了一个元素，未找到任何返回null。

　　 //按类名查找元素，多个类名用空格隔开得到一个HTMLCollection(一个带有length属性的元素集合，可以通过索引号访问)

　　var cls=document . getelementsbyclassname( a b )；

　　console . log(cls)；是元素的类名。返回值是类数组，没有找到返回的空数组

2.通过类名（getElementsByClassName）

　　 //搜索name属性，返回NodeList(一个设置了length属性的节点，可以通过索引号访问)

　　var nm=document . getelementsbyname( c )；

　　console . log(nm)；

3.通过name属性（getElementsByName）

　　 //通过标记名查找元素并返回HTMLCollection

　　document . getelementsbytagname( p )；参数Yes用于获取元素的标记名属性，该属性不区分大小写。返回值为类数组，未找到返回的空数组

4.通过标签名（getElementsByTagName）

　　document.queryselector(。animated’)参数是一个选择器，比如：“p .className”。返回单个节点，如果有多个匹配元素，则返回第一个节点

5.通过选择器获取一个元素（querySelector）

　　document.queryselector(。动画)。返回值是一个类数组

6.通过选择器获取一组元素（querySelectorAll）

　　。在文档对象模型(DOM)中，每个节点都是一个对象。DOM节点有三个重要的属性。

　　querySelector

　　querySelectorAll

　　document.documentElement

　　document.body

　　元素的节点名与标签名相同。属性节点的节点名是属性的名称。#text节点的nodeName始终是# textdocument节点。文档节点的节点名总是#document1. nodeName : 节点的名称。

　　元素的NodeValue未定义或为空。文本节点的nodeValue是文本本身的属性。节点的nodeValue是属性2. nodeValue ：节点的值的值。

　　类型节点类型元素1属性2文本3空格也被返回3注释8文档9

获取节点

　　3. nodeType ：节点的类型

　　//创建一个元素，但它是被创建的，而不是添加到html中。它需要与appendChild一起使用。

　　var elem=document . createelement( p )；

　　elem.id= test

　　elem . style= color:red ；

　　Elem.innerHTML=我是新创建的节点；

　　document . body . appendchild(elem)；一、nodeName 属性：节点的名称，是只读的。

　　用法：parent.appendChild(child)会将子节点添加到parent中的最大值二、nodeValue 属性：节点的值。如果子节点已经存在，那么原节点将被删除，新节点将被添加到末尾，但事件将保留varone WP=document . createelement( p )；

　　var oText=document . create text node( World Hello )；

　　onewp . appendchild(oText)；三、nodeType 属性：节点的类型，是只读的。以下常用的几种结点类型：

　　是parent.insert before (newnode，ref node)的用法；var oOldp=document . body . getelementsbytagname( p )[0]；

　　document . body . insert before(one WP，oOldp)；

创建节点：

　　 1.创建节点：createElement()

　　用法：parent.removeChild(child)如果删除不是父元素的子节点，将报告错误varop=document . body . getelementsbytagname( p )[0]；

　　op . parent node . remove child(op)；

删除节点

　　 2.插入节点：appendChild ()

　　克隆节点(需要接受一个参数指示是否复制元素)//克隆节点(需要接受一个参数指示是否复制元素)

　　var form=document . getelementbyid( test )；

　　var clone=form . clone node(true)；

　　clone.id= test2

　　document.body.appendChild(克隆);

克隆节点

　　后面

　　var oOldp=document。身体。getelementsbytagname( p )[0]；

　　oo LDP。父节点。替换子(一个WP，oo LDP)；

替换节点

　　作用：当向文件中添加大量的节点时，如果逐个添加将会十分缓慢，这时可以使用文档碎片一次性添加到文件中 2-1.插入节点：insertBefore()承载节点（函数()

　　{

　　变量开始=日期。now()；

　　var str= ，李；

　　var ul=文档。getelementbyid( ul )；

　　var fragment=文档。createdocumentfragment()；

　　for(var I=0；10000英镑我)

　　{

　　Li=文档。createelement(“Li”)；

　　li.textContent=第我个子节点；

　　fragment.appendChild(李);

　　}

　　ul.appendChild(片段);

　　console.log(耗时：(Date.now()-start)毫秒);//63毫秒

　　})();【相关推荐：javascript视频教程、网络前端】以上就是Java脚本语言知识点整理之获取元素和节点的详细内容，更多请关注我们其它相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。