下午复习：
dom是由节点组成。
节点一共分为12种。
我们需要记住的节点类型：
1 元素类型
3 文本类型
8 注释类型
9 文档类型
节点属性：
nodeType: 标记的是节点的类型
nodeName: 标记的是节点名称
nodeValue: 标记是的节点的值
节点关系：
分为3种：
父子：
father.childNodes // 所有子节点
father.firstChild // 第一个子节点
father.lastChild // 最后一个子节点
子父：
child.parentNode // 父节点
兄弟：
node.previousSibling // 前一个兄弟节点
node.nextSibling // 下一个兄弟节点
元素操作：
创建元素：
document.createElement(type)
type: 元素类型
上树:
father.appendChild(child)
下树：
father.removeChild(child)
1.1 插入
使用方式：
father.insertBefore(newChild, oldChild)
newChild: 要插入的元素
oldChild： 参照元素
返回值：newChild
最终效果： newChild插入到oldChild的前面作为它的兄弟节点存在
举例：
1 // 创建元素 2 var li = document.createElement("li"); 3 // 添加内部文本 4 li.innerHTML = 11; 5 6 // 获取ul 7 var ul = document.getElementById("list"); 8 9 // 通过ul调用insertBefore方法 10 ul.insertBefore(li, null); // 第二个参数可以接受null， 效果等价于appendChild方法 11 12 // 获取Ul的所有子节点 13 var arr = ChildNodes(ul); 14 console.log(arr); 15 16 ul.insertBefore(li, arr[5]) |
结果：
1.2 替换
使用方式：
father.replaceChild(newChild, oldChild)
newChild: 要替换上的元素
oldChild: 被替换下的元素
返回值：oldChild
最终效果：newChild替换掉oldChild
举例：
1 // 创建元素 2 var li = document.createElement("li"); 3 // 添加内部文本 4 li.innerHTML = 11; 5 6 // 获取所有的Li 7 var lis = document.getElementsByTagName("li"); 8 9 // 获取ul 10 var ul = document.getElementById("list"); 11 // 将创建出来的li元素，替换掉lis中的某一项 12 setTimeout(function() { 13 ul.replaceChild(li, lis[2]); 14 }, 3000) |
1.3 克隆
使用方式：
node.cloneNode(boolean)
接受一个参数就是布尔值， 默认是false, 只复制自身，当传递true的时候，则连同子节点一起复制
举例：
1 var newUl = ul.cloneNode(); 2 console.log(newUl); |
传递参数：
1 // 传递true 2 var newUl = ul.cloneNode(true); 3 console.log(newUl); |
一、jquery中的元素操作
1.1 创建元素
可以使用$()函数的功能来创建元素
举例：
1 $(“<div class=”aaa” id=”aaa” data-info=”nihao”>content</div>”) |
结果：
1.2 上树
jquery中的上树方法分为很多种，可以是父元素选择子元素，可以是子元素选择父元素，还可以是兄弟选择兄弟
父元素选择子元素：
append(selector|jquery|element): 往父元素的后面追加元素
prepend(selector|jquery|element): 往父元素的前面追加元素
子元素选择父元素：
appendTo(selector|jquery|element): 往父元素的后面追加
prependTo(selector|jquery|element): 往父元素的前面追加
兄弟之间的插入：
$(“box”).after(selector|jquery|element): 在box的后面插入某个元素
$(“box”).before(selector|jquery|element): 在box的前面插入某个元素
$(“box”).insertAfter(selector|jquery|element): 将box插入到某个元素的后面
$(“box”).insertbefore(selector|jquery|element): 将box插入到某个元素的前面
1.3 wrap
DOM结构：
1 <p>A</p> 2 <p>B</p> 3 <p>C</p> 4 <p>D</p> 5 <p>E</p> |
执行代码：
1 // wrap 让某个元素的外层多一层元素 2 $("p").wrap("<div></div>"); |
结果：
1 |
1.4 wrapAll
DOM结构：
6 <p>A</p> 7 <p>B</p> 8 <p>C</p> 9 <p>D</p> 10 <p>E</p> |
执行代码：
1 2 // wrapAll 将所有匹配到的元素的外层多一层元素 3 $("p").wrapAll("<div></div>") |
结果：
1 |
1.5 unwrap
DOM结构：
1 <div id="box"> 2 <p id="p1">我是一个p标签</p> 3 </div> |
执行代码：
1 // unwrap 将匹配到的元素去掉一层父元素 2 $("#p1").unwrap(); |
结果：
1 |
1.6 replaceWith和replaceAll
DOM结构：
1 <p>A</p> 2 <p>B</p> 3 <p>C</p> 4 <p>D</p> 5 <p>E</p> |
执行代码：
1 // replaceWith 将匹配到元素替换掉指定元素 2 // $("p").replaceWith("<div>123</div>"); 3 // replaceAll 将指定的元素替换掉所匹配到的元素 4 $("<div>321</div>").replaceAll($("p")); |
结果：
1 |
1.7 empty
DOM结构：
1 <div id="box"> 2 <ul> 3 <li>1</li> 4 <li>2</li> 5 <li>3</li> 6 <li>4</li> 7 </ul> 8 </div> |
执行代码：
1 //empty 表示清空后代，但是自己还在 2 $("#box").empty(); |
结果：
1 |
1.8 remove
DOM结构：
9 <div id="box"> 10 <ul> 11 <li>1</li> 12 <li>2</li> 13 <li>3</li> 14 <li>4</li> 15 </ul> 16 </div> |
执行代码：
3 //empty 表示自杀，自己和后代都没有了 4 $("#box").remove(); |
结果：
1 |
1.9 clone
clone(boolean)
boolean: 是一个布尔值
默认是false的时候，天生连同自己的后代一起复制
true的时候，连同事件一起复制
举例：
1 2 // 使用clone 复制box 3 // $("#box").after($("#box").clone()); 4 5 // 使用clone 传递参数true 6 $("#box").click(function() { 7 alert(123); 8 }) 9 10 $("#box").after($("#box").clone()); |
爱创课堂是一家专门做前端培训的机构，由百度高级工程师，《JavaScript设计模式》作者张容铭老师亲自授课，全程20个项目实战，真正做到学习完即可到企业正常工作！
我们前端课程的五大优势：
1. 名师亲自授课，根据企业需求 实时跟进课程大纲，保证学员学到的都是最新的、企业最需要的前端知识点
2. 采取小班教学、上二休一的模式（一个班20—30人，保证老师可以照顾到每一位同学，学员有充足的时间练习）
3. 签订就业协议，帮助学员制作简历，投递简历，模拟面试，不用担心就业问题，目前学员平均就业薪资12K
4. 免费学习一周，不满意不收取任何费用
5. 与中国石油，中国电信，软通等知名企业合作，进行企业内训，并进行学员就业推荐
从小白到就业，我们全权负责！
爱创课堂 言行一致、从不忽悠！
请把自己放心的交给我们吧！
6月12日前端培训班仅剩最后几个名额。。。
扫描下方二维码添加微信：haomei0452，领取 前端资料、学费优惠 ！
