前端javascript的DOM对象操作技巧，全场景解析（一）-阿里云开发者社区

前端javascript的DOM对象操作技巧，全场景解析（一）

2024-04-29 446

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前端javascript的DOM对象操作技巧，全场景解析（一）

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯，先赞后看哦~🎈🎈

1.js的DOM介绍

JavaScript中，dom是一套操作文档内容的方法，可以完成查、增、删、改（先删后增）的操作。而且dom的开发效率很高，还可以用于服务器渲染、weex 开发等。本文向大家介绍JavaScript中的dom。

1、什么是dom？

dom，全称Document Object Model文档对象模型，是 W3C 的标准； [所有浏览器公共遵守的标准] 。

用于处理网页内容的方法和接口，简单的说就是一套操作文档内容的方法。

2、dom组成：

由HTML、CSS、事件（交互）组成。HTML、CSS完成查、增、删、改（先删后增）的操作。

3、dom缓存：

把查询到的东西存放到一个变量中，该变量占用的是浏览器的内存。

浏览器中所有被访问过的页面都会被存放到BOM的history中。

一句话总结：

dom操作有用原生js的dom操作，也可以用对js封装过的jquery等插件来更加方便的进行dom操作

1、dom是什么？

对于JavaScript，为了能够使JavaScript操作Html，JavaScript就有了一套自己的dom编程接口。

对于Html，dom使得html形成一棵dom树，类似于一颗家族树一样，一层接一层，子子孙孙。

2、Html的DOM树是什么？

HTML中的每个标签元素，属性，文本都能看做是一个DOM的节点，这些dom节点构成了一个树形结构

3、原生的dom操作指的是什么？

就是用原生的js进行的操作，相对的就是非原生操作，比如用jquery操作dom

DOM树

文档对应js中的document对象

查找html元素

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM document object model 文档顶级节点</title>
</head>
<body>
    <div id="box">
        <p class="p1" >张三</p>
        <p class="p2">李四</p>
        <p class="p3">赵刘</p>
        <p name="ceshi1"></p>
        <p name="ceshi1"></p>
    </div>

    <div>
        <input type="text" name="username" />
        <input type="password" name="pwd" />
        
        <p1>112233</p1>
        <box>55666</box>
    </div>

    <script>
        console.log(document)

查看当前html界面有哪些元素，就是当前文档的节点，document获取到整个文档

// ### 1 通过id获取div节点对象

var box = document.getElementById(“box”);

console.log(box);

// ### 2 通过类名获取节点对象 [返回的是数组]

var p2 = document.getElementsByClassName(“p2”);

console.log(p2 , typeof(p2));

打印类名为p2的节点对象

    // 获取李四节点对象
    lisi = p2[0];
    console.log(lisi)

// 获取王五节点对象
    wangwu = p2[1];
    console.log(wangwu);

// ### 3.通过标签获取节点对象 [返回的是数组]

var p = document.getElementsByTagName(“p”);

console.log§

console.log(p[1])

// ### 4.通过标签身上的name属性 [返回的是数组] 一般用在input表单中

var ceshi1 = document.getElementsByName(“username”)[0];

console.log(ceshi1);

通过name获取的是数组

通过数组下标取值，才能获取元素

// ### 通过css选择器获取对应的元素节点

// ### 5.querySelector ,只获取找到的第一个;

里面可以跟css的各种选择器，可以是id，类，标签等等

以css选择器的形式查找相关元素，通过p1类来查找，只能查找第一个

var p1 = document.querySelector(“.p1”);

console.log(p1)

通过id为box来查找
   var box = document.querySelector("#box");
    console.log(box)

// 通过标签来查找，input表单有两个,但是只获取第一个;

var input = document.querySelector(“input”);

console.log(input);

// ### 6.querySelectorAll 获取所有找到的元素节点,返回数组

通过 CSS 选择器查找 HTML 元素

如果您需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用 querySelectorAll() 方法。

var all = document.querySelectorAll(“input[name=username]”)[0];

console.log(all);

获取所有input输入框，返回数组

获取其中一个

具体查找到一个

综上，使用querySelectorAll() 比较好，能查找的范围广，通过css选择器都可以查找，这样方便我们控制节点

 </script>
    
</body>
</html>

2.节点元素层级关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点元素层级关系</title>
</head>
<body>
    <div id="box">
        <p>
            <input type="text" name="username" />
            <input type="password" name="pwd" />
        </p>
        <p class="p1" >张三</p>
        <p class="p2">李四</p>
        <p class="p3">赵刘</p>
        <p name="ceshi1"></p>
        <p name="ceshi1"></p>
    </div>
    <script>

      
  // ### 获取对应的节点元素
        console.log(document)
        console.log(document.documentElement); // html
        console.log(document.documentElement.children) 
      children获取html下面的子元素，head和body

// 找html里面所有的子节点children
    var html_children = document.documentElement.children
    console.log(html_children) // head , body

根据下标取body
    body = html_children[1];
    console.log(body); // head , body

根据body，取其子元素
    var div = body.children[0]
    console.log(div);

div的第一个子元素是p标签，里面两个input子标签
   var p0 = div.children[0]
    console.log(p0)

var input = p0.children
    console.log(input)

var input1 = input[0]
    console.log(input1)

// 获取下一个节点对象nextSibling ，兄弟节点，第一个nextSibling 是两个input之间的换行，第二个nextSibling是第二个input

nextSibling 下一个不区分元素还是文本，下一个是什么就查到什么

第二个nextSibling是第二个input

console.log(input1.nextSibling.nextSibling);

// 获取下一个元素节点对象 nextElementSibling。这个查找的不包含空格文本等，查找的是元素节点

var input2 = input1.nextElementSibling;

console.log(input2);

    // 获取上一个节点对象 previousSibling。查找上一个节点对象，不管是元素节点还是文本，空格等
    console.log(input2.previousSibling)

// 获取上一个元素节点对象 previousElementSibling。只查找元素节点

console.log(input2.previousElementSibling)

// 获取input2父节点元素对象;
    console.log(input2.parentElement)

父元素是p标签

    </script>
    
</body>
</html>

3.通过js修改，清空节点内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 修改/清空内容</title>
</head>
<body>
    <button onclick="func1()">修改内容</button>
    <button onclick="func2()">清空内容</button>
    <div id="box" style="border:solid 1px red;">
        <p>我是最帅的最有钱的<a href="#">最有味的</a>男人</p>
    </div>
    <script>
        // innerHTML 获取标签里面所有内容 [标签 + 文本]
        // innerText 获取标签里面所有字符串[文本]
        var p = document.querySelector("#box p");
        // console.log把数据展现在控制台
        console.log(p);

// document.write 把数据以字符串的形式展现在浏览器

document.write§;

这是把p对象写入到html,写入的是字符串

    // 点击button1触发如下任务 , 修改
    function func1(){
        var content = p.innerHTML;
        var content = p.innerText;
        console.log(content);
        // p.innerHTML = `我被修改了 <a href=''>点我中大奖</a>...1`;
        p.innerText = `我被修改了 <a href=''>点我中大奖</a>...2`;
    }

    // 点击button2触发如下任务 , 清空
    function func2(){
        p.innerHTML = '';
    }