DOM精简版笔记

1.1. 基本概念

1.1.1. DOM

DOM Document Object Model 文档对象模型

就是把HTML文档模型化，当作对象来处理

DOM提供的一系列属性和方法可以视作一个工具箱，极大地方便了我们对文档的处理。

1.1.2. 内容概念

文档(Document)：就是指HTML或者XML文件

节点(Node)：HTML文档中的所有内容都可以称之为节点，常见的节点有

元素节点属性节点文本节点注释节点

元素(Element)：HTML文档中的标签可以称为元素

1.1.3. 结构概念

父节点当前节点的父级

子节点当前节点的子级

兄弟节点和当前节点同属一个父级的节点

1.2. 获取元素

getElementById

通过id寻找一个元素（找到的是一个元素对象）该方法只能被document对象调用（同一个文档中id不能重复）

getElementsByTagName

通过标签名寻找一类元素（找到的是由元素对象组成的伪数组）

即可以被document调用，又可以被元素对象调用，被元素对象调用时表示在该元素对象内部执行查找

1.3. 设置属性

元素对象.属性名 = “属性值”;

等价于

<标签属性名=”属性值”>

1.4. 绑定事件

事件三要素

事件源.事件 = function(){ 事件处理程序 };

等价于

<标签事件=”事件处理程序”>

对象方法中的this永远指的是该方法所属的那个对象

1.5. 常用属性

1.5.1. 常用标签属性

DOM对象的属性和HTML的标签属性几乎是一致的，常用的有src、title、className、href和style

其中className对应就是标签的class属性，但是由于class在JS中是关键字，所以变成了className

1.5.2. 内部文本属性

innerHTML

获取和设置标签中的内容，设置的内容会当作节点对象被解析到DOM树上

innerText

获取和设置标签中的内容，设置的内容会被当作普通文本（有兼容性问题，旧版ff不支持）

textContent

获取和设置标签中的内容，设置的内容会被当作普通文本（有兼容性问题，旧版IE不支持）

可以通过能力检测封装一个自己的设置内部文本的方法并放到自己的JS工具包中

1.5.3. 常用表单属性

常见的表单元素属性有： type、value、checked、selected、disabled

type可以设置input元素的类型

value可以设置input元素的值

checked可以设置input元素是否选中

selected 可以设置下拉列表select中的option是否被选中

disabled 可以设置input元素是否被禁用

文本框获取焦点和失去焦点

获取焦点事件是onfocus 失去焦点事件是onblur (不是所有的标签都有这个事件) 更多详细内容可以查阅w3School

1.5.4. 自定义属性

对象的自定义属性

可以像给对象设置属性一样，给元素对象设置属性

标签的自定义属性

可以通过getAttribute()和setAttribute()设置和获取标签属性，通过removeAttribute()移除标签的属性

正常浏览器中 HTML中有规定的属性两种方式才可以相互设置和获取

总之用setAttribute设置的就用getAttribute获取用对象的自定义属性设置的就用对象的自定义属性获取以免出问题

1.6. 节点

1.6.1. 节点类型

node.nodeType

1表示元素节点 2表示属性节点 3表示文本节点

1.6.2. 节点层次

所有获取节点相关属性都没有兼容性问题

childNodes //子节点

children //子元素虽然不是早期DOM标准中的方法，但是所有浏览器都支持

nextSibling //下一个兄弟节点

nextElementSibling //下一个兄弟元素有兼容性问题

previousSibling//上一个兄弟节点

previousElementSibling //上一个兄弟元素有兼容性问题

firstChild //第一个节点

firstElementChild //第一个子元素有兼容性问题

lastChild //最后一个子节点

lastElementChild //最后一个子元素有兼容性问题

parentNode //父节点（一定是元素节点，所以无需处理）

1.7. 样式属性

style属性是对象，style对象的属性是字符串

style只能获取和设置行内样式

DOM对象中style的属性和标签中style内的值几乎一样

只是带有 - 的属性名较为特殊（如background-color变成了backgroundColor），因为在JS中 - 不能作为标识符

设置和获取样式

//通过对象的style属性只能设置和获取行内样式

//获取样式的时候如果行内没有该样式输出空字符串

//设置样式的时候赋的值是一个字符串如果这个属性有单位一定要节点加单位

什么情况通过class控制样式 什么情况通过style控制样式

不严格的说：

//如果样式很多通过直接控制类名的方式加样式

//如果样式比较少通过直接设置比较方便

严格来说：

//从标准的角度讲即使是样式比较少的时候设置样式也要用类名

//但是有一类情况是无论如何也必须直接通过JS加的那就是涉及到计算的时候

1.8. 动态创建元素

1.8.1. 插入和移除节点

在父元素中的最后追加子元素

father.appendChild(要追加的元素);

在父元素中的某个子元素前面插入子元素

father.insertBefore(要插入的元素,插到这个元素的前面);

从父元素中移除子元素

father.removeChild(要移除的子元素);

1.8.2. 动态创建结构

方式一：直接在文档中书写

document.write(“内容”)

方式二：改变元素对象内部的HTML

innerHTML=”内容”

方式三：创建或克隆节点并追加

createElement()

cloneNode()

通过这两种方法创建出来的元素只是保存在内存中，必须放到页面上才行!