0
点赞
收藏
分享

微信扫一扫

JavaScript DOM基础学习笔记

MaxWen 2022-04-16 阅读 73
javascript

DOM简介

1.1 什么是DOM

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

1.2 DOM树

在这里插入图片描述

  • 文档:一个页面就是一个文档,DOM 中使用 document 表示
  • 元素:页面中的所有标签都是元素,DOM 中使用 element 表示
  • 节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM 中使用 node 表示
    DOM 把以上内容都看做是对象

获取元素

2.1 根据ID获取

使用 getElementById() 方法可以获取带有 ID 的元素对象。

document.getElementById('id');

注:使用 console.dir() 可以打印获取的元素对象,更好的查看对象里面的属性和方法。

2.2 根据标签名获取

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

document.getElementsByTagName('标签名');

注:使用该方法得到的是一个对象的集合,因此若需要操作里面的元素就需要遍历,且得到的元素对象是动态的。

2.3 通过 HTML5 新增的方法获取

document.getElementsByClassName('类名');// 根据类名返回元素对象集合
document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
3. document.querySelectorAll('选择器'); // 根据指定选择器返回所有元素对象

注:querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(’#nav’);

2.4 获取特殊元素(body,html)

# 获取body元素
documen.body  
# 获取html元素
docume.documentElement  

事件基础

3.1 事件概述

JavaScript 使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为。
简单理解: 触发— 响应机制
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件,例如可以在用户点击某按钮时产生一个 事件,然后去执行某些操作。

3.2 事件三要素

  • 事件源 (谁)

  • 事件类型 (什么事件)

  • 事件处理程序 (做什么)

3.3 执行时间的步骤

  1. 获取事件源
  2. 注册事件(绑定事件)
  3. 添加事件处理程序(采取函数赋值形式)

3.4 常见的鼠标事件

在这里插入图片描述

操作元素

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

在这里插入图片描述

4.1 改变元素内容

element.innerText
//从起始位置到终止位置的内容, 但它去除 html 标签, 同时空格和换行也会去掉
element.innerHTML
//起始位置到终止位置的全部内容,包括 html 标签,同时保留空格和换行

4.2 常见元素的属性操作

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

4.3 表单元素的属性操作

type、value、checked、selected、disabled

4.4 样式属性操作

//我们可以通过 JS 修改元素的大小、颜色、位置等样式。
element.style     //行内样式操作
element.className //类名样式操作

注1:JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor。且JS 修改 style 样式操作,产生的是行内样式,CSS 权重比较高

注:如果样式修改较多,可以采取操作类名方式更改元素样式。class因为是个保留字,因此使用className来操作元素类名属性。并且className 会直接更改元素的类名,会覆盖原先的类名。

4.5 自定义属性的操作

4.5.1 获取属性值

element.属性  
element.getAttribute('属性');

区别:
element.属性 获取内置属性值(元素本身自带的属性)
element.getAttribute(‘属性’); 主要获得自定义的属性 (标准)程序员自定义的属性

4.5.2 设置属性值

element.属性 = ‘值’  
element.setAttribute('属性', '值'); 

区别:
element.属性 设置内置属性值
element.setAttribute(‘属性’); 主要设置自定义的属性 (标准)

4.5.3 移除属性

element.removeAttribute('属性');

4.6 H5自定义属性

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

自定义属性获取是通过getAttribute(‘属性’) 获取。但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。

4.6.1 设置H5自定义属性

// H5规定自定义属性data-开头做为属性名并且赋值。
<div data-index="1"></div>
或者使用 JS 设置  
element.setAttribute(‘data-index’, 2)

4.6.2 获取H5自定义属性

# 兼容性获取   element.getAttribute(‘data-index’);
# H5新增 element.dataset.index  
	或者 element.dataset[‘index’]   ie 11才开始支持

节点操作

5.1 为什么学习节点操作

利用DOM提供的方法获取元素

  • document.getElementById()
  • document.getElementsByTagName()
  • document.querySelector 等
  • 逻辑性不强、繁琐

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

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

以上两种方式都可以获取元素节点,但是节点操作更简单

5.2 节点概述

网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM 中,节点使用 node 来表示。

HTML DOM 树中的所有节点均可通过 JavaScript 进行访问,所有 HTML 元素(节点)均可被修改,也可以创建或删除。

在这里插入图片描述

一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。

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

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

5.3 节点层级

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

5.3.1 父级节点

 node.parentNode  

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

5.3.2 子节点

5.3.2.1 通过parentNode.childNodes获取子节点
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) {   
    // ul.childNodes[i] 是元素节点
    console.log(ul.childNodes[i]);}
}
5.3.2.2 通过parentNode.children获取子节点
parentNode.children		(非标准)  

parentNode.children 是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返回 (这个是我们重点掌握的)。
虽然children 是一个非标准,但是得到了各个浏览器的支持,因此可以放心使用

5.3.2.3 获取特殊位置的子节点
parentNode.firstChild   
// firstChild 返回第一个子节点,找不到则返回null。包含所有的节点。
parentNode.lastChild    
// lastChild 返回最后一个子节点,找不到则返回null。包含所有的节点。
parentNode.firstElementChild   
// firstElementChild  返回第一个子元素节点,找不到则返回null。 
parentNode.firstElementChild      
// lastElementChild 返回最后一个子元素节点,找不到则返回null。  

注:parentNode.firstElementChild 与parentNode.firstElementChild 有兼容性问题,IE9 以上才支持。

解决方案:
如果想要第一个子元素节点,可以使用 parentNode.chilren[0]
如果想要最后一个子元素节点,可以使用 parentNode.chilren[parentNode.chilren.length - 1]

5.3.3 兄弟节点

node.nextSibling  
// nextSibling 返回当前元素的下一个兄弟元素节点,找不到则返回null。包含所有的节点。
node.previousSibling    
// previousSibling 返回当前元素上一个兄弟元素节点,找不到则返回null。包含所有的节点。
node.nextElementSibling  
// nextElementSibling 返回当前元素下一个兄弟元素节点,找不到则返回null。 
node.previousElementSibling    
// previousElementSibling 返回当前元素上一个兄弟节点,找不到则返回null。 

注:node.nextElementSibling 与node.previousElementSibling 有兼容性问题, IE9 以上才支持。

解决方案

封装一个兼容性函数

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

5.4 创建添加节点

 document.createElement('tagName')

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

node.appendChild(child) 
// node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。
node.insertBefore(child, 指定元素) 
// node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。

5.5 删除节点

 node.removeChild(child) 

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

5.6 复制(克隆)节点

 node.cloneNode() 

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

注: 如果括号参数为空或者为 false ,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。如果括号参数为 true ,则是深度拷贝,会复制节点本身以及里面所有的子节点。

5.7 三种动态创建元素区别

document.write()
// document.write 是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
element.innerHTML
// innerHTML 是将内容写入某个 DOM 节点,不会导致页面全部重绘
// innerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
document.createElement()
// createElement() 创建多个元素效率稍低一点点,但是结构更清晰
// 总结:不同浏览器下,innerHTML 效率要比 creatElement 高
举报

相关推荐

0 条评论