JavaScript——DOM

JavaScript——DOM

1. DOM简介

1.1 什么是DOM

1.2 DOM树

2. 获取元素

2.1 如何获取元素

• 根据 ID 获取

通过getElementById方法

• 根据标签名获取

通过getElementByTagName方法
1. 该函数返回的是 获取的元素对象的集合，以伪数组的形式存储
2. 如果页面中只有一个元素，返回的还是伪元素的形式
3. 如果页面中没有元素，返回的是空的伪数组的形式
4. element.getElementByTagName('标签名')可以获取某个元素内部所有指定标签的子元素
注意：父元素必须是单个对象（必须指明是哪一个元素对象），可以通过id的方法获取父元素对象

• 通过HTML5 新增的方法获取

1. getElementByClassName 根据类名获得某些元素集合
2. queryselector 返回指定选择器的第一个元素对象
3. queryselector 返回指定选择器的所有元素对象集合

• 特殊元素获取

1. 获取body元素
let bodyEle = document.body;
2. 获取html元素
let htmlEle = document.documentElement;

3. 操作元素

3.1 修改元素内容

修改元素内容通过innerText和innerHTML来进行修改
这两个属性是可读写的
innerText和innerHTML的区别：

• innerText不识别html标签，获取innerText的内容时会自动去除空格和换行
• innerHTML能识别html标签，获取innerHTML的内容时保留空格和换行

3.2 修改元素属性

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

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

注意：

• JS修改style样式，产生的是行内样式，权重比较高

3.3 自定义元素属性

1. 获取属性值

• element.属性： 获取属性值（元素内置属性）
• element.getAttribute(‘属性’);（程序员自定义的属性）

2. 设置属性值

• element.属性 = ‘值’（设置内置属性值）
• element.setAttribute(‘属性’，‘值’);（设置自定义属性的值）

3. 移除属性

• element.removeAttribute(‘属性’，‘值’);

3.4 获取H5自定义元素属性

1. 兼容性获取：element.getAttribute( 'data-index' );
2. H5新增：element.dataset.index或者 element.dataset['index']  ie11 才开始支持

3.5 三种创建元素方式

• document.write()
  直接将内容写入页面的文档流，但是如果页面文档流加载完毕，再调用这句话会导致页面重绘

• innerHTML()
  将内容写入某个dom节点，不会导致页面重绘，创建多个元素效率更高（不要拼接字符串，使用数组形式拼接，用到数组的join函数），结构稍微复杂

• document.createElement()
  创建多个元素效率稍低，但是结构清晰

4. 节点操作

4.1 为什么学习节点操作

4.2 节点概述

4.3 常用API

父节点：element.parentNode
子节点（只选择元素）：element.children
第一个或者最后一个子元素：children[0]和children[children.length - 1]
兄弟节点：nextElementSibling和previousElementSibling
创建节点：document.createElementNode('tagName')
添加节点：父节点.appendChild()
删除节点：父节点.removeChild()
复制节点：浅拷贝：cloneNode()括号里参数为空或者是false，只拷贝节点自身，不拷贝其内容
深拷贝：cloneNode(true)，拷贝节点全部内容

注意：
1. childNodes返回的是包括元素、属性、文本三种节点的集合
2. firstChild和lastChild返回的是第一个子节点和最后一个子节点（也涵盖了三种节点）
3. firstElementChild和lastElementChild返回的是第一个子元素和最后一个子元素，但是由于兼容性问题只有ie9以上支持
4. nextElementSibling和previousElementSibling同样存在兼容性问题

5. 总结

5.1 DOM

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

1. 对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口
2. 对于HTML，dom使得html形成一棵dom树. 包含 文档、元素、节点
3. 我们获取的DOM元素是一个对象（object），所以称为 文档对象模型

6.1 创建元素

• document.write
• innerHTML
• createElement

6.2 增加元素

• appendChild
• insertBefore

6.3 删除元素

• removeChild

6.4 修改元素

• 修改元素属性：src、href、title等
• 修改普通元素内容：innerHTML、innerText
• 修改表单元素：value、type、disabled等
• 修改元素样式：style、className

6.5 查询元素

• DOM提供的API：getElementById和getElementByTagName，古老方法不推荐
• H5提供的新方法：querySelector和querySelectorAll，提倡
• 利用节点操作获取元素：parentNode、children、previousElementSibling和nextElementSibling ，提倡

6.6 属性操作

主要针对自定义属性

• setAttribute
• getAttribute
• removeAttribute

6.7 事件操作

鼠标事件	触发条件
onclick	鼠标点击左键
onmouseover	鼠标经过
onmouseout	鼠标移开
onfocus	获得焦点
onblur	失去焦点
onmousemove	鼠标移动
onmouseup	鼠标弹起
onmousedown	鼠标按下