前端javascript的DOM对象操作技巧,全场景解析(一)

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: 前端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 = '';
    }


innerHTML获取标签里的所有内容,包含标签和文本,如下,p标签里面包含a标签,点击修改内容,写入到浏览器和控制台的内容包含文本和标签

innerText获取标签里面的所有文本字符串,不包含标签,如下,点击修改内容,打印到浏览器和控制台的只有字符串

修改内容用innerHTML,里面写标签,可以被识别

如果用innerText,里面写标签,会被当做文本写入浏览器

清空内容,将标签里面的内容设为空即可,点击清空按钮即可清空

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


前端javascript的DOM对象操作技巧,全场景解析(二):https://developer.aliyun.com/article/1497188

相关文章
|
4月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
3月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
3月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
4月前
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
411 62
|
3月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
41 1
JavaScript中对象的数据拷贝
|
3月前
|
存储 前端开发 JavaScript
前端中对象的深度应用与最佳实践
前端对象应用涉及在网页开发中使用JavaScript等技术创建和操作对象,以实现动态交互效果。通过定义属性和方法,对象可以封装数据和功能,提升代码的组织性和复用性,是现代Web开发的核心技术之一。
|
3月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
4月前
|
JSON 前端开发 数据格式
前端的全栈之路Meteor篇(五):自定义对象序列化的EJSON介绍 - 跨设备的对象传输
EJSON是Meteor框架中扩展了标准JSON的库,支持更多数据类型如`Date`、`Binary`等。它提供了序列化和反序列化功能,使客户端和服务器之间的复杂数据传输更加便捷高效。EJSON还支持自定义对象的定义和传输,通过`EJSON.addType`注册自定义类型,确保数据在两端无缝传递。
|
4月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
4月前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    49
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    57
  • 推荐镜像

    更多