下午复习:
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,领取 前端资料、学费优惠 !