JavaScript---Dom

已于 2022-09-04 16:25:16 修改
阅读量146 收藏
点赞数
文章标签： html 前端 javascript
于 2022-08-29 18:05:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48860371/article/details/126579046
版权

dom 节点对象

Dom节点认识

从dom角度，整个html文档就是一个对象，每个html标签、标签属性、内容、注释…都被看成dom节点
DOM 就是我们 html 结构中一个一个的节点构成的

  • Dom 节点分类

     		 - 节点类型  
 		 			1.整个文档是一个文档节点
 		 			2.每个 HTML 元素是元素节点
 		 			3.HTML 元素内的文本是文本节点
 		 			4.每个 HTML 属性是属性节点   
 					5.注释是注释节点
 		 - 节点对象分类：
 				元素节点     getElementBy  获取
 				文本节点 		innerText 获取
 				属性节点		getAttribute  获取
 				 doucment文档节点  注释节点

**html文档结构：**树型结构
在这里插入图片描述

**节点关系：**父子关系 兄弟关系

获取Dom节点

  1. getElement系列
    getElementById()
  2. querySelector系列
    ele.innerHTML
  3. 层次结构

在这里插入图片描述
children ：获取某一节点下所有的子一级 元素节点
在这里插入图片描述

层次关系获取元素节点

在这里插入图片描述
firstElementChild:
在这里插入图片描述

lastElementChild
在这里插入图片描述
获取元素节点的所有属性节点: attributes

在这里插入图片描述

层次图

在这里插入图片描述

非 常规节点获取

  • 获取html根节点 document.documentElement
  • 获取body节点 document.body
  • 获取head document.head

案例——购物车

//练习 1.通过层次结构获取dom节点
        //2. 熟悉循环遍历数组，绑定数组项点击事件
        //3. 掌握this关键字用法
        //4. 熟悉字符串截取类型转换取小数位置等常规操作

节点属性

用于判断节点的类型
节点类型 节点名称 节点内容
在这里插入图片描述在这里插入图片描述

操作DOM节点

对节点进行增删改查。

  1. 创建节点
    在这里插入图片描述
    createAttribute: 创建属性节点 setAttruibuteNode: 给元素节点设置属性节点
    在这里插入图片描述
    在这里插入图片描述

  2. 加入节点
    1、appendChild：是向一个元素节点的末尾追加一个节点
    在这里插入图片描述
    2、insertBefore：向某一个节点前插入一个节点
    在这里插入图片描述

  3. 删除节点
    removeChild：移除某一节点下的某一个节点
    remove: 移除当前节点
    语法：oDiv.remove() 移除oDiv节点
    在这里插入图片描述

  4. 替换节点
    replaceChild：将页面中的某一个节点替换掉
    在这里插入图片描述

  5. 复制节点
    语法： 节点.cloneNode(true|false)
    true: 复制节点包含节点下所有子节点
    false: 复制当前节点 默认方式
    在这里插入图片描述

获取元素的非行间样式

在这里插入图片描述
了解内容：
getComputedStyle（非IE使用）
在这里插入图片描述
currentStyle（IE使用）
在这里插入图片描述

获取元素的偏移量

页面与窗口的距离 我们有几个属性来获取，offsetLeft 和 offsetTop 和 offsetWidth 和 offsetHeight
offsetLeft 和 offsetTop：
在这里插入图片描述
offsetWidth 和 offsetHeight：
在这里插入图片描述

获取元素尺寸（宽、高）三种方式

在这里插入图片描述

练习：

在这里插入图片描述

全选框

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选框</title>
    <link rel="stylesheet" href="css/style.css">
</head>
 
<body>
    <div class="container">
        <table class="m-table">
            <caption>员工信息列表</caption>
            <tbody>
                <tr>
                    <th><input type="checkbox" class="checkbox-all" onclick="checkboxAll()">全选</th>
                    <th>员工编号</th>
                    <th>员工名称</th>
                    <th>员工部门</th>
                    <th colspan="2">操作</th>
                </tr>
                <tr>
                    <td> <input type="checkbox" class="checkbox-item" onclick="checkBoxSingle()"></td>
                    <td>1001</td>
                    <td>张三</td>
                    <td>技术部</td>
                    <td><a href="#">删除</a> </td>
                    <td><a href="#">编辑</a></td>
                </tr>
                <tr>
                    <td> <input type="checkbox"  class="checkbox-item" onclick="checkBoxSingle()"></td>
                    <td>1002</td>
                    <td>李四</td>
                    <td>技术部</td>
                    <td><a href="#">删除</a> </td>
                    <td><a href="#">编辑</a></td>
                </tr>
                <tr>
                    <td> <input type="checkbox"  class="checkbox-item" onclick="checkBoxSingle()"></td>
                    <td>1003</td>
                    <td>王二</td>
                    <td>技术部</td>
                    <td><a href="#">删除</a> </td>
                    <td><a href="#">编辑</a></td>
                </tr>
      
            </tbody>
        </table>
    </div>
    <script src="js/my.js"></script>
</body>
 
</html>



*{padding: 0; margin: 0;}
ul li{list-style: none;}
a{text-decoration: none; color: #706e6e;}
.container{width: 80%; margin: 5px auto;}
.m-table,th,td{border: 1px solid #cecece; border-collapse: collapse; }
.m-table caption{font-size: 18px; font-weight: bold;}
.m-table tr{line-height: 40px;}
.m-table tr:hover{background-color: #eeeaea;}
.m-table th{width: 200px; background-color: goldenrod; color: white; text-align: center; }
.m-table td{text-align: center; }
 


/**
 * 全选框
 * 
 */
function checkboxAll() {
    let checkBoxAllEle = document.querySelector('.checkbox-all');
    let checkBoxArrayEle = document.querySelectorAll('.checkbox-item');
 
    for (let index = 0; index < checkBoxArrayEle.length; index++) {
        const element = checkBoxArrayEle[index];
        if (checkBoxAllEle.checked == true) {
            element.checked = true;
        } else {
            element.checked = false;
        }
    }
 
}
/**
 *  分析:
 *   只有一个复选框未选中，全选框设为未选中；复选框全被选中全选框设为选中。
 */
function checkBoxSingle() { 
    let checkBoxAllEle = document.querySelector('.checkbox-all');
    let checkBoxArrayEle = document.querySelectorAll('.checkbox-item');
 
    let isCheck = true; // 全选框是否选中
    for (let index = 0; index < checkBoxArrayEle.length; index++) {
         const element = checkBoxArrayEle[index];
         if(element.checked == false){
            isCheck = false;
            break;
         }
    }
 
    if(isCheck){
        checkBoxAllEle.checked = true;
    }else{
        checkBoxAllEle.checked = false;
    }
 
 }

注意

document.getElementByClassName会更新旧的查询结果
document.querySelector则不会
比如: document.querySelectorAll(‘.li1’)
=> 获取所有类名为li1的元素，长度为3
=> 动态添加一个类名li1元素，长度还是为3

在这里插入图片描述

胡小葵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javascript-DOM编程艺术研究.docx
11-17
Javascript-DOM编程艺术研究.docx
Javascript-DOM
03-26
Javascript-DOM
JavaScript的DOM
rbx508780的博客
10-13 710
JavaScript的DOM ---DOM是Document Object Model的缩写，意思是『文档对象模型』——将HTML文档抽象成模型，再封装成对象方便用程序操作。
JavaScript之DOM
牛先森家的博客
06-13 838
DOM篇 DOM是什么？ 文档对象模型（Document Object Model ，DOM），是W3C组织推荐处理可扩展标记语言（HTML和XML）的标准编程接口。 1、HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。 2、XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。 HTML DOM 树形结构: ...
javaScript-dom
03-17
javaScript-dom
Javascript-dom-manipulation
05-01
Javascriptdom操纵
JavaScript-DOM实战案例
最新发布
09-18
DOM实战案例的css和img资源
Javascript之dom
weixin_51767056的博客
09-03 1038
文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。element . 属性例如：div . idelement . getAttribute('属性') //自己定义的
JavaScript中的DOM
郑思旭的博客
05-15 497
一、DOM 1.Document Object Model(文档对象模型)，提供操作文档的方法。每个html文件都视为一篇文档，操作文档实际围绕HTML标签进行。 2.节点对象 对文档中所有的内容进行封装，变成JS中的节点对象。 节点分类： 元素节点（标签） 属性节点（标签属性） 文本节点（文本内容） 标签 3.获取元素节点 1）根据标签名获取节点列表 document.getElementsBy...
JavaScript DOM
尝胆的世界
03-07 1549
• DOM，全称Document Object Model文档对象模型。 • JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随 心所欲的操作WEB页面。 • 文档 – 文档表示的就是整个的HTML网页文档 • 对象 – 对象表示将网页中的每一个部分都转换为了一个对象。 • 模型 – 使用模型来表示对象之间的关系，这样方便我们获取对象 • 节点：N...
javascript 中的dom
泪光无悔
03-08 1723
什么是DOM？ 通过JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西，JavaScript就需要对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。 在1998年，W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中
javascriptDom
qq_37149421的博客
11-13 782
1. DOM定义 全称：document object model（文档对象模型），是W3C组织推荐的处理可扩展标志语言的标准编程接口 •document：指的是可扩展的标记语言：HTML、XML； •object：DOM实际上是以基于对象方式对当前文档进行操作的； •model：在网页上，组织页面（或文档）的对象被组织在一个树形结构中，这个就是文档模型。 2.Document对象集
JavaScript_DOM
Jaosn.Yang的博客
07-07 315
DOM文档对象常用方法的getElementById（）返回对拥有指定ID的第一个对象的引用getElementsByName（）返回带有指定名称的对象的集合的getElementsByTagName（）返回带有指定标签名的对象的集合getElementsByClassName方法（）返回带有指定类名的对象的集合写（）向文档写文本，HTML表达式或JavaScript的代码四种访问页面元素的区别的...
JavaScript中的DOM对象
qq_44971635的博客
03-23 2341
文章目录 前言 一、DOM是什么？ 二、获取元素节点的方法 1.获取body和head节点 2.通过ID获取元素节点 3.通过class获取元素节点 4.通过name属性获取元素节点 5.通过标签名获取元素节点 6.通过css选择器获取元素节点 三、操作元素的属性 四、操作元素的样式属性 五、节点操作 六、节点的属性 六、其他 前言 提示：DOM DOM树理解。 一、DOM是什么？ 示例：DOM（document object mod...
react-router-dom
08-02
```javascript import React from "react"; import { withRouter } from "react-router-dom"; class ScrollToTop extends React.Component { componentDidUpdate(prevProps) { if (this.props.location.pathname ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值