DOM基本语法

最新推荐文章于 2025-01-11 14:56:46 发布

原创最新推荐文章于 2025-01-11 14:56:46 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

API：

在了解DOM之前，让我们先了解一下API。API是一些预定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
API简单来说就是一种工具。举个例子，我们用电脑上网，我们无需理解电脑连上网络的机制，我们仅仅需要把运营商提供的账号和密码输入就可以了。
Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM），现阶段我们的API主要针对浏览器做交互效果。

DOM:

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

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

另外，DOM把以上内容都看做对象。

获取页面的元素：

1）通过ID获取：

<div id="hello">123</div>
<script>
var ids = document.getElementById('hello');
</script>

由于页面是从上往下加载，我们常常将script标签写在下面。
参数为大小写敏感的字符串，返回的是一个元素对象。

2）通过标签名获取

<script>
var ids = document.getElementsByTagName('标签名');
</script>

注意：
使用getElementsByTagName（）方法得到的对象的集合，所以我们想要操作里面的元素就需要遍历。并且这些对象是动态的。

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


<script>
var ids = element.getElementsByTagName('标签名')
</script>

注意，这种方法使用时父元素必须是单个对象，即必须指明是哪一个元素对象，并且获取的时候不包括父元素自己。

3）根据HTML5新增的方法获取：

<script>
var ids = document.getElementByClassName('类名')；//根据类名返回元素对象集合
var ids1 = document.querySelector('选择器')//根据指定选择器返回第一个元素对象
var ids2 = document.querySelectorAll('选择器');//根据指定选择器返回
</script>

注意:queryselector 返回指定选择器的第一个元素对象，querySelectorAll返回指定选择器的所有元素对象集合。选择器需要加符号 .box #nav

4）获取特殊元素：

<script>
//获取body元素
var ids = document.body
//获取html元素
var ids1 = document.documentElement
</script>

事件：

事件由三部分组成，事件源，事件类型，事件处理程序，这也称为事件的三要素，下面我们来分析一下这三要素。

事件源：事件触发的对象。

事件类型：如何触发，什么条件下触发？

事件处理程序;通过一个函数赋值的方式完成

<body>
<button id="btn">123</button>
<script>
//事件源：button
var btn = document.getElementById('btn');
//事件类型以及处理程序
btn.onclick = function(){
alert('456');
}
</script>
</body>

事件在DOM中有着举足轻重的作用，大部分功能都要有事件来实现。

操作元素：

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

1）改变元素内容

改变元素内容有两个常用方法：element.innerText和element.innerHTML

element.Text可以改变从起始位置到终止位置的内容，但它去除HTML标签，同时空格和换行也会被去除。

element.innerHTML可以改变从起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行，这两个属性都是可读写的，可以获取元素里面的内容。

<script>
var p = document.querySelector('p);
console.log(p.innerText);
console.log(p.innerHTML);
</script>

禁用元素：
如果想要某个表单被禁用，不能再被点击，即使用disabled

<script>
var btn = document.querySelector('button');
btn.disabled = true;
</script>

修改表单中的内容:
如果想要修改表单中的内容，innnerHTML 是不可以的，因为input中的值只能通过value来修改。

<script>
var input = document.querySelector('input');
input.value = '被点击了';
</script>

利用DOM进行样式属性操作：

我们可以通过js修改元素的大小，颜色、位置等样式。

<script>
element.style//行内样式操作
element.className//类名样式操作
</script>

注意：

1.如果样式修改较多，可以采取操作类名方式更改元素样式

2.class因为是个保留字，因此使用className来操作元素类名属性

3.className会直接更改元素类名，并且有覆盖作用
修改css属性：

<div class="div1">123</div>
<script>
var div = document.querySelector('div');
div.onclick = function(){
this.style.backgroundColor = "black";
this.className = 'div1 change';
//这样做可以在原来类名基础上新增类名
}
</script>

排他思想：

如果一组元素，我们想要某一个特定元素实现某种样式，需要用到循环的排他思想算法，主要分为两步：

1.给所有元素清除样式

2.给当前元素设定样式

注意顺序不要颠倒，否则无法实现预期效果

自定义属性的操作：

1)获取属性值：

<script>
element.属性//获取属性值
element.getAttribute('属性');
</script>

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

<div id="demo" index="1">123</div>
<script>
var div = document.querySelector('div');
console.log(div.getAttribute('id')
console.log(div.getAttribute('index');
</script>

2)设置属性值：

<script>
element.属性 = '值' //设置内置属性值
element.setAttribute（'属','值'）;
</script>

H5自定义属性：

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute(‘属性’)获取

但有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性，因此，为了区分，H5规定自定义属性以data-开头作为属性名并且赋值。
获取自定义属性:

1.兼容性获取 element.getAttribute(‘data-index’)

2.H5新增element.dataset.index或者element.dataset[‘index’]，但存在兼容性问题，ie11才支持。

节点：

我们利用DOM提供的方法获取元素时逻辑性不强且代码繁琐，而用节点层级关系获取元素使得代码逻辑性增强，但相应的兼容性会稍差（看来好东西都有兼容性问题呀）

1）节点概述：

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。

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

元素节点 nodeType为1
属性节点 nodeType为2
文本节点 nodeType为3

在我们实际开发中，节点操作主要针对元素节点而言的。

2）节点层级：

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

<script>
//父级节点
node.parentNode
</script>

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

<div class="demo">
<div class="box">
<span class="erweima">x</span>
</div>
</div>
<script>
var erweima = document.querySelector('.erweima');
console.log(erweima.parentNode);
</script>

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

注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。如果只想要里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

2.parentNode.children
这是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回

并且他已经得到了各个浏览器的支持，因此我们可以放心使用。

<script>
parentNode.firstChild
//他返回的是第一个子节点，找不到则返回null。同样，也是包含所有的节点。
parentNode.lastChild
//返回最后一个子节点，找不到则返回null，同样，也是包含所有节点。
parent.Node.firstElementChild
//返回第一个子元素节点，找不到则返回null
parentNode.lastElementChild
//返回最后一个子元素节点，找不到则返回null
</script>

同样的这两个方法有兼容性问题，ie9以上才支持。实际开发中，我们常常使用parentNode.children[0]来获取第一个子元素节点。
兄弟节点:

<script>
node.nextSibling
//返回当前元素的下一个兄弟节点，找不到则返回null，包含所有节点
node.previousSibling
//返回当前元素上一个兄弟节点，找不到则返回null，包含所有节点
node.nextElementsibling
//返回当前元素下一个兄弟元素节点，找不到则返回null
node.previousElementSibling
//返回当前元素上一个兄弟节点，找不到则返回null
</script>

创建节点：

<script>
document.createElement('tagName');
//创建由tagName指定的原先不存在的HTML元素
</script>

添加节点：

<script>
node.appendChild(child)
//该方法将一个节点添加到指定父节点的子节点列表末尾。类似css里面的after伪元素
node.insertBefore(child,指定元素)
//该方法将一个节点添加到父节点指定的子节点前面，类似于css里面的before伪元素。
</script>

删除节点:

<script>
node.removeChild(child)
//该方法从DOM中删除一个子节点，返回删除的节点
</script>

复制节点：

<script>
node.cloneNode()
//该方法返回调用该方法的节点的一个副本
</script>

注意：如果括号里参数为空或者false，则是浅拷贝，只复制节点本身，不赋值里面的子节点
如果括号里参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。

addEventListener事件监听方式：

<script>
eventTarget.addEventListener(type,listener[,useCapture])
</script>

该方法将指定监听器注册到eventTarget上，当该对象触发指定的事件时，就会执行事件处理函数
关于三个参数：

1.type：事件类型字符串，比如click、mouseover，注意这里不要带on

2.listener：事件处理函数，事件发生时，会调用该监听函数。

3.useCapture：可选参数，是一个布尔值，默认是false

删除事件的方式：

1.传统注册方式：
eventTarget.onclick = null；

2.方法监听注册方式：
（1）eventTarget.removeEventListener（type，listener[,useCapture]）;

(2)eventTarget.detachEvent(eventNameWithOn,callback);

事件流：

事件流描述的是从页面中接收事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

DOM事件流分为三个阶段：
1.捕获阶段
2.当前目标阶段
3.冒泡阶段

注意：
1.js代码中只能执行捕获或者冒泡其中的一个阶段

2.onclick和attachEvent只能得到冒泡阶段

3.addEventListener第三个参数如果是true，则表示在事件捕获阶段调用事件处理程序，如果是false，表示在事件冒泡阶段调用事件处理程序。

4.实际开发中我们很少使用事件捕获，我们更关注事件冒泡

5.有些事件时没有冒泡的，比如onblur onfocus onmouseenter onmouseleave

阻止事件冒泡的方式：

<script>
//利用事件对象里的stopPropagation
e.stopePropagation();
</script>

事件委托：

我们不需要给每个子节点单独设置事件监听器，而是事件监听器设置在父节点上，然后利用冒泡原理影响每个子节点，这样就提升了程序的性能。

鼠标事件和键盘事件：

在这里插入图片描述