DOM

选择器

document.getElementById(id)
通过id来获取html元素 单个

document.getElementsByTagName(tag)
通过tag标签名称来获取html元素 (类数组-多个)

document.getElementsByName(name)
通过name名称来获取html元素 (类数组-多个)

document.getElementsByClassName(class)
通过class类名 来获取html元素 (类数组-多个)

document.querySelectorAll(css选择器)
通过css选择器的方式来获取html元素 (类数组-多个)

document.querySelector(css选择器)
通过css选择器的方式来获取html元素 (单个)

获取和改变层的内容

获取

innerHTML
获取元素的内容 包括标签

innerText
获取元素的内容 过滤标签

改变

innerHTML
设置元素的html内容

innerText
设置元素的文本内容

classList

add 添加类

remove 删除类

toggle 切换类

定义

当浏览器去解析html标签完毕后会生成一个dom树形结构

会有三种类型节点

• 元素类型

• 文本类型

• 属性类型

节点之间会用关系

• 父子关系

• 兄弟关系

dom核心方法

附：

操作html有三种方式:
html方式
dom核心方式
xml方式

属性操作

getAttribute(属性名)
获取属性

setArribute(属性名,属性值)
设置属性

创建

createElement()

添加

parent.append(被添加的元素)

parent.insertBofore()

删除

parent.removeChild(被删除元素)

复制

new = old.cloneNode(true)
//true 代表包含子节点

节点关系

parentElement
父(亲)元素节点

Children
子节点

firstElementChild
第一个子节点

lastElementChild
最后一个子节点

nextElementSibling
下一个兄弟子节点

previousElementSibling
上一个兄弟子节点

其他关系节点

parentNode
父亲节点

firstChild
第一个子节点

lastChild
最后一个子节点

nextSiBling
下一个兄弟子节点

previousSiBling
上一个兄弟子节点

节点类型

node Type 节点的类型

3 文本节点

1 元素节点

node Value 节点的值

node Name
节点的名称

table表格操作

table.insertRow(0)
插入行

tr.insertCell(0)
插入列

tr.rowIndex
获取是第几行

table.deleteRow(index)删除行

间隔调用 setInterval(fn,time)

clearInterval()

延迟调用 setTimeout(fn,time)

clearTimeout()

事件

click 单击

focus 获取焦点

blur 失去焦点

focus 获取焦点

mouseout 鼠标离开

mouseover 鼠标放上

submit 提交

change 发生改变