一、获取DOM节点
以前学过获取DOM元素的4种方法
- 通过id
- 通过标签名
- 通过类class名
- 通过表单的name属性
获取到的是数组的话，可以通过下标来得到单个对象
现在呢，介绍两个新的方法
（1）querySelector（html5语法）返回DOM元素，如果有多个，返回第一个
（2）querySelectorAll 返回数组
二、节点类型
常见节点类型和属性
- 元素节点（标签）节点类型是1
- 属性节点，节点类型2
- 文本节点（标签里的内容）节点类型3
三、节点的遍历（通过某一元素，获取他的父亲孩子兄弟等的过程）
综上，找孩子节点的方法有兼容性，所以我们得封装一个找孩子节点的函数
像上面那样写的话，会报错，我们想找到ul下面的第一个li,所以如果我们最先找到的是空格的话就不能再找子节点了，而是找空格的兄弟节点，而空格的下一个兄弟节点正是li，那么我们先封装一个找下面的兄弟节点的函数吧
封装一个找兄弟节点的方法
function next(elem){
do{
elem = elem.nextSibling;
}while(elem && elem.nodeType!=1 );
return elem;
}现在，接着封装first函数
找元素的第一个子节点的代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复习9</title>
</head>
<body>
<ul id="ul1">
<li class="aa">111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li class="aa">555</li>
</ul>
<script>
var oUl1 = document.getElementById("ul1");
function first(elem){
elem = elem.firstChild;
return elem.nodeType ==1? elem : next(elem);
}
function next(elem){
do{
elem = elem.nextSibling;
}while(elem && elem.nodeType!=1);
return elem;
}
console.log(first(oUl1));
</script>
</body>
</html>四、节点操作
创建节点creatElement(” 要穿件的节点标签名”)
追加元素 xx.appendChild(yy);把yy追加到xx里面，成为xx的子元素
删除子节点 父元素.removeChild(子元素)；
替换子元素 父元素. replaceChild(xx,yy);
插入节点在某个节点之前 父元素.insertBefore(xx,yy);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jiedian</title>
</head>
<body>
<ul id="ul1">
<li id="aa">11</li>
<li>22</li>
<li class="bb">33</li>
<li>44</li>
</ul>
<script>
var oUl1 = document.getElementById("ul1");
// console.log(oUl1.children);
var oP = document.createElement("p");
var oA = document.getElementById("aa");
oP.innerHTML = "hhhhhh";
// oUl1.appendChild(oP);//追加子节点
// oUl1.removeChild(oA);//删除子节点
// oUl1.replaceChild(oP,oA);//用p代替第一个li
// oUl1.insertBefore(oP,oA);//在第一个之前插入p
// document.body.appendChild(oP);
</script>
</body>
</html>复制节点
调试断点的步骤
