初识DOM

一、DOM简介

1.DOM是文档对象模型，是处理可扩展标记语言（HTML/XML）的标准编程接口。

2.DOM树：在DOM中，以下内容均看作对象

• 文档：一个页面即一个文档，用document表示
• 元素：页面中的所有标签，用element表示
• 节点：网页中的所有内容，包括标签、属性、文本、注释等，用node表示

二、获取页面的元素

1.根据ID获取

用getElementByid()可获取带有ID的元素对象

<div id="now">现在</div>
<script>
var time = document.getElementByid('now');
</script>

2.根据标签名获取

（1）用getElementsByTagName()可返回带有指定标签名的对象的集合

• 得到的是一个对象的集合，是以伪数组的形式存储的，所以操作元素时就需要遍历里面的元素。
• 若页面中没有该元素，返回的是空的伪数组的形式。
• 得到的元素对象是动态的。

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
//遍历
for(var i = 0;i < lis.length; i++) {
console.log(lis[i]);
}
</script>

（2）用element.getElementsByTagName('标签名')获取父元素内部所有指定标签名的子元素。

• 父元素必须指明是哪一个元素对象，且获取时不包括父元素自己。
• element是父元素

<ul id = "ol">
<li>1</li>
</ul>
<script>
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
</script>

3.通过HTML5新增的方法获取（IE6\7不能用）

（1）根据类名获取：document.getElementsByClassName('.类名'）

（2）根据选择器获取：

document.querySelector('选择器')

• 里面的选择器需要加符号；只能得到指定选择器的第一个元素对象

document.querySelectorAll('选择器')

• 返回指定选择器的所有元素（若不考虑兼容性，可用该方法）

4.获取特殊元素

（1）获取body元素：document.body
（2）获取HTML元素：document.documentElement

三、事件基础

1.事件三要素

（1）事件源：事件被触发的对象
（2）事件类型：如何触发（如鼠标点击、鼠标经过、按下键盘）什么事件
（3）事件处理程序：通过一个函数赋值的方式完成

2.执行事件的步骤

（1）获取事件源
（2）注册事件（绑定事件）

• 常见的鼠标事件
  

（3）添加事件处理程序（采取函数赋值方式）

四.操作元素

1.改变元素内容

element.innerText：包括从起始位置到终止位置的内容，去除html、空格、换行标签
element.innerHTML：包括从起始位置到终止位置的内容，保留html、空格和换行

• 这两个标签只能改变普通盒子里面的内容，比如div
• innerText与innerHTML的区别：前者不识别html标签，非标准；后者识别html标签，W3C标准
• 这两个属性是可读写的，可以获取元素里面的内容

2.常用元素的属性操作

如img.src \img.alt等

3.表单元素的属性操作

• DOM元素可以操作以下表单元素的属性：type value checked selected disabled
• 表单里面的值、文字内容是通过value来修改的
• 若禁用某个表单，则让该按钮button禁用：用变量名/this.disabled = true；

btn.onclick = function() {
input.innerHTML='点击了';

btn.disabled = true;
或者
this.disabled = true;
//this指向的是事件函数的调用者btn

4.样式属性操作

• 可通过JS修改元素的大小、颜色、位置等样式
• 如果需要修改的元素的样式较少，可用行内样式操作：element.style

多重样式优先级:内联样式 > 内部样式>外部样式> 浏览器默认样式，JS修改style样式操作产生的是行内样式，所以优先权较高

• 如果较多，则用类名样式操作：element.className

className会直接更改元素的类名，会覆盖原先的类名

• 如果想要保留原先的类名——多类名选择器
  

JS里面的样式采取驼峰命名法

5.排他思想

使用场景：有同一组元素，想要某个元素实现某种样式
方法：用循环的排他思想

1. 所有的元素全部清除样式
2. 给当前元素设置样式

6.自定义属性的操作

（1）获取属性值

element.属性：获取元素本身自带的属性
element.getAttribute('属性')：获得程序员自定义的属性

（2）设置属性值

element.属性=‘值’：设置内置属性值
element.getAttribute('属性'，'值'):设置自定义的属性（标准）

（3）移除属性

element.removeAttribute（‘属性’）

7.H5自定义属性

（1）自定义属性的作用：防止引起歧义
（2）设置H5自定义属性：以data-开头作为属性名，如<div data-index="1"></div>或者element.setAttribute('data-index',2)
（3）获取H5自定义属性

• 兼容性获取element.getAttribute（'data-index'）
• H5新增element.dataset.index或者element.dataset['index']
• dataset是一个集合里面存放了所有以data开头的自定义属性；如果自定义属性里面有多个-连接的单词，我们获取的时候采用驼峰命名法

<div data-list-name="Jackson Yee"></div>
<script>
console.log(div.dataset.listName);
</script>

五、节点操作

1.节点概述

• 节点基本属性

节点类型（nodeType）：

• 元素节点的nodeType为1；属性节点为2；文本节点（包括文字、空格、换行等）为3
• 节点操作主要操作是元素节点

节点名称（nodeName）

节点值（nodeValue）

• 网页中所有内容都是节点

2.节点层级

（1）父级节点：node.parentNode

返回某节点的最近的一个父节点；如没有父节点则返回null

（2）子节点

• parent.childNodes——包含了所有的子节点：元素节点、文本节点等
• parentNode.children——获取所有的子元素节点，不存在兼容性问题
• parent.firstChlid:第一个子节点，不管是文本节点还是元素节点
• parent.lastChlid：最后一个子节点，不管是文本节点还是元素节点

下面两种方法存在兼容性问题

• parentNode.firstElementChild：返回第一个子元素节点
• parentNode.lastElementChild：返回最后一个子元素节点

解决方案：
一个子元素节点：parentNode.children[0]
最后一个子元素节点：parentNode.children[parentNode.children.length-1]

（3）兄弟节点

下面这两种方法存在兼容性问题，且返回的是所有的节点

• node.nextSibling返回当前元素的下一个兄弟节点，找不到则返回null
• node.previousSibling返回上一个兄弟节点

解决方案：封装一个兼容性的函数

六、添加新元素

（1）创建节点：如document.createElement('tagName')，表示由tagName指定的HTML元素

• 注意这些元素原本不存在，是根据我们的需求动态生成的

（2）添加节点：
node.appendChild(child)：将一个节点添加到指定父节点的子节点列表末尾
node.insertBefore(child,指定元素)：将一个节点添加到指定父节点的子节点列表前面