javascript中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 //子元素虽然不是

nextSibling //下一个兄弟节点

nextElementSibling //下一个兄弟元素有兼容性问题可以封装一个兼容性方法

previousSibling//上一个兄弟节点

nextElementSibling //下一个兄弟元素有兼容性问题可以封装一个兼容性方法

firstChild //第一个节点

firstElementChild //第一个子元素有兼容性问题可以封装一个兼容性方法

1.7. 样式属性

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

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

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

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

1.8. 动态创建元素

1.8.1. 创建节点

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

document.write(“内容”)

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

innerHTML=”内容”

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

createElement()

cloneNode()

appendChild()