7.DOM之获取元素节点

最新推荐文章于 2022-07-06 09:29:49 发布

无忧乡

最新推荐文章于 2022-07-06 09:29:49 发布

阅读量122

点赞数

分类专栏： # Javascript学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_37714766/article/details/105179965

版权

Javascript学习笔记专栏收录该内容

13 篇文章 2 订阅

订阅专栏

DOM获取元素节点主要通过三种方式(想象树形结构)：

通过标签id获取
通过标签class获取
通过标签名获取

下面准备演示示例：

<body>
    <ul>
        <li>111</li>
        <li class = 'box'>111</li>
        <li class = 'hello'>111</li>
        <li class = 'box'>111</li>
        <li>111</li>
    </ul>
    <input type = "text" name = 'hello'/>
    <span name = 'hello'></span>
    <ol id = 'ol1'>
        <li>222</li>
        <li class = 'box'>222</li>
        <li class = 'box'>222</li>
    </ol>
</body>

一、通过id获取(写在上节里)

document.getElementById(id) （没有node节点方法，因为id唯一）

功能：通过id名获取符合条件的元素节点

二、通过标签名获取

document.getElementByTagName(标签名) //获取整个HTML页面中的标签

node.getElementsByTagName(标签名) //获取node节点子树上的标签

返回值：一个集合(用法和集合差不多)

功能：通过标签名获取符合条件的元素节点

//case1 ：获取页面中所有的<li>标签
window.onload = function(){
    var aLis = document.getElementsByTagName("li");
    alert(aLis);
    
    //collection使用起来和数组一样
    alert(aLis.length);	//8
}

输出结果：object HTML collection(HTML对象集合)，使用起来和数组一样

//case2 : 获取<ol>标签内的<li>标签
window.onload = function(){
    var ol = document.getElementById("ol1");
    var aLis = ol.getElementsByTagName("li");
    
    //获取ol下的li节点
    alert(aLis.length);
}

三、通过ClassName获取节点

document.getElementsByClassName(classname)

node.getElementsByClassName(classname)

功能：通过Class名获取符合条件的元素节点

//通过classname获取当前页面所有的classname为box的标签
window.onload = function(){
    var nodes = document.getElementsByClassName("box");
    
    //循环遍历获取到的，classname为box的集合
    for(var i = 0;i < nodes.length; i++){
        //将集合中的标签的背景色设置为red
        nodes[i].style.backgroundColor = "red";
 	}
}

同上面一样，也可以获取部分子树标签

//获取id为ol1下的classname为box的标签
window.onload = function(){
	var ol = document.getElementById("ol1");
    var nodes = ol.getElementsByClassName("box");
    
    for(var i = 0;i < nodes.length; i++){
        //将集合中的标签的背景色设置为red
        nodes[i].style.backgroundColor = "red";
 	}
}

无忧乡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7.DOM之获取元素节点

DOM获取元素节点主要通过三种方式(想象树形结构)：通过标签id获取通过标签class获取通过标签名获取下面准备演示示例：<body> <ul> <li>111</li> <li class = 'box'>111</li> <li class = '...
复制链接

扫一扫