DOM浅学

最新推荐文章于 2024-07-12 09:36:48 发布

岂心561

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量115

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_61957587/article/details/125429201

版权

啊，摆了好久的烂啊，终于在学长学姐们的催促之下开始了学习（bushi

简述

文档对象模型（Document Object Model，简称DOM），它可以改变页面的内容结构和样式。

DOM树

顾名思义，DOM结构构成的基本要素主要为节点，而文档的结构就是由层次化的节点组成。

DOM模型中节点的概念很广泛，比如整个文档就是一个节点，称为文档节点。

除此之外，还有元素节点，属性节点，注释节点等。

了解了 DOM 的结构是由各种的子节点组成的，那么以 HTMLDocument 为根节点，其余节点为子节点，组织成一个树的数据结构的表示就是 DOM树。
DOM树由三大类组成

文档（document）:每一个页面就是一个文档
元素（element）：所有标签都被称为元素
节点（node）：所有内容都是节点

获取元素

由于我们要对元素进行相应的改动，所以首先需要将其获取，这里我们给出几种获取元素的方法。

getElementById()方法

通过此方法我们可以用每个元素独一无二的ID来进行选择

<div id="elem">
  <div id="elem-content">Element</div>
</div>

<script>
  // 获取该元素
  var elem = document.getElementById('elem');

  // 将该元素背景改为红色
  elem.style.background = 'red';
</script>

getElementsByTagName()方法

此方法是运用标签名进行选择，大体与getElementById（）方法相同。查找具有给定标签的元素，并返回它们的集合。tag 参数也可以是对于“任何标签”的星号 “*”。

注意：getElementById（）方法所返回的是一个对象，而getElementByTagName()方法所返回的是一个伪数组

HTML5中的方法

getElementsByClassName（）方法

类似于类选择器，注意括号里面需要加‘’，因为他是一个字符串。

注意：我们需要警惕element后面是否有‘s’！

querySelector（）方法和querySelectorAll（）方法

elem.querySelector(css) 调用会返回给定 CSS 选择器的第一个元素。

换句话说，结果与 elem.querySelectorAll(css)[0] 相同，但是后者会查找所有元素，并从中选取一个，而 elem.querySelector 只会查找一个。因此它在速度上更快，并且写起来更短。

<ul>
  <li>The</li>
  <li>test</li>
</ul>
<ul>
  <li>has</li>
  <li>passed</li>
</ul>
<script>
  let elements = document.querySelectorAll('ul > li:last-child');

  for (let elem of elements) {
    alert(elem.innerHTML); // "test", "passed"
  }
</script>

我们还要关注getElementBy…方法与querySelector的区别：

一般来说getElementBy…方法是实时的集合，反之，querySelector是一种静态的集合，不会改变。

特殊的标签

body doucumen.body
html: document.documentElement

事件

事件：可以被侦测到的行为，可以理解为触发响应机制

基础

事件的组成：

事件源：事件被触发的对象
事件类型：如何触发
事件处理程序：通过函数赋值

执行步骤：

获取事件源
绑定事件
添加事件处理程序

这里我们举个例子qwq

<script>
	var div = document.querySelector(){};
	div.onclick = function(){};
</script>

事件进阶

绑定（删除）事件

绑定与删除事件都分为两种方法：传统方法和方法监听注释。
传统方法特点：注册事件唯一性（同一元素同一事件只能处理同一函数）

注意：如果同时多个函数存在，则运行最后一个。

方法监听注册方式;
AddEventListener()方法，此方法在IE9之前不可用，可以用于绑定多个事件。
其语法为：eventTarget.addEventListener(Type,listener[, useCapture])

其中eventtarget为目标对象，type为事件类型（click，mouseover等），usecapture为可选参数，默认为false。

事件流

指的是从页面内接受事件的顺序，事件发生时会在节点之间以顺序传播

事件流分为三个阶段：捕获阶段，当前目标，冒泡阶段

捕获阶段：document–>html–>body–>div
当前目标
冒泡阶段：div–>body–>html–>document

注意：js代码只能执行捕获/冒泡中的一个
onclick和attackevent等只有冒泡阶段
事件监听第三个参数为true时，在捕获阶段调用程序，第三个参数为false时，在冒泡阶段调用

事件对象与委托

事件对象就是写在function括号中的内容，指的是事件中一系统数据的集合
常用方法有：e.target与e.srcElement,二者都是返回触发事件对象的方法。
阻止冒泡：e.stopPropation()方法

事件委托原理：不是给每个节点单独设置事件监听器，而是在其父节点上，利用冒泡原理来影响每个节点

操作元素

我们现在来学习如何利用DOM对元素进行操作。

改变元素内容

这里我们介绍两种方法：
1.element.innerText = ‘内容’
此方法可以改变元素文本内容，‘内容’之中也可以是函数，但是需要注意的是，它不能识别HTML标签，且不保留空格。
2.element.innerHTML = ‘内容’
此方法可以获取HTML内容，它能识别html标签，并且保留换行，这里我们给出二者区别。
1.element.innerText

<body>
<input type="button" value="按钮" id="btn">
<div id="dv">这是一个div</div>
<script>
    function my$(id) {
        return document.getElementById(id);
    };
</script>
<script>
    my$("btn").onclick = function () {
        my$("dv").innerText = "哈哈";//设置文本
        my$("dv").innerText = "<p>这是一个p</p>";//设置html标签的代码
    };
</script>
</body>

2…element.innerHTML

<body>
<input type="button" value="按钮" id="btn">
<div id="dv">这是一个div</div>
<script>
    function my$(id) {
        return document.getElementById(id);
    };
</script>
<script>
    my$("btn").onclick = function () {
        my$("dv").innerHTML = "哈哈";
        my$("dv").innerHTML = "<p>这是一个p</p>";//设置Html标签的
    };
</script>
</body>

修改样式属性

有关CSS的样式我们也可以修改，这里我们介绍两个方法进行学习：
1.行内操作element.style
注意，所改变的样式需要使用驼峰命名方法，其产生的样式为行内样式，所占权重比较高。
2.类名操作element.className
这一类方法比较适合多个样式都需要改变时使用，需要提前写好所用的样式，然后对其进行修改

注意：若要保留原样式，则语法为element.className= “原类名+ +新类名”

自定义属性的操作

我们不仅可以分配事件处理程序，还可以从 JavaScript 生成事件。

自定义事件可用于创建“图形组件”。例如，我们自己的基于 JavaScript 的菜单的根元素可能会触发 open（打开菜单），select（有一项被选中）等事件来告诉菜单发生了什么。另一个代码可能会监听事件，并观察菜单发生了什么。

我们不仅可以生成出于自身目的而创建的全新事件，还可以生成例如 click 和 mousedown 等内建事件。这可能会有助于自动化测试。
1.获取属性值
这里有两种方法：element.属性=‘值’与element.getAttribute(‘属性’)

二者的区别是：第一种方法获取的是元素自身所带的属性，第二种主要是得到程序员定义的

2.设置属性值
第一种赋值方式比较简单，这里我们重点看一下第二种设置方法，element.setAttribute(‘属性’，值)
3.移除属性值
需要使用removeAttribute（）方法

节点操作

概述

前面我们说过，所有内容都是节点，则我们可以利用dom对节点进行操作，我们可以利用节点的层级进行定位操作。
这里介绍节点的基本属性

节点类型nametype
节点名称nodename
节点值nodeValue
其中节点类型为三类：元素节点，属性节点，文本节点，其值分别为1，2，3。

层级

我们知道，dom层级为父，子，兄弟三种
1.父节点

element.parentNode ,得到的是离元素最近的父节点

2.子节点

element.parementNode.childNode 得到的是全部子节点的集合
element.parementNode.children 得到的是子元素节点

3.兄弟节点
node.nextSibiling 返回当前元素的下一个兄弟节点，包括所有节点
node.perviousSibiling 返回当前元素的上一个兄弟节点，包括所有节点
node.nextElementSibiling 返回当前元素的下一个兄弟元素节点
node.perviousElementSibiling 返回当前元素的上一个兄弟节点，包括所有节点

操作

1.创建节点
document.createElement(‘tagName’)
2.添加节点
node.appendChild(child):将一个节点添加到指定父节点末尾
类似于after伪元素
3.删除节点
node.removeChild(child)
4.复制节点
node.cloneNode(布尔值)：返回此节点的相同副本

当布尔值为true时，为深拷贝，内容也会被复制
当布尔值为空或false时为浅拷贝，则只复制标签

总结

假期生活开始啦~~
眼睛一睁，开始竞争

岂心561

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM浅学

文档对象模型（Document Object Model，简称DOM），它可以改变页面的内容结构和样式。顾名思义，DOM结构构成的基本要素主要为节点，而文档的结构就是由层次化的节点组成。DOM模型中节点的概念很广泛，比如整个文档就是一个节点，称为文档节点。除此之外，还有元素节点，属性节点，注释节点等。了解了 DOM 的结构是由各种的子节点组成的，那么以 HTMLDocument 为根节点，其余节点为子节点，组织成一个树的数据结构的表示就是 DOM树。DOM树由三大类组成由于我们要对元素进行相应的改动，所以
复制链接

扫一扫