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

简介: 前端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

相关文章
|
5天前
|
XML Web App开发 JavaScript
XML DOM 解析器
XML DOM解析器是内置在多数浏览器中的工具,用于将XML转换为JavaScript可操作的对象。它允许遍历、访问和修改XML结构。浏览器通过XMLHttpRequest加载XML文档到DOM,如以下JS示例所示: ```markdown - 创建XMLHttpRequest对象 - 打开GET请求到&quot;books.xml&quot; - 发送请求 - 响应被转换为`responseXML`,成为DOM对象 ``` 这段代码展示了如何在不同浏览器间兼容地加载XML文档。
|
4天前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
16 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
1天前
|
存储 JavaScript 前端开发
第六篇-Javascript对象
第六篇-Javascript对象
9 2
|
6天前
|
存储 缓存 JavaScript
JavaScript内存泄漏通常发生在对象不再需要时
【6月更文挑战第16天】JavaScript内存泄漏常由闭包引起,当不再需要的对象仍被闭包引用时,垃圾回收机制无法清理。例如,创建返回大型对象引用的闭包函数会导致内存泄漏。避免泄漏需及时解除引用,清除事件监听器,利用WeakMap或WeakSet,以及定期清理缓存。使用性能分析工具监控内存使用也有助于检测和解决问题。
21 8
|
3天前
|
JavaScript 前端开发
JavaScript进阶-模板字符串与增强的对象字面量
【6月更文挑战第19天】ES6的模板字符串和增强对象字面量提高了JavaScript的易读性和效率。模板字符串(` `)支持变量嵌入和多行,简化了字符串处理;增强对象字面量允许简写属性与方法,以及动态属性名。注意模板字符串的闭合和性能影响,以及对象字面量的简写语法和计算属性名的恰当使用。通过实例展示了这两项特性的应用,助力编写更优雅的代码。
|
4天前
|
设计模式 存储 JavaScript
【JavaScript】JavaScript对象设计哲学:八种模式塑造高效代码
【JavaScript】JavaScript对象设计哲学:八种模式塑造高效代码
15 5
|
3天前
|
JavaScript
js 判断对象内所有值为空
js 判断对象内所有值为空
|
5天前
|
XML Web App开发 JavaScript
XML DOM 解析器
**XML DOM解析器摘要:** XML解析器在浏览器中常内置,用于将XML转换为JavaScript对象,便于通过DOM API操作。加载XML文档如`books.xml`,使用XMLHttpRequest或ActiveXObject创建请求,打开连接,发送请求,然后将响应转换为DOM对象,如`xmlDoc=xhttp.responseXML`。
|
18小时前
|
JavaScript 前端开发
JS如何判断一个对象是否为数组?
JS如何判断一个对象是否为数组?
7 0
|
18小时前
|
JavaScript 前端开发
JS遍历数组和对象的常用方法有哪些?
JS遍历数组和对象的常用方法有哪些?
6 0

推荐镜像

更多