JavaScript-DOM（获取元素节点、自定义byClassName方法）

最新推荐文章于 2022-08-09 10:22:52 发布
最新推荐文章于 2022-08-09 10:22:52 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： # JavaScript 文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46048542/article/details/122798151
版权

DOM: document object model(文档对象模型)

     节点类型：
        元素节点 <div></div>
        属性节点 id = 'div1'
        文本节点 div文本

        元素节点的获取
        document.getElementById(id)
        功能：通过id获取符合条件的元素（id必须是唯一的）
        返回值：就是符合条件的一个节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            //写在这里的代码，是整个页面加载完成以后执行
            var oDiv = document.getElementById("div1");
            /*
            获取行间属性的值
            */
           alert(oDiv.id);
           alert(oDiv.title);

           //访问class  通过className访问
           alert(oDiv.className);

           //设置行间属性的值
           oDiv.id = "div2";
           oDiv.title = 'world';
           oDiv.className = 'box4';

           /*
           只能访问标签行间的css样式
           */
          alert(oDiv.style.width);
          alert(oDiv.style.height);

          /*
          [注] 如果CSS样式带一，将一去掉，从第二个单词开始首字母大写
          */
         oDiv.style.backgroundColor = 'blue';
         alert(oDiv.style.backgroundColor);
        }
    </script>
</head>
<body>
    <div id = 'div1' title="hello" class="box" style="width: 300px;height: 300px; background-color: red;">div文本</div>
</body>
</html>

获取元素节点

     document.getElementById(id);

        node.getElementsByTagName(标签名);
        功能：通过标签名获取符合条件的元素节点
        返回值：伪数组/类数组

        node.getElementsByClassName(class名字)
        功能：通过class名字获取符合条件的元素节点。

        document.getElementsByName(name属性的值)
        功能：通过name属性的值获取符合条件的元素节点。

（1）

    <script>
        window.onload = function(){
            var aLis = document.getElementsByTagName("li");
            //使用起来和数组类似，一般情况，把这种叫做伪数组/类数组（自己起）
            alert(aLis);
            alert(aLis.length);
        }
    </script>

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

请添加图片描述
请添加图片描述
（2） node.getElementsByTagName(标签名);

    <script>
        window.onload = function(){
            var a = document.getElementById("ol1");
            var aLis = a.getElementsByTagName("li");
            //获取ol下的li节点
            alert(aLis.length);
            for(var i = 0; i < aLis.length; i++){
              aLis[i].style.backgroundColor = "red";
            }
        }
        }
    </script>

<body>
    <ul>
        <li>111</li>
        <li class="box">111</li>
        <li>111</li>
        <li>111</li>
        <li class="box">111</li>
        <li  name = 'hello'>111</li>
        <div class="box" name = 'hello'></div>
    </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>
        <li>222</li>
    </ol>
</body>

请添加图片描述
请添加图片描述
（3） node.getElementsByClassName(class名字)

    <script>
        window.onload = function(){
            var a = document.getElementById("ul1");
            var nodes = a.getElementsByClassName("box");
            alert(nodes.length);
            for(var i = 0; i < nodes.length; i++){
                nodes[i].style.backgroundColor = "red";
            }
        }
    </script>

<body>
    <ul id="ul1">
        <li>111</li>
        <li class="box">111</li>
        <li>111</li>
        <li>111</li>
        <li class="box">111</li>
        <li  name = 'hello'>111</li>
        <div class="box" name = 'hello'></div>
    </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>
        <li>222</li>
    </ol>
</body>

请添加图片描述
请添加图片描述
（4） document.getElementsByName(name属性的值)

    <script>
        window.onload = function(){
            var nodes = document.getElementsByName("hello");
            alert(nodes.length);
            for(var i = 0; i < nodes.length; i++){
                nodes[i].style.backgroundColor = "red";
            }
        }
    </script>

<body>
    <ul id="ul1">
        <li>111</li>
        <li class="box">111</li>
        <li>111</li>
        <li>111</li>
        <li class="box">111</li>
        <li  name = 'hello'>111</li>
        <div class="box" name = 'hello'></div>
    </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>
        <li>222</li>
    </ol>
</body>

请添加图片描述


        document.querySelector()
        返回值：一个元素节点，找到符合条件的第一个元素节点

        document.querySelectorAll()
        返回值：返回值，是一个伪数组
        参数：字符串  CSS选择器格式字符串

    <script>
        window.onload = function(){
            //var nodes = document.querySelectorAll('#ul1')
            var nodes = document.querySelectorAll('ol li')
           // var nodes = document.querySelectorAll('ol .box')
           // var nodes = document.querySelectorAll('ul [name=hello');
            alert(nodes.length);
            for(var i = 0; i < nodes.length; i++){
                nodes[i].style.backgroundColor = "red";
            }
        }
    </script>

<body>
    <ul id="ul1">
        <li>111</li>
        <li class="box">111</li>
        <li>111</li>
        <li>111</li>
        <li class="box">111</li>
        <li  name = 'hello'>111</li>
        <div class="box" name = 'hello'></div>
    </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>
        <li>222</li>
    </ol>
</body>

请添加图片描述
自定义byClassName方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function elementsByClassName(node,classStr){
            //获取node这个节点下所有的子节点
            var nodes = node.getElementsByTagName("*");
            var arr = [];//存放符合条件的节点
            for(var i = 0; i < nodes.length; i++){
                if(nodes[i].className == classStr){
                    arr.push(nodes[i]);
                }
            }
            return arr;
        }

        window.onload = function(){
            var a = document.getElementById("ol1");
            var nodes = elementsByClassName(a,"box");
            alert(nodes.length);
            for(var i = 0; i < nodes.length; i++){
                nodes[i].style.backgroundColor = 'red';
            }
        }
    </script>
</head>
<body>
    <ul id="ul1">
        <li>111</li>
        <li class="box">111</li>
        <li>111</li>
        <li>111</li>
        <li class="box">111</li>
        <li  name = 'hello'>111</li>
        <div class="box" name = 'hello'></div>
    </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>
        <li>222</li>
    </ol>
</body>
</html>

请添加图片描述
请添加图片描述

九阈
关注
专栏目录
js 获取class的元素的方法 以及创建方法getElementsByClassName
10-27
js 获取class的元素的方法 以及创建方法getElementsByClassName，需要的朋友可以参考一下
JS getElementsByClassName
weixin_30716725的博客
02-24 79
输入：className：类名；root：父节点，在此节点下查找，string/node； tagName：找某一类标签 function getElementsByClassName(className,root,tagName){ if(root){ root=typeof root=="string"?document.getElementById(root):ro...
Javascript:getElementsByClassName
weixin_34128411的博客
06-28 138
背景： 由于原生的getElementsByClassName不支持在指定标签中查找指定元素为指定class的情况，所以，这里舍弃了原生的方法调用 方法一: function getElementByClassName(parent,tagName,className) { /* *参数说明： *@parent:父元素，默认为document *@tagName...
JavaScript（二十七）自定义ByClassName
weixin_44730244的博客
05-27 390
功能：可以解决document.getElementByClassName()不兼容问题 function elementsByClassName(node,classStr){ //1.获取node这个节点所有的子节点 var nodes=node.getElementsByTagName('*'); var arr=[]; //存放符合条件的节点 for(var i=0;i<nodes.length;i++){ if(nodes[i].className
深入理解javascript选择器API系列第二篇——getElementsByClassName
weixin_34010949的博客
08-22 207
前面的话 　　既然有getElementById()和getElementsByTagName()方法，为什么没有getElementsByClassName()呢？id属性、标签名、class属性并没有什么优劣之分啊。终于，HTML5新增了getElementsByClassName()方法，由于在CSS布局中类名的广泛使用，该方法正好切中痛点，使得通过类名选取元素不再困难，成为最受欢迎的一个...
JavaScript 动态网页实例 - DOM中的节点操作.rar
最新发布
05-08
文档对象模型(DOM)是一个基础性概念，主要涉及网页页面元素的层次关系。很好地理解文档对象模型(DOM)的概念，对于编写出高效、实用的JavaScript程序是非常有帮助的。DOM将HTML文档理解为一棵完整的代码树，每个HTML...
javascript获取dom的下一个节点方法
10-25
本文档详细解释了如何使用JavaScript获取DOM元素的下一个节点，并结合加减按钮实现数字累加的实例，来展示这一技术的应用。 首先，涉及到几个重要的DOM操作方法：`nextElementSibling`和`previousElementSibling`。...
JavaScript HTML DOM元素 节点操作汇总
10-16
JavaScript HTML DOM元素节点操作是网页动态交互的核心技术之一，它允许我们通过JavaScript代码来操作页面上的HTML元素。本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。 首先，理解...
JavaScript获取DOM元素的11种方法总结
10-24
本文总结了11种常见的JavaScript获取DOM元素的方法，并将它们分为四大类。这些方法可以帮助开发者高效准确地选取DOM元素。 首先，我们可以根据顶层document节点来获取元素。这类方法通常用于直接根据元素的某些属性...
Chrome-Custom-DOM:Chrome 扩展允许使用谓词来匹配 DOM 节点并将它们传递给自定义函数
06-30
Chrome-Custom-DOM 是一个基于 JavaScript 的 Chrome 浏览器扩展，它提供了一种创新的方式来操作和处理网页上的 DOM（文档对象模型）节点。通过使用谓词（predicates）匹配，用户可以定制化地选择他们感兴趣的特定 ...
【JS提升】封装byClassName、断点测试、bug调试
小管打天下的博客
07-26 299
一、封装byClassName （1）封装byClassName <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content=
js中使用getElementsByClassName获取class对象
实际工作与学习当中的随记
08-09 6678
前端开发一般不需要过多考虑性能问题，但你想在性能上追求极致的话，一定要知道jQuery性能很差。所以js之前没做getElementByClassName也是出于严谨的考虑，现在document.getElementsByClassName返回数组应该也是出于严谨的考虑。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。......
js getElementsByClassName
xu_1984的博客
07-28 197
getElementsByClassName: function getElementsByClassName(searchClass, domNode, tagName) { alert(searchClass); if (domNode == null) domNode = document; if (tagName == null) tagName = '*'...
js根据className得到数组
oldboy
01-07 646
function getElementsByClassName (className) { var all = document.all ? document.all : document.getElementsByTagName('*'); var elements = new Array(); alert(all.length); for (...
javascript getElementsByClassName函数
mituan1234567的专栏
02-19 824
http://www.cnblogs.com/koking/archive/2010/07/11/1775297.html 今天在网上看到的一个根据ClassName获取Elements的脚本，在此记录一下，以便日后使用。 复制代码 代码如下: var getElementsByClassName = function(searchClass, node, tag) { 
JavaScript选择器：getElementsByClassName
cungui5726的博客
08-23 1068
Just as document.getElementById selects an element with a particular id value, getElementsByClassName gathers elements on a page that share a defined class value. As the plural name of the method sugg...
JS === 关于getElementsByClassName()
weixin_30530939的博客
07-14 355
//练习：封装一个函数，兼容所有浏览器，通过类名取得标签。 //xxx.getElementsByClassName() IE8及以前的浏览器不兼容，定义一个函数，来实现这个功能 第一种 == 类名里面 只有一个 结构： 　　<div class="red"></div> 　　<div></div> 　　<div class="r...
js getElementByClass
speedupnow的专栏
03-24 5899
1.js getElementByClassfunction getElementsByClass(node, searchClass, tag) {        var classElements = new Array();        var els = node.getElementsByTagName(tag);        var elsLen = els.length;        var pattern = new RegExp("//b" + searchClass + "//b"
document.getElementByClass
SUB 的专栏
01-06 7644
document.getElementByClass = function (classname) {   var elements = [];   var alltags = document.all ? document.all : document.getElementsByTagName("*")   for (var i=0; i      var classNames = alltag
详解JavaScript DOM元素获取与添加实例与区别
在JavaScript中，有多种方法用于获取和添加DOM元素。 1. `document.getElementById(id)`：此方法通过元素的唯一ID来定位一个DOM元素。ID应该是全局唯一的，返回的是匹配的第一个元素。 2. `document....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值