DOM（文档对象模型）

最新推荐文章于 2024-05-12 16:13:35 发布

xby_1.

最新推荐文章于 2024-05-12 16:13:35 发布

阅读量180

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_73180034/article/details/130260836

版权

DOM（文档对象模型）

文档对象模型，是W3C组织推荐的处理可拓展标记语言（HTML或者XML）的标准编程接口
W3C已经定义了一系列DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式

DOM树

在这里插入图片描述

文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中的所有标签都是元素，DOM中用element表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）

getElementById 获取元素

1. 根据ID获取

<div id="time">2023-4-20</div>
    <script>
      //1.因为我们文档页面从上往下加载，所以先得有标签 所以我们script写在标签下面
      //2.get 获得 element元素 by 通过 驼峰命名法
      //3.参数 id是大小写敏感的字符串
      //4.返回的是一个元素对象
      var timer = document.getElementById("time");
      console.log(typeof timer);
      // console.dir 打印的是我们返回的元素对象 更好的查看里面的属性和方法
      console.dir(timer);
    </script>

2. 根据标签名获取

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合

document.getElementsByTagName(‘标签名’);

注意：

因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
得到元素对象是动态的

<ul>
      <li>王鹤棣1</li>
      <li>王鹤棣2</li>
      <li>王鹤棣3</li>
      <li>王鹤棣4</li>
      <li>王鹤棣5</li>
    </ul>
    <script>
      //1，返回的是 获取过来元素对象的集合 以伪数组的形式存储
      var lis = document.getElementsByTagName("li");
      console.log(lis);
      console.log(lis[0]);
      // 2.我们想要依次打印里面的元素对象可以采用遍历的方式
      for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);
      }
    </script>

3.如果页面中只有一个li 返回的还是伪数组的形式
4.如果页面中没有这个元素，返回的是一个空的伪数组

还可以获取某个元素（父元素）内部所有指定标签名的子元素

element.getElementsByTagname('标签名'）;

注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己

<ol>
      <li>王鹤棣1</li>
      <li>王鹤棣1</li>
      <li>王鹤棣1</li>
    </ol>
    <script>
    var lo = document.getElementsByTagName("ol");
      console.log(lo[0].getElementsByTagName("li"));
    </script>

<ol id="lo">
      <li>王鹤棣1</li>
      <li>王鹤棣1</li>
      <li>王鹤棣1</li>
    </ol>
    <script>
       var ol = document.getElementById('lo');
      console.log(ol.getElementsByTagName('li'));

3. 根据HTML5新增的方法获取

1.document。getElementsByClassName('类名')；//根据类返回元素对象集合

例如：

 <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
      <ul>
        <li>首页</li>
        <li>产品</li>
      </ul>
    </div>
    <script>
      // 1.getElementsByClassName 根据类名获得某些元素集合
      var boxes = document.getElementsByClassName("box");
      console.log(boxes);
    </script>

2.document.querySelector('选择器');//根据指定选择器返回第一个元素对象

 //2.querySelector  返回指定选择器的第一个元素对象
      var firstbox = document.querySelector(".box");
      console.log(firstbox);
      var nav = document.querySelector("#nav");
      console.log(nav);

3.document.querySelectorAll('选择器');//根据指定选择器返回

 // 3.querySelectorAll()返回指定选择器的所有元素对象集合
 var allBox = document.querySelectorAll(".box");
      console.log(allBox);

4. 获取特殊元素（body，html)

获取body元素

1.document.body//返回body元素对象

获取html元素

2.document.documentElement //返回html元素对象

事件基础

事件三要素

 <button id="btn">唐伯虎</button>
    <script>
      // 点击一个按钮 弹出对话框
      // 1. 事件是由三部分组成  事件源  事件类型  事件处理程序  我们称为事件三要素
      // （1）事件源  事件被触发的对象  谁 --按钮
      var btn = document.getElementById("btn");
      // (2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
      //（3）事件处理程序  通过一个函数赋值的方式 完成
      btn.onclick = function () {
        alert("点秋香");
      };
    </script>

执行事件的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

 <div>123</div>
    <script>
      var div = document.querySelector("div");
      div.onclick = function () {
        console.log("我被选中了");
      };
    </script>

效果图：
在这里插入图片描述

常见的鼠标事件

在这里插入图片描述

分析事件三要素

下拉菜单三要素
关闭广告三要素

操作元素

Javascript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性

4.1 改变元素内容

element.innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行

    <button>显示当前系统事件</button>
    <div>xixi</div>
    <script>
      var btn = document.querySelector("button");
      var div = document.querySelector("div");
      btn.onclick = function () {
        div.innerText = getDate();
      };
      function getDate() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];
        var day = date.getDay();
        return "今天是" + year + "年" + month + "月" + dates + "日 " + arr[day];
      }
    </script>

效果图：

在这里插入图片描述

<div class="div1"></div>
    <div class="div2"></div>
    <p>
      王鹤棣最帅
      <span>111</span>
    </p>
    <script>
      // innerText和innerHTML的区别
      // 1.innerText不识别HTML标签 非标准 不常用
      var div1 = document.querySelector(".div1");
      div1.innerText = "<strong>今年</strong>是：2023年";
      // 2.innerHTML 识别html标签 W3C标准
      var div2 = document.querySelector(".div2");
      div2.innerHTML = "<strong>今年</strong>是：2023年";
      // 这两个属性是可读写的 可以获取元素里面的内容
      var p = document.querySelector("p");
      console.log(p.innerText);
      console.log(p.innerHTML);
    </script>

在这里插入图片描述

4.2 常用元素的属性操作

innerText、innerHTML 改变元素内容
src、href
id、alt、title

<button id="sg">帅哥</button>
    <button id="mn">美女</button><br />
    <img src="images/老公.webp" alt="" style="width: 300px; height: 300px" />
    <script>
      // 修改元素属性 src
      // 获取元素
      var sg = document.getElementById("sg");
      var mn = document.getElementById("mn");
      var img = document.querySelector("img");
      // 注册事件 处理程序
      sg.onclick = function () {
        img.src = "images/老公.webp";
      };
      mn.onclick = function () {
        img.src = "images/美女.jpg";
        img.title='美女';
      };
    </script>

在这里插入图片描述

4.3 表单元素的属性操作

利用DOM可以操作如下表单元素的属性：

type、value、checked、selected、disabled

 <button>按钮</button>
    <input type="text" value="输入内容 " />
    <script>
      // 1.获取元素
      var btn = document.querySelector("button");
      var input = document.querySelector("input");
      // 2.注册事件
      btn.onclick = function () {
        // 表单里面的文字是通过value来修改的
        input.value = "我被点击";
        // 如果想要某个表单被禁用 不能再点击 disabled 
        //我们想要这个按钮button被禁用
        this.disabled = true;
        // this 指向的是事件函数的调用者 btn
      };

在这里插入图片描述

仿京东显示隐藏密码明文

案例分析：

核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
算法：利用一个flag变量，来判断flag的值，如果是1，就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1

<style>
      .box {
        position: relative;
        width: 400px;
        border-bottom: 1px solid #ccc;
        margin: 100px auto;
      }
      .box input {
        width: 370px;
        height: 30px;
        border: 0;
        outline: none;
      }
      .box img {
        position: absolute;
        top: 7px;
        right: 0px;
        width: 24px;
      }
    </style>
    <body>
<div class="box">
      <label for="">
        <img src="images/close.jpg" alt="" id="eyes" />
      </label>
      <input type="password" id="psw" />
    </div>
    <script>
      var eyes = document.getElementById("eyes");
      var psw = document.getElementById("psw");
      var flag = 0;
      eyes.onclick = function () {
        if (flag == 0) {
          psw.type = "text";
          eyes.src = "images/open.jpg";
          flag = 1;
        } else {
          psw.type = "password";
          eyes.src = "images/close.jpg";
          flag = 0;
        }
      };
    </script>
    </body>

效果图：

在这里插入图片描述

4.4 样式属性操作

可以通过JS修改元素的大小、颜色、位置等样式

element.style 行内样式操作
element.className 类名样式操作

注意：

JS里面的样式采用驼峰命名法比如：fontSize、backgroundColor
JS修改style样式操作，产生的是行内样式，CSS权重比较高
如果样式修改较多，可以采取操作类名的方式更改元素样式
class因为是个保留字，因此使用className来操作元素类名属性
className 会直接更改元素的类名，会覆盖原先的类名（如果想要保留原先的类名，用多类名选择器）

盒子点击变色案例：

行内样式操作

 <style>
      div {
        width: 300px;
        height: 300px;
        background-color: red;
      }
    </style>
  </head>
  <body>
  <div></div>
    <script>
      var div = document.querySelector("div");
      div.onclick = function () {
        // div.style
        this.style.backgroundColor = "green";
      };
    </script>
  </body>

类名样式操作

 <style>
      div {
        width: 300px;
        height: 300px;
        background-color: red;
      }
      .change {
        background-color: greenyellow;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
 <div></div>
    <script>
      var div = document.querySelector("div");
      div.onclick = function () {
        this.className = "change";
      };
    </script>
  </body>

小结
在这里插入图片描述

4.5 排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法

所有元素全部清除样式（干掉所有人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉所有人，再设置自己

4.6 自定义属性的操作

1. 获取属性值

element.属性获取属性值
element.getAttribute(‘属性’)；

区别：

element.属性获取内置属性值（元素本身自带的属性）
element.getAttribute(‘属性’)；主要获得自定义的属性（标准）我们程序员自定义的属性

2. 设置属性值

element.属性=‘值’ 设置内置属性值
element.setAttribute(‘属性’，‘值’)；主要针对于自定义属性

3. 移除属性

element.removeAttribute(‘属性’)；

4.7 H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中
自定义属性获取是通过getAttribute(‘属性’)获取
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性

设置H5自定义属性
H5规定自定义属性data-开头作为属性名并且赋值
比如<div data-index="1"></div>
或者使用JS设置
element.setAttribute('data-index',1)
获取H5自定义属性
1.兼容性获取 element.getAttribute(‘data-index’) 兼容性好
2.H5新增 element.dataset.index或者element.dataset[‘index’] ie11才支持
（dataset 是一个集合里存放了所有以data开头的自定义属性）

注：如果自定义属性里面有多个-链接的单词，我们获取时采用驼峰命名法
例如：有自定义属性data-list-name 获取时element.dataset.listName 或element.dataset[‘listName’]

节点操作

为什么学节点操作

利用节点层级关系获取元素

利用父子兄节点关系获取元素
逻辑性强，但兼容性稍差

节点概述

网页中所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示

一般的，节点至少有nodeType(节点类型)、nodeName（节点名称）和nodeValue(节点值)这三个基本属性

元素节点 nodeType为1
属性节点nodeType为2
文本节点nodeType为3（文本节点包含文字、空格、换行等）

我们在实际开发中，节点操作主要操作的是元素节点

节点层级

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

父节点
```
node.parentNode
```

parentNode属性可返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回Null

子节点

1.parentNode.childNodes(标准)

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合

注意：返回值里面包含了所有的子节点，包括元素节点、文本节点等

如果只想要获得里面的元素节点，则需要专门处理，所以我们一般不提倡使用childNodes

var ul=document.querySelector('ul');
for(var i=0;i<ul.childNodes.length;i++){
if(ul.childNodes[i].nodeType==1){
 console.log(ul.childznodes[i]);
}
}

2.parentNode.children

获取所有的子元素节点，也是我们实际开发常用的

第一个子元素和最后一个子元素

3.parentNode.firstChild

firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点

4.parentNode.lastChild

实际开发中的写法

<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<script>
var ol=document.querySelectora('ol');
console.log(ol.children[0]);
console.log(ol.children[ol.children.length-1])
</script>

兄弟节点

1.node.nextSibling

nextSibling 返回当前元素的下一个兄弟节点，找不到返回null。同样，也是包含所有的节点

2.node.previousSibling

previousSibling 返回的是当前元素上一个兄弟节点，找不到返回null。同样，也是包含所有的节点

3.node.nextElementSibling

nextElementSibling返回当前元素下一个兄弟元素节点，找不到返回null

4.node.previousElementSibling

previousElementSibling返回当前元素上一个兄弟节点，找不到返回null

注意：3、4两个方法有兼容性问题，IE9以上才支持

如何解决兼容性问题？

封装一个兼容性函数

function getNextElementSibling(element){
var el=element;
while(el=el.nextSibling){
if(el.nodeType==1){
return el;
}
} return null;
}

创建节点

document.createElement('tagName')

document.createElement() 方法创建由tagName指定的HTML元素，因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点

添加节点

1.node.appendChild(child)//node 父级  child 子级 后面追加元素

node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾，类似于CSS里的after伪元素

2.node.insertBefore(child,指定元素)

我们想要页面添加一个新的元素：

创建元素
添加元素

删除节点

node.removeChild(child)

node.removeChild() 方法从DOM中删除父节点中的一个子节点，返回删除的节点

复制节点（克隆节点）

node.cloneNode()

node.cloneNode() 方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点

注意：

如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点（只复制标签不复制里面的内容）
如果括号里面参数为true，复制标签和里面所有的内容

xby_1.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM（文档对象模型）

element.属性获取属性值element.getAttribute(‘属性’)；element.属性获取内置属性值（元素本身自带的属性）element.getAttribute(‘属性’)；主要获得自定义的属性（标准）我们程序员自定义的属性自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中自定义属性获取是通过getAttribute(‘属性’)获取但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性设置H5自定义属性。
复制链接

扫一扫