1.选取文档元素
1.1. getElemenById
基于唯一id获取，任何HTML元素可以有id属性，在文档中该值必须唯一。
1.2. getElementsByName
基于name属性的值选取HTML元素。
1.3. getElementsByTagName
通过标签名选取元素，document.getElementByTagName("div")
1.4. getElementsByClassName
通过css类选取元素
1.5. querySelectorAll()
终极的选取元素的办法，非常强大的技术，等效于jquery中的$()方法。
2.文档结构和遍历
2.1 遍历
parentNode，节点的父节点
childNodes, 只读的类数组对象，节点的子节点，注意：换行符也是一个子节点
firstChild,lastChild, 子节点的第一个和最后一个,注意：可能是换行，因为换行也是一个子节点
nextSibling,previoursSibling, 节点的上一个兄弟节点和下一个兄弟节点
<html><head>test</head><body>Hello World!</body></html>
console.log(document.childNodes[0].childNodes[1])； //<body>Hello World!</body> console.log(document.firstChild.firstChild.nextSibling); //<body>Hello World!</body>
2.2 属性
HTML属性名不区分大小写，但js属性名大小写敏感，js属性名采用驼峰形式，其中class和for可以在html中作为属性，但是在js中为关键字，所以在js中变为className和htmlFor
<body> <div id="div3" class="test" >3333333333</div> <script> document.getElementById("div3").className //test document.getElementsByClassName("test")[0].id //div3 </script> </body>
2.3 创建节点
var s = document.createElement("script"); s.url = "www.baidu.com";
2.4 插入节点
appendChild()是在需要插入的element节点上调用，参数为被插入的节点，将被插入节点插入到调用节点的尾部
<div id="app" class="test" > <div>hello</div> </div> <script> var p = document.createElement("p"); p.innerText = "world"; document.getElementById("app").appendChild(p); </script> //将p插入到<div>hello</div>后
insertBefore()第一个参数是待插入节点，第二个是已经存在的节点，新节点插入到该节点的前面。方法是在新节点的父节点上调用，方法的第二个参数必须为该父节点的子节点
<body> <div id="app" class="test" > <div id="app1">hello</div> </div> <script> var p = document.createElement("p"); p.innerText = "world"; document.getElementById("app").insertBefore(p, document.getElementById("app1")); </script> //在app1前插入
2.5 删除和替换
removeChild()和replaceChild()的语法和insertBefore()的语法一致