2021-06-01DOM学习笔记

web API 概述

JavaScript 三大部分：ECMAScript + BOM + DOM

BOM:Browser Object Model 浏览器对象模型 控制浏览器本身

DOM:Document Object Model 文档对象模型 控制html文档

关于DOM

• DOM 0
• DOM 1 标准正式开始
• DOM 2
• DOM 3
• DOM 4 2015 ES6

DOM核心理念
是将HTML 或XML文档 用对象模型表示，每个对象称之为dom对象

dom对象也叫做dom节点

节点类型：

• DocumentType:文档类型节点
• Document ：文档节点，表示整个文档
• Element：元素节点
• Text：文本节点
• Attribute：属性节点
• Comment：注释节点
• DocumentFragment:文档片段节点

获取dom节点

全局对象 window 中有 document 属性 表示整个文档

dom 0

旧的获取节点的方法

document.body : 获取一个body元素节点
document.head : 获取一个head元素节点
document.links: 获取页面上所有的超链接元素节点
document.forms: 获取页面上所有的form元素节点

新的获取节点的方法

• documnet.getElementById(‘id名’) 通过id名获取元素 同名id只能存在一个 dom 2

• document.getElementsByClassName(‘class名’) 通过class名获取元素 返回值是类数组 ie9以下不可以使用

• document.getElementsByTagName(‘标签名’) 通过标签名获取元素 返回值是类数组 ie9以下不可以使用

• document.getElementsByName(‘name属性’) 通过name属性获取元素 返回值是类数组

• document.queryselector(‘选择器’) 通过选择器选择元素 返回匹配到的第一个元素 ie8以下无效

• document.queryselectorAll(‘选择器’) 通过选择器选择元素 返回匹配到的所有元素 类数组 ie8以下无效

细节：

1. 在得到所有的类数组的方法中 除了queryselectorAll，其他的方法都是实时更新的
2. getElementById() 执行效率是最高的
3. 书写了id属性的元素，会自动成为window下的属性。它也是会实时更新的单对象
4. getElementsByClassName、.getElementsByTagName、queryselectorAll、queryselector 可以作为dom对象的方法去调用

根据节点关系获取节点

• parentNode ：获取当前元素的父元素节点
• previousSibling：获取当前元素的上一个兄弟节点
• nextSibling: 获取当前元素的下一个兄弟节点
• chlidNodes：获取所有的子节点
• firstChild: 获取第一个子节点
• lastChild: 获取最后一个子节点
• attribute：获取所有的属性节点

获取元素节点：

• parentElement 获取当前元素的父元素节点
• previousElementSibling 获取当前元素的上一个兄弟元素节点
• nextElementSibling 获取当前元素的上一个兄弟元素节点
• children ：获取所有的子元素节点
• firstElementChild: 获取第一个子元素节点
• lastElementChild: 获取最后一个子元素节点

获取节点信息

• nodeName 节点名称
• nodeValue 节点的值
• nodeType 节点类型 数字表示

dom元素的操作

初识元素事件

元素事件：某个元素发生了一个事件(被点击了click)
事件处理程序：是一个函数，发生了事件后 做的事情
注册事件：将事件处理程序与某个事件关联

对元素的属性进行操作

dom元素.属性名

1. 正常的属性即使没有复制，也是有默认值的
2. 布尔属性在dom对象中，得到的一定是boolean类型的值
3. 某些表单可以获取到不存在的属性(例如 select.value、textarea.value)

对元素内容的操作

• innerHTML 获取元素的内容 可以识别标签
• innerText 获取元素中的文本内容 不可以识别标签
• textContent

元素结构重构

父元素.appendChild(子元素)在元素的末尾追加一个元素

父元素.insertBefore(待插入的元素，在哪个元素之前)在元素之前插入元素

父元素.replaceChild(替换的元素，被替换的元素)

创建和删除元素

创建元素

document.createElement(‘标签名’);

document.createTextNode(‘文本内容’);

document.createComment()

删除元素

父元素.removeChild(‘子元素’)通过父元素删除掉子元素

remove()删除自己

dom元素样式

控制dom的元素的类样式

className获取或者设置元素类名

classList dom4 控制一个元素的类名

classLIst.add(‘类名’)用于添加一个类名

classLIst.remove(‘类名’)用于删除一个类名

classLIst.toggle(‘类名’)用于添加/删除一个类名

classLIst.contains(‘类名’)用于判断dom对象是否包含某个类名 返回boolean