您的当前位置:首页正文

Js获取HTMLDOM节点元素的方法小结_javascript技巧

时间:2023-12-02 来源:站点网

如何获取要更新的元素,是首先要解决的问题。令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过)1. 通过顶层document节点获取: (1) document.getElementById(elementId) :该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。 如今,已经出现了如prototype、Mootools等多个JavaScript库,它们提供了更简便的方法:$(id),参数仍然是节点的id。这个方法可以看作是document.getElementById()的另外一种写法,不过$()的功能更为强大,具体用法可以参考它们各自的API文档。 (2)document.getElementsByName(elementName) :该方法是通过节点的name获取节点,从名字可以看出,这个方法返回的不是一个节点元素,而是具有同样名称的节点数组。然后,我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。 例如:在HTML中checkbox和radio都是通过相同的name属性值,来标识一个组内的元素。如果我们现在要获取被选中的元素,首先获取改组元素,然后循环判断是节点的checked属性值是否为true即可。 (3)document.getElementsByTagName(tagName) :该方法是通过节点的Tag获取节点,同样该方法也是返回一个数组,例如:document.getElementsByTagName('A')将会返回页面上所有超链接节点。在获取节点之前,一般都是知道节点的类型的,所以使用该方法比较简单。但是缺点也是显而易见,那就是返回的数组可能十分庞大,这样就会浪费很多时间。那么,这个方法是不是就没有用处了呢?当然不是,这个方法和上面的两个不同,它不是document节点的专有方法,还可以应用其他的节点,下面将会提到。 2、通过父节点获取: (1)parentObj.firstChild :如果节点为已知节点(parentObj)的第一个子节点就可以使用这个方法。这个属性是可以递归使用的,也就是支持parentObj.firstChild.firstChild.firstChild...的形式,如此就可以获得更深层次的节点。 (2)parentObj.lastChild :很显然,这个属性是获取已知节点(parentObj)的最后一个子节点。与firstChild一样,它也可以递归使用。 在使用中,如果我们把二者结合起来,那么将会达到更加令人兴奋的效果,即:parentObj.firstChild.lastChild.lastChild... (3)parentObj.childNodes :获取已知节点的子节点数组,然后可以通过循环或者索引找到需要的节点。注意 :经测试发现,在IE7上获取的是直接子节点的数组,而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。 (4)parentObj.children :获取已知节点的直接子节点数组。注意 :经测试,在IE7上,和childNodes效果一样,而Firefox2.0.0.11不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。 (5)parentObj.getElementsByTagName(tagName) :使用方法不再赘述,它返回已知节点的所有子节点中类型为指定值的子节点数组。例如:parentObj.getElementsByTagName('A')返回已知的子节点中的所有超链接。3、通过临近节点获取: (1)neighbourNode.previousSibling :获取已知节点(neighbourNode)的前一个节点,这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。 (2)neighbourNode.nextSibling :获取已知节点(neighbourNode)的下一个节点,同样支持递归。4、通过子节点获取: (1)childNode.parentNode :获取已知节点的父节点。 上面提到的方法,只是一些基本的方法,如果使用了Prototype等JavaScript库,可能还获得其他不同的方法,例如通过节点的class获取等等。不过,如果能够灵活运用上面的各种方法,相信应该可以应付大部分的程序注意这是转载的文档:其中通过firstChild和lastChild获得HTML Node是不可取的。因为,根据浏览器的不同,firstChild有可能返回parentObj的属性对象。

小编还为您整理了以下内容,可能对您也有帮助:

获取页面html元素的方法

获取页面HTML元素的方法主要有两种,分别是通过使用JavaScript中的DOM操作方法和CSS选择器方法。

1. JavaScript中的DOM操作方法

JavaScript提供了丰富的文档对象模型(DOM)操作方法,使我们能够轻松获取和操作HTML元素。例如,getElementById方法可以用于获取具有特定id的元素,getElementsByClassName方法可以用于获取具有特定类名的所有元素,getElementsByTagName方法可以用于获取具有特定标签名的所有元素。此外,querySelector和querySelectorAll方法可以用于获取匹配特定CSS选择器的元素。例如:

javascript

// 获取id为myId的元素

var element = document.getElementById("myId");

// 获取类名为myClass的所有元素

var elements = document.getElementsByClassName("myClass");

// 获取标签名为div的所有元素

var elements = document.getElementsByTagName("div");

// 获取第一个匹配.myClass的元素

var element = document.querySelector(".myClass");

// 获取所有匹配.myClass的元素

var elements = document.querySelectorAll(".myClass");

2. CSS选择器方法

CSS选择器是一种强大的工具,它可以用来选择和操作HTML元素。在JavaScript中,我们可以通过querySelector和querySelectorAll方法使用CSS选择器获取元素。这两个方法都接收一个CSS选择器作为参数,然后返回匹配该选择器的元素。例如:

javascript

// 获取第一个匹配#myId的元素

var element = document.querySelector("#myId");

// 获取所有匹配.myClass的元素

var elements = document.querySelectorAll(".myClass");

值得注意的是,这两种方法各有优缺点。DOM操作方法更直接,但功能相对基础。CSS选择器方法功能更强大,可以实现更复杂的选择需求,但使用起来可能需要更多的理解和学习。在实际使用中,我们可以根据具体需求选择合适的方法。同时,对于更复杂的需求,我们还可以结合使用这两种方法,以实现最佳的效果。总的来说,获取页面HTML元素的方法多种多样,我们可以根据实际需求选择最适合我们的方法。

js获取html元素的方式

js获取html元素的方式

+通过ID获取:getElementById('id属性值')

+通过标签名:getElementsByTagName('标签名')

+通过类名:getElementsByClassName('类名')

+通过name属性:getElementsByName('name属性值')

+通过选择器获取一个元素:querySelector

+通过选择器获取一组元素:querySelectorAll

1.获取id值为d1的html元素

将获取到的html元素称为DOM节点对象,必须传参数,参数是string类型,是获取元素的id。返回值只获取到一个元素,没有找到返回null。

2.通过标签名:getElementsByTagName('标签名')

参数是是获取元素的标签名属性,不区分大小写,根据标签名获取html元素, 返回的是一个数组(伪数组) 

通过类名:getElementsByClassName('类名')

参数是元素的类名,返回值是一个类数组,没有找到返回空数组。

通过类名:getElementsByClassName('类名')

必须传参数,参数是是获取元素的name属性,返回值是一个类数组,没有找到返回空数组。

通过选择器获取一个元素:querySelector

参数是选择器,返回值只获取到第一个元素。

通过选择器获取一组元素:querySelectorAll

参数是选择器,返回值是一个数组。

js获取html元素的方式

js获取html元素的方式

+通过ID获取:getElementById('id属性值')

+通过标签名:getElementsByTagName('标签名')

+通过类名:getElementsByClassName('类名')

+通过name属性:getElementsByName('name属性值')

+通过选择器获取一个元素:querySelector

+通过选择器获取一组元素:querySelectorAll

1.获取id值为d1的html元素

将获取到的html元素称为DOM节点对象,必须传参数,参数是string类型,是获取元素的id。返回值只获取到一个元素,没有找到返回null。

2.通过标签名:getElementsByTagName('标签名')

参数是是获取元素的标签名属性,不区分大小写,根据标签名获取html元素, 返回的是一个数组(伪数组) 

通过类名:getElementsByClassName('类名')

参数是元素的类名,返回值是一个类数组,没有找到返回空数组。

通过类名:getElementsByClassName('类名')

必须传参数,参数是是获取元素的name属性,返回值是一个类数组,没有找到返回空数组。

通过选择器获取一个元素:querySelector

参数是选择器,返回值只获取到第一个元素。

通过选择器获取一组元素:querySelectorAll

参数是选择器,返回值是一个数组。

javascript的dom访问页面元素常见的方法有哪些

1. 通过顶层document节点获取:
(1) document.getElementById(elementId) :该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。
如今,已经出现了如prototype、Mootools等多个JavaScript库,它们提供了更简便的方法:$(id),参数仍然是节点的id。这个方法可以看作是document.getElementById()的另外一种写法,不过$()的功能更为强大,具体用法可以参考它们各自的API文档。
(2)document.getElementsByName(elementName) :该方法是通过节点的name获取节点,从名字可以看出,这个方法返回的不是一个节点元素,而是具有同样名称的节点数组。然后,我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。
例如:在HTML中checkbox和radio都是通过相同的name属性值,来标识一个组内的元素。如果我们现在要获取被选中的元素,首先获取改组元素,然后循环判断是节点的checked属性值是否为true即可。
(3)document.getElementsByTagName(tagName) :该方法是通过节点的Tag获取节点,同样该方法也是返回一个数组,例如:document.getElementsByTagName('A')将会返回页面上所有超链接节点。在获取节点之前,一般都是知道节点的类型的,所以使用该方法比较简单。但是缺点也是显而易见,那就是返回的数组可能十分庞大,这样就会浪费很多时间。那么,这个方法是不是就没有用处了呢?当然不是,这个方法和上面的两个不同,它不是document节点的专有方法,还可以应用其他的节点,下面将会提到。
2、通过父节点获取:
(1)parentObj.firstChild :如果节点为已知节点(parentObj)的第一个子节点就可以使用这个方法。这个属性是可以递归使用的,也就是支持parentObj.firstChild.firstChild.firstChild...的形式,如此就可以获得更深层次的节点。
(2)parentObj.lastChild :很显然,这个属性是获取已知节点(parentObj)的最后一个子节点。与firstChild一样,它也可以递归使用。
在使用中,如果我们把二者结合起来,那么将会达到更加令人兴奋的效果,即:parentObj.firstChild.lastChild.lastChild...
(3)parentObj.childNodes :获取已知节点的子节点数组,然后可以通过循环或者索引找到需要的节点。
注意 :经测试发现,在IE7上获取的是直接子节点的数组,而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。
(4)parentObj.children :获取已知节点的直接子节点数组。
注意 :经测试,在IE7上,和childNodes效果一样,而Firefox2.0.0.11不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。
(5)parentObj.getElementsByTagName(tagName) :使用方法不再赘述,它返回已知节点的所有子节点中类型为指定值的子节点数组。例如:parentObj.getElementsByTagName('A')返回已知的子节点中的所有超链接。
3、通过临近节点获取:
(1)neighbourNode.previousSibling :获取已知节点(neighbourNode)的前一个节点,这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。
(2)neighbourNode.nextSibling :获取已知节点(neighbourNode)的下一个节点,同样支持递归。
4、通过子节点获取:
(1)childNode.parentNode :获取已知节点的父节点。
上面提到的方法,只是一些基本的方法,如果使用了Prototype等JavaScript库,可能还获得其他不同的方法,例如通过节点的class获取等等。不过,如果能够灵活运用上面的各种方法,相信应该可以应付大部分的程序。
【注意】这是转载的文档:其中通过firstChild和lastChild获得HTML Node是不可取的。因为,根据浏览器的不同,firstChild有可能返回parentObj的属性对象。

javascript的dom访问页面元素常见的方法有哪些

1. 通过顶层document节点获取:
(1) document.getElementById(elementId) :该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。
如今,已经出现了如prototype、Mootools等多个JavaScript库,它们提供了更简便的方法:$(id),参数仍然是节点的id。这个方法可以看作是document.getElementById()的另外一种写法,不过$()的功能更为强大,具体用法可以参考它们各自的API文档。
(2)document.getElementsByName(elementName) :该方法是通过节点的name获取节点,从名字可以看出,这个方法返回的不是一个节点元素,而是具有同样名称的节点数组。然后,我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。
例如:在HTML中checkbox和radio都是通过相同的name属性值,来标识一个组内的元素。如果我们现在要获取被选中的元素,首先获取改组元素,然后循环判断是节点的checked属性值是否为true即可。
(3)document.getElementsByTagName(tagName) :该方法是通过节点的Tag获取节点,同样该方法也是返回一个数组,例如:document.getElementsByTagName('A')将会返回页面上所有超链接节点。在获取节点之前,一般都是知道节点的类型的,所以使用该方法比较简单。但是缺点也是显而易见,那就是返回的数组可能十分庞大,这样就会浪费很多时间。那么,这个方法是不是就没有用处了呢?当然不是,这个方法和上面的两个不同,它不是document节点的专有方法,还可以应用其他的节点,下面将会提到。
2、通过父节点获取:
(1)parentObj.firstChild :如果节点为已知节点(parentObj)的第一个子节点就可以使用这个方法。这个属性是可以递归使用的,也就是支持parentObj.firstChild.firstChild.firstChild...的形式,如此就可以获得更深层次的节点。
(2)parentObj.lastChild :很显然,这个属性是获取已知节点(parentObj)的最后一个子节点。与firstChild一样,它也可以递归使用。
在使用中,如果我们把二者结合起来,那么将会达到更加令人兴奋的效果,即:parentObj.firstChild.lastChild.lastChild...
(3)parentObj.childNodes :获取已知节点的子节点数组,然后可以通过循环或者索引找到需要的节点。
注意 :经测试发现,在IE7上获取的是直接子节点的数组,而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。
(4)parentObj.children :获取已知节点的直接子节点数组。
注意 :经测试,在IE7上,和childNodes效果一样,而Firefox2.0.0.11不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。
(5)parentObj.getElementsByTagName(tagName) :使用方法不再赘述,它返回已知节点的所有子节点中类型为指定值的子节点数组。例如:parentObj.getElementsByTagName('A')返回已知的子节点中的所有超链接。
3、通过临近节点获取:
(1)neighbourNode.previousSibling :获取已知节点(neighbourNode)的前一个节点,这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。
(2)neighbourNode.nextSibling :获取已知节点(neighbourNode)的下一个节点,同样支持递归。
4、通过子节点获取:
(1)childNode.parentNode :获取已知节点的父节点。
上面提到的方法,只是一些基本的方法,如果使用了Prototype等JavaScript库,可能还获得其他不同的方法,例如通过节点的class获取等等。不过,如果能够灵活运用上面的各种方法,相信应该可以应付大部分的程序。
【注意】这是转载的文档:其中通过firstChild和lastChild获得HTML Node是不可取的。因为,根据浏览器的不同,firstChild有可能返回parentObj的属性对象。

JS之DOM操作

DOM: Document Object Model,文档对象模型;js提供了丰富的api来操作文档内容。
DOM树: html文档中的内容是以树形结构排布,html是DOM树根,html下只有两个子标签head、body
节点: DOM将所有的分支端都成为节点。节点有很多类型,常见的节点类型有:文本节点、元素节点。
可以通过 nodeType查看节点类型 : 1元素节点、3文本节点

特殊的元素节点:
1、html元素

2、body元素

3、head元素

节点操作的api(属性和方法)
1、nodeName:只读属性,可以读取节点名称

2、nodeType:只读属性,读取节点类型

3、 hasChildNodes():判断调用方法的节点是否存在子节点,存在返回true,不存在返回false。
主流浏览器会将换行符、制表符、空格当做文本节点处理,IE9以下会忽略它们。

4、childNodes:只读属性,获得节点的子节点集合,子节点集合是一个类数组结构,有数组特点无数组方法

5、firstChild:获得节点的第一个子节点

6、lastChild:获得节点的最后一个子节点

7、querySelector():
参数:string类型,css选择器
作用:获得文档中第一个符合选择器条件的节点
兼容:在IE9以下不支持

8、 querySelectorAll(): // 获得的都是静态集合
参数:string类型,css选择器
作用:获得文档中所有符合选择器条件的节点集合(类数组结构)
兼容:在IE9以下不支持

注意: querySelector() 和 querySelectorAll() 得到的都是元素节点。

9、previousSibling:获取节点的前一个兄弟节点

10、nextSibling:获取节点的后一个兄弟节点

11、parentNode:获得节点的父节点(父节点一定是元素节点)

12、removeChild():节点删除它的指定子节点
DOM操作元素:暂时不用的隐藏、一定不用的删除。

13、cloneNode():克隆一个节点
参数:boolean类型,true深克隆,false浅克隆,默认浅克隆
深克隆:不仅克隆节点和节点的属性,还会克隆节点的子节点
浅克隆:只克隆节点和节点的属性,不会克隆节点的子节点

14、a.replaceChild(b,c):用b替换c
其中a是c的父节点,c是文档上已经存在的节点,b可以是节点也可以是已存在节点,被替换的节点会从文档结构中删除。

15、a.replaceWith(b):用b替换a
a已存在的节点,b可以是新节点也可以是已存在节点,被替换的节点从DOM树删除。

16、a.insertBefore(b,c):在c前面插入b
其中,a是c的父节点,c是已经存在的节点,b是新节点

17、a.appendChild(b):在a末尾追加b

a是父节点,b是a的子节点, c是子节点

元素节点的相关api
1、getElementsByTagName():根据标签名获得元素集合(类数组结构)

区别:HTMLCollection 是动态集合,NodeList 是静态集合。

2、createElement():根据标签名创建新元素

3、id:读写属性,可以读取或设置元素的id值

4、className:读写属性,可以读取或设置元素的class值

5、classList:读取标签的类名集合(类数组结构)

add():为元素新增类名,如果类名已存在不会重复添加

remove():删除元素指定类名,如果类名不存在不会执行操作

元素的属性分为两类:
一类是元素本里就拥有的属性,例如:id、class、style、src、herf、target、alt、title、type、value等等,这些属性可以在js中直接通过.语法读取或设置。
再一类是我们为了解决问题给元素添加的自定义属性,这些属性在js中无法直接通过.语法读取,需要通过操作方法访问。
6、setAttribute(name,value)
参数:name表示要设置的属性名,value要为属性设置的值
无返回值

7、getAttribute(name)
参数:name表示要读取的属性名
返回值:返回属性的值,如果属性不存在会返回null

8、removeAttribute(name)
参数:name表示要删除的属性名
无返回值

说明:setAttribute()、getAttribute()、removeAttribute()都可以操作元素的本地属性和自定义属性。

element拓展:
兼容:以下属性、方法在IE9以下不支持。

1、children:读取元素的所有元素子节点集合(类数组)

2、parentElement:读取元素的父元素节点

3、previousElementSibling:读取前一个元素兄弟节点

4、nextElementSibling:读取后一个元素兄弟节点

5、firstElementChild:读取第一个元素子节点
6、lastElementChild:读取最后一个元素子节点
7、remove(): 将调用方法的元素从DOM结构中删除

JS之DOM操作

DOM: Document Object Model,文档对象模型;js提供了丰富的api来操作文档内容。
DOM树: html文档中的内容是以树形结构排布,html是DOM树根,html下只有两个子标签head、body
节点: DOM将所有的分支端都成为节点。节点有很多类型,常见的节点类型有:文本节点、元素节点。
可以通过 nodeType查看节点类型 : 1元素节点、3文本节点

特殊的元素节点:
1、html元素

2、body元素

3、head元素

节点操作的api(属性和方法)
1、nodeName:只读属性,可以读取节点名称

2、nodeType:只读属性,读取节点类型

3、 hasChildNodes():判断调用方法的节点是否存在子节点,存在返回true,不存在返回false。
主流浏览器会将换行符、制表符、空格当做文本节点处理,IE9以下会忽略它们。

4、childNodes:只读属性,获得节点的子节点集合,子节点集合是一个类数组结构,有数组特点无数组方法

5、firstChild:获得节点的第一个子节点

6、lastChild:获得节点的最后一个子节点

7、querySelector():
参数:string类型,css选择器
作用:获得文档中第一个符合选择器条件的节点
兼容:在IE9以下不支持

8、 querySelectorAll(): // 获得的都是静态集合
参数:string类型,css选择器
作用:获得文档中所有符合选择器条件的节点集合(类数组结构)
兼容:在IE9以下不支持

注意: querySelector() 和 querySelectorAll() 得到的都是元素节点。

9、previousSibling:获取节点的前一个兄弟节点

10、nextSibling:获取节点的后一个兄弟节点

11、parentNode:获得节点的父节点(父节点一定是元素节点)

12、removeChild():节点删除它的指定子节点
DOM操作元素:暂时不用的隐藏、一定不用的删除。

13、cloneNode():克隆一个节点
参数:boolean类型,true深克隆,false浅克隆,默认浅克隆
深克隆:不仅克隆节点和节点的属性,还会克隆节点的子节点
浅克隆:只克隆节点和节点的属性,不会克隆节点的子节点

14、a.replaceChild(b,c):用b替换c
其中a是c的父节点,c是文档上已经存在的节点,b可以是节点也可以是已存在节点,被替换的节点会从文档结构中删除。

15、a.replaceWith(b):用b替换a
a已存在的节点,b可以是新节点也可以是已存在节点,被替换的节点从DOM树删除。

16、a.insertBefore(b,c):在c前面插入b
其中,a是c的父节点,c是已经存在的节点,b是新节点

17、a.appendChild(b):在a末尾追加b

a是父节点,b是a的子节点, c是子节点

元素节点的相关api
1、getElementsByTagName():根据标签名获得元素集合(类数组结构)

区别:HTMLCollection 是动态集合,NodeList 是静态集合。

2、createElement():根据标签名创建新元素

3、id:读写属性,可以读取或设置元素的id值

4、className:读写属性,可以读取或设置元素的class值

5、classList:读取标签的类名集合(类数组结构)

add():为元素新增类名,如果类名已存在不会重复添加

remove():删除元素指定类名,如果类名不存在不会执行操作

元素的属性分为两类:
一类是元素本里就拥有的属性,例如:id、class、style、src、herf、target、alt、title、type、value等等,这些属性可以在js中直接通过.语法读取或设置。
再一类是我们为了解决问题给元素添加的自定义属性,这些属性在js中无法直接通过.语法读取,需要通过操作方法访问。
6、setAttribute(name,value)
参数:name表示要设置的属性名,value要为属性设置的值
无返回值

7、getAttribute(name)
参数:name表示要读取的属性名
返回值:返回属性的值,如果属性不存在会返回null

8、removeAttribute(name)
参数:name表示要删除的属性名
无返回值

说明:setAttribute()、getAttribute()、removeAttribute()都可以操作元素的本地属性和自定义属性。

element拓展:
兼容:以下属性、方法在IE9以下不支持。

1、children:读取元素的所有元素子节点集合(类数组)

2、parentElement:读取元素的父元素节点

3、previousElementSibling:读取前一个元素兄弟节点

4、nextElementSibling:读取后一个元素兄弟节点

5、firstElementChild:读取第一个元素子节点
6、lastElementChild:读取最后一个元素子节点
7、remove(): 将调用方法的元素从DOM结构中删除

js操作节点的DOM方法

js操作节点的DOM方法

一、创建节点

createElement

createTextNode

二、添加、删除、替换、克隆元素
1、appendChild

2、insertBefore

3、如果appendChild、insertBefore追加的是已经存在的子元素,实际上就会将子元素位置移动

4、删除节点remove removeChild

remove()

removeChild

5.替换节点

replaceChild

6、克隆节点

cloneNode()

三、操作元素属性的方法

1.获取属性 元素.属性名

2.设置属性 元素.属性名 = 属性值

1、2方法只能获取和设置元素自带的属性

3.操作属性的万能方法
getAttribute()

setAttribute()

js操作节点的DOM方法

js操作节点的DOM方法

一、创建节点

createElement

createTextNode

二、添加、删除、替换、克隆元素
1、appendChild

2、insertBefore

3、如果appendChild、insertBefore追加的是已经存在的子元素,实际上就会将子元素位置移动

4、删除节点remove removeChild

remove()

removeChild

5.替换节点

replaceChild

6、克隆节点

cloneNode()

三、操作元素属性的方法

1.获取属性 元素.属性名

2.设置属性 元素.属性名 = 属性值

1、2方法只能获取和设置元素自带的属性

3.操作属性的万能方法
getAttribute()

setAttribute()

如何在javascript中获取dom对象

js中有四种获取dom的方法:

根据ID获取对象:document.getElementById(ID);

根据class获取对象数组:document.getElementsByClassName("box");

根据tag获取对象数组:document.getElementsByTagName("p");

根据name获取对象数组:document.getElementsByName(NAME);

用jquery选择器就多得去了,一般都用jquery,js一大串代码用jquery几个符号搞定。

根据ID获取对象:$('#ID');

根据class获取对象数组:$(".box");

根据tag获取对象数组:$("p");;

根据name获取对象数组:$('input[name="nw"]');

JS获取网页中HTML元素的几种方法分析

常用以下几种方式:

<div id="mued" class="mued"></div>

<script>

//通过DOM标签获取,会选择页面上所有的DIV标签

var divObj = document.getElementsByTagNames("div");

//通过ID获取,具有唯一性

var divObjId = document.getElementsById("mued");

//通过Class获取,会选择页面上所有CLASS名为mued的DOM标签

var divObjClass = document.getElementsByClassName("mued");

//如果使用jQuery库,相对来说比较简单

var jDiv = $("div");

var jDivId = $("#mued");

var jDivClass = $(".mued");

</script>

站点网还为您提供以下相关内容希望对您有帮助:

js获取html元素的方式

1.获取id值为d1的html元素 将获取到的html元素称为DOM节点对象,必须传参数,参数是string类型,是获取元素的id。返回值只获取到一个元素,没有找到返回null。2.通过标签名:getElementsByTagName('标签名')参数是是获取元...

javascript的dom访问页面元素常见的方法有哪些

(1) document.getElementById(elementId) :该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。如今,已经出现了如prototype、Mootools等多个JavaScr...

js操作节点的DOM方法

一、创建节点 createElement createTextNode 二、添加、删除、替换、克隆元素 1、appendChild 2、insertBefore 3、如果appendChild、insertBefore追加的是已经存在的子元素,实际上就会将子元素位置移动 4、删除节点remove removeChi...

如何在javascript中获取dom对象

js中有四种获取dom的方法:根据ID获取对象:document.getElementById(ID);根据class获取对象数组:document.getElementsByClassName("box");根据tag获取对象数组:document.getElementsByTagName("p");根据name获取对象数组:document...

获取页面html元素的方法

获取页面HTML元素的方法主要有两种,分别是通过使用JavaScript中的DOM操作方法和CSS选择器方法。1. JavaScript中的DOM操作方法 JavaScript提供了丰富的文档对象模型(DOM)操作方法,使我们能够轻松获取和操作HTML元素。例如,get...

怎样进行JS内DOM节点使用

!一、DOM树的节点1、 DOM节点分为三大类: 元素节点(标签节点)、属性节点和文本节点。属性节点和文本节点都属于元素节点的子节点。 因此操作时,需先选中元素节点,再修改属性和文本。【查看元素节点】1、 使用getElement...

如何根据HTML标签的id属性和标签名称来获取节点

1、首先,打开html编辑器,新建html文件,例如:index.html。2、在index.html中的&lt;script&gt;标签,输入js代码:var a = '通过id获取:' + $('#test').html();var b = '通过标签名获取:' + $('div').html();...

JS获取网页中HTML元素的几种方法分析

常用以下几种方式:&lt;div id="mued" class="mued"&gt;&lt;/div&gt;&lt;script&gt;//通过DOM标签获取,会选择页面上所有的DIV标签var divObj = document.getElementsByTagNames("div");//通过ID获取,具有唯一性var divObjId = ...

怎么遍历html dom 节点 javascript

选择递归 (全能方法) var TM = { arr : [], getNodes : function(tagNames, models) { var m = models ? models : this.model; var c = null; var arr = this.arr; // 数组传递也是引用...

原生js操作DOM元素的一些使用

方法一:使用DOM.setAttribute("class","类名")方法二:DOM.classList.add("类名")方法一给DOM元素添加类名会覆盖原有的类名 方法二 可以给DOM元素添加一个类名后 还可以在继续给DOM元素添加新的类名 并且不会覆盖...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

猜你喜欢

Top