技术是自由的靠山
本文长期更新，如有错误，还请指正
关注一下不迷路 =.=
理解DOM
DOM 将HTML文档表达为树结构，并定义了访问和操作 HTML 文档的标准方法。
DOM 节点就是html上所有的内容包括：
- 文档节点
- 元素节点（标签）
元素可嵌套节点 - 元素属性节点
- 文本节点
- 注释节点
节点的属性
-
nodeType节点的类型（数字）
元素1
属性2
文本3
注释8
文档9 -
nodeName节点的名称
元素即为标签名（大写）
属性即为属性名
文本为#text
文档节点为#document -
nodeValue节点的值
元素的值是undefined或null
节点操作（元素&文本）
> 创建
-
document.createElement(tagName)
创建元素节点 -
document.createTextNode(text)
创建文本节点 -
document.createDocumentFragment()
特殊，创建一个节点容器（透明容器）。
用法：比如创建2个p，插入容器里，然后你在那这个容器插入其他节点，那么这2个p都会被插入，但容器不会被插入。
> 获取
-
getElementById(id)
返回一个dom对象 -
getElementsByClassName(className)
返回一个类数组
类数组
-
getElementsByTagName(tagName)
返回一个类数组 -
getElementsByName(name)
通过标签的name属性获取dom对象，因为name可能会同名所以返回多个
注：ie中此方法也会返回同名id的dom -
querySelector(selector)
返回第一个匹配元素
querySelectorAll(selector)
返回一个元素数组
> 复制
cloneNode([boolean])
参数为true则复制子节点
> 插入
-
appendChild(node)
后插入元素或文本 -
insertBefore(node)
前插入元素或文本
参数如果是一个已存在的节点，那么该节点会移动到新的地方，而不是复制一份
> 替换
relaceChild(new,old)
> 删除
removeChild() 删除子节点
//删除node本身
node. parentNode.removeChild(node);
节点的遍历
父
parentNode
兄
nextElementSibling previousElementSibling
previousSibling nextSibling 包括空节点
自己
参见 上一个标题
子
-
children所有子节点（同样是类数组）
childNodes包括空节点 -
firstElementChildlastElementChild第一个子节点和最后一个子节点
firstChildlastChild包括空节点
节点的内容（元素）
-
outerHTML属性，元素及其内容（获取或设置） -
innerHTML属性，元素的内容（获取或设置）
innerHTML 效率很高，但是使用+=操作符时，效率低下 -
innerText属性，只获取文本内容（设置时相当于innerHTML）
textContent去除换行
属性节点（元素的attribute）
获取和设置
-
点
.语法
js点语法操作标签属性时，会区分大小写，而且有些保留字会被转变，比如：htmlFor className -
hasAttribute()
getAttribute()
setAttribute()
removeAttribute() -
attributes属性
返回所有标准属性和非标准属性（只读的类数组）
style对象
样式表 CSSStyleDeclaration { }
可以通过此对象设置样式
需要注意的是有些样式不可用点语法，比如
font-family
附：元素节点DOM对象
每个dom对象都有自己的特性，以及js对他们的控制方式
Document
Anchor
Area
Base
Body
Button
Canvas
Event
Form
Frame
Frameset
IFrame
Image
Input Button
Input Checkbox
Input File
Input Hidden
Input Password
Input Radio
Input Reset
Input Submit
Input Text
Link
Meta
Object
Option
Select
Style
Table
TableCell
TableRow
Textarea
详解： w3cschool
网友评论