JavaScript获取DOM元素，变量节点元素 - JavaScript学习

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > JavaScript获取DOM元素，变量节点元素

博主信息

博文 29

粉丝 1

访问量 31240

专题推荐

更多>

获取DOM元素

<ul id="list">
    <li class="item">item1</li>
    <li class="item" name="two">item2</li>
    <li class="item active">item3</li>
    <li class="item">item4</li>
    <li class="item">item5</li>
</ul>
<script>
    // const定义的变量不可以修改，而且必须初始化。
    const cl = console.log.bind(console);
    //1,标签
    // li 标签 获取多个标签使用 get Elements By Tag Name 按标记名获取元素
    var lis = document.getElementsByTagName('li');
    cl(lis);
    cl("以上获取所有li");
    // HTMLCollection:类数组
    // 可以通过方法获取需要的值：lis[键]或lis.item(键)
    cl(lis.item(2));
    cl("以上获取其中li");
    //Ul标签获取
    var ul  = document.getElementsByTagName('ul');
    cl(ul);
    cl("以上获取所有ul");
    //2,ID（id是唯一的，不能用复数）
    //获取单个标签使用getElementById
    var ul = document.getElementById("list");
    // ul.style.cssText="color:red;list-type:none;border:1px solid;";
    cl(ul);
    cl("以上获取ID为**的UL");
    //3,class
    //获取函数：getElementByClassName
    var lis = document.getElementsByClassName("item");
    cl(lis);
    cl("以上通过class获取到li");
    //获取某个li使用上方法
    // cl(lis.item(3));
    var lis = document.getElementsByClassName("item active");
    // document.querySelector(".item").style.color="red";
    cl(lis.item(2));
    cl("获取active");
    //4,name
    var two = document.getElementsByName('two');
    cl(two);
    cl(two[0]);
    //5,css选择器
    cl(document.querySelector("#list"));
    var item = document.querySelectorAll(".item");
    cl(item);
    cl("获取css选择器");
    //6,获取
    var lis = document.querySelectorAll("#ul > li:nth-of-type(-n+3)");
    lis.forEach(function(item){
       item.style.color="yellow";
    });
    cl("获取某个或多个");
</script>

遍历元素节点

<script>
    var cl = console.log.bind(console);
    ul = document.querySelector('ul');
    //获取所有(childNodes)子节点
    cl(ul.childNodes);
    //js 常用6个节点。
    // 1，元素
    // 2，属性
    // 3，文本
    // 6，注释
    // 9，文档
    // 11，文档片段
    //nodeType（节点类型）nodeValue（节点值）nodeName（节点名称）
    cl((ul.childNodes[0].nodeType) + "----节点0位置的类型和值----" + (ul.childNodes[0].nodeValue));
    cl((ul.childNodes[1].nodeType) + "----节点1位置的类型和值----" + (ul.childNodes[1].nodeValue));
    cl((ul.childNodes[3].nodeType) + "----节点3位置的类型和名称----" + (ul.childNodes[3].nodeName));
    // 获取最后一个节点
    cl(ul.childNodes[ul.childNodes.length-1]);
    cl("----------遍历li---------");
    var ele = [];
    ul.childNodes.forEach(function(item){
        // push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度
        //意思就是在this->ele[]数组里面添加获取到的li元素
        if(item.nodeType === 1)  this.push(item);
    },ele);
    cl(ele);
    //获取第一个子（firstChild）或最后一个子（lastChild）
    cl(ul.firstChild);
    cl(ul.lastChild);
    //获取前一个兄弟(previousSibling)或后一个兄弟（nextSibling）
    cl((ul.lastChild.previousSibling) + "---前后兄弟子节点----" + (ul.firstChild.nextSibling));//节点拼接显示的是类型元素
    cl(ul.firstChild.nextSibling);
    cl(ul.lastChild.previousSibling);
    </script>

遍历元素节点

<script>
    var cl=console.log.bind(console);
    var ul = document.querySelector("ul");
    //children和childNodes区别
    //1，childNodes获取所有节点
    //2，children获取html类型节点
    //获取元素数量方法有二
    cl(ul.children.length);
    //子元素计数（childElementCount）
    cl(ul.childElementCount);
    //获取第一个元素子元素（firstElementChild）获取最后一个元素子元素（lastElementChild）获取某个子元素children[索引]
    cl(ul.firstElementChild);
    //获取前一个/后一个请使用索引(nextElementSibling)/（previousElementSibling）
    cl(ul.children[2].previousElementSibling);
    // HTMLCollention元素节点 没有foEach方法
    cl("---for遍历li元素---")
    for(var i = 0; i < ul.childElementCount;i++){
        cl(ul.children.item(i))
    }
</script>

dataset用户自定义数据

<div id="user" data-id="100" data-user-name="admin" data-src="http://baidu.com"></div>
    <script>
        var cl = console.log.bind(console);
        var user = document.querySelector("#user")
        //dataset是用来专门访问data-的属性。
        cl(user.dataset.id)
        //js规则：多单词连接线去掉，将首字母大写
        cl(user.dataset.userName)
        // 更改数据
        user.dataset.userName = "super";
        cl(user.dataset.userName)
    </script>

body背景颜色切换小功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>classlist对象</title>
    <style>
        body{
            background:blue;
        }
        .p1{
            color:pink;
            font-size:28px;
        }
        .p2{
            background:#CCC;
        }
        .p3{
            font-weight:bold;
            text-align:center;
        }
    </style>
</head>
<body>
<p>首页背景颜色切换</p>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <script>
        var cl = console.log.bind(console);
        var p = document.querySelector("p");
        //获取class属性。在js中是保留字，所以用className
        // cl(p)
        //添加一个class类属性样式
        p.classList.add("p2")
        //删除
        // p.classList.remove("p2");
        //自动切换
        p.classList.toggle("p2");
        p.classList.toggle("p3")
        //替换(需要替换的属性，替换的属性）
        p.classList.replace("p3", "p2");
        var div = document.querySelector("div");
        document.querySelector("div").style.cssText = "border:1px solid;width:120px;height:35px;"
        // document.querySelectorAll("span").style.cssText = "border:1px solid ;padding:5px;width:30px;height:30px;"
        div.children[0].style.cssText = "border:1px solid ;width:30px;height:30px;display:flex;float:left;background:red"
        div.children[1].style.cssText = "border:1px solid ;width:30px;height:30px;display:flex;float:left;margin:0 5px 0 5px;background:blue"
        div.children[2].style.cssText = "border:1px solid ;width:30px;height:30px;display:flex;floay:left;background:yellow"
        //添加点击事件并改变属性样式
        div.children[0].addEventListener("click",bgspan1,false)
        function bgspan1(ev){
            document.body.style.background = "red";
        }
        div.children[1].addEventListener("click",bgspan2,false)
        function bgspan2(ev){
            document.body.style.background="blue"
        }
        div.children[2].addEventListener("click",bgspan3,false)
        function bgspan3(ev){
            document.body.style.background = "yellow"
        }
    </script>
</body>
</html>