生命是在低谷里孕育出来的。它随着古老的恐惧、古老的欲念、古老的绝望一直吹到了山顶。我们之所以必须一步步走上山，就是为了可以坐车下山。

1.DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var divNode = document.getElementById("container");
//节点类型
divNode.nodeType
//获取属性名称
divNode.nodeName
//获取属性值
divNode.nodeValue
//获取节点属性
divNode.attributes[0]
//获取所有子节点
divNode.childNodes
//doctype节点
document.doctype.nodeName
document.doctype.nodeValue

2.domReady

1
2
3
4
5
6
//页面全部加载完成之后
window.onload = fuction(){}
//jQuery
$(document).ready(function(){
});

3.元素节点类型的判断

1
2
3
4
isElement
isHTML
isXML
contains

document

获取子节点

1
2
3
4
5
6
7
let parentNode = document.getElementById('id')
// 获取所有子节点
let childNodeList = parentNode.childNodes
// 获取第一个子节点
let firstChildNode = parentNode.firstChild
// 获取最后一个节点
let lastChildNode = parentNode.lastChild

子节点操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let parentNode = document.getElementById('id')
// 将新节点插入到子节点最后一个
parentNode.appendChild(newNode)
// 将节点插入到指定位置
// parmas: 要插入的节点 & 参照节点
// return: 插入的节点
parentNode.insertBefore(newNode, positionNode)
// eg: 插入至第一个节点
parentNode.insertBefore(newNode, parentNode.firstChild)
// eg: 插入至最后一个节点
parentNode.insertBefore(newNode, null)
// 替换节点
// parmas: 要插入的节点 & 要替换的节点
// return: 要被替换的节点
parentNode.replaceChild(newNode,parentNode.firstNode)
// 删除子节点
// parmas: 要删除的节点
// return: 被删除的节点
parentNode.removeChild(parentNode.firstChild)

所有类型都有

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// parmas: boolean   true: 深复制-> 复制节点及其子节点  false: 浅复制 -> 复制节点(default)
// ps: 先移除事件处理程序（IE会复制事件处理程序）
parentNode.cloneNode(true)
// 删除空文本或者将相邻文本合并为一个文本
parentNode.mormalize()
``` 
文档信息
```js
// 文档标题
let title = document.title
document.title = 'newTitle'
// 获取完整URL
let url = document.URL
// 获取域名
let domain = document.domain
// 获取来源页面的URL
let referrer =document.referrer

查找元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
document.getElementById()
// IE8及较低的版本不区分ID的大小写
// name 特性与给定ID匹配的表单元素(<input/>,<textarea/>,<button/>,<select/>会被改方法返回
<input type='text' name='myElement' />
<div id='myElement' />
docuement.getElementById('myElement')  //<input type='text' name='myElement' />
let images = document.getElementsByTagName('img')
images.length
// 第一个<img>的src特性
images[0].src
images.item(0).src
// 通过name特性取得集合中的项 <img name='myImage' />
images.namedItem('myImage')
document.getElementsByName('name')

特殊集合

1
2
3
4
5
6
7
8
9
10
// 文档中所有带有name特性的<a>元素
document.anchors
// 文档中所有带href特性的<a>元素
document.links
// 文档中所有的form元素
document.forms
document.getElementsByTagName('form')
// 文档中所有的img元素
document.images
document.getElementsByTagName('img')

Element

1
2
3
4
5
6
let div = document.getElementById('myDiv')
div.tagName === div.nodeName   // true   ->DIV
// HTML中签名全部大写表示 XML(有时也包括XHTML）签名与源代码中的保存一致
if (element.tagName.toLowerCase() === 'div'){  //适用任何文档
  // dosomething
}

特性

1
2
3
4
5
6
7
8
9
10
11
12
// 特殊特性 style onClick
// 只有在取自定义特定时才使用
// 特性的名称不分大小写
div.getAttribute(‘id’) === div.getAttribute('ID')
// parmas: 特性名称 & 值
setAttribute('id','mydiv')
div.id = 'mydiv'
// parmas: 特性名称
// 删除特性与特性值
removeAttribute('id')

attributes

1
补