JS-dom常用的八种获取方法，属性及操作

最新推荐文章于 2023-09-16 21:46:01 发布

进击的小野马

最新推荐文章于 2023-09-16 21:46:01 发布

阅读量799

点赞数 1

分类专栏： JS 文章标签： javascript html html5

本文链接：https://blog.csdn.net/mab_1994/article/details/110287279

版权

本文介绍了JavaScript中DOM元素操作的关键知识点，包括不支持隐式迭代的特性，详细讲解了DOM的属性和方法，以及如何进行子父节点的操作。通过这些内容，读者可以更好地理解和掌握JavaScript对DOM的操作技巧。

摘要由CSDN通过智能技术生成

js里面dom元素操作不支持隐式迭代（js操作dom不能直接操作一堆，只能单个操作）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button class="btn" id="butinfo" name="an">按钮</button>
<button class="btn" id="butlist" name="an">按钮</button>
<div></div>
<script>
    /*
     * 2个固定获取（dom）
     * querySelector   获取之后返回的对象为单个对象
     * querySelectorAll  返回的是多个对象   集合类型NodeList
     *    返回的是一个集合  这个集合至少有一个子集
     *
     *静态获取  指的是获取页面现有的元素，通过代码添加元素 获取不到
     * */
    var jt=document.querySelector(".btn");//方法的参数为元素选择器
    var jtall=document.querySelectorAll(".btn");
    console.log(jt);
    console.log(jtall);
    console.log(jtall[0]);
    console.log(jtall[1]);

    /*
     * 2个特殊获取
     * 指的是特定元素获取   body  html
     * 这两个返回的是单个对象
     * */
    var html =document.documentElement;
    console.log(html);
    var body =document.body;
    console.log(body);

    /*
     *  4个动态获取方案
     *  方法参数为字符串
     *  根据id  class  tagName  Name
     * */
    var id = document.getElementById("butinfo");
    console.log(id);
    /*id 属于特殊获取方案，不用获取可以直接使用*/
    console.log(butinfo);
    
    var Class = document.getElementsByClassName("but");
    console.log(Class);
    console.log(Class[0]);
    console.log(Class[

最低0.47元/天解锁文章

进击的小野马

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JS-dom常用的八种获取方法，属性及操作

js里面dom元素操作不支持隐式迭代（js操作dom不能直接操作一堆，只能单个操作）<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><button class="btn" id="butinfo" name="an">按钮</button&
复制链接

扫一扫

专栏目录