【dom操作基础】案例题1+笔记资源-CSDN文库

共15个文件

html：14个

md：1个

88 浏览量 2024-09-21 00:34:22 上传评论收藏 12KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

DOM笔记.zip （15个子文件）

DOM笔记

dom_访问.html 1KB

dom_修改.html 1KB

DOM.md 8KB

dom_属性.html 1KB

dom练习_事件处理.html 974B

dom练习题_选择元素.html 627B

dom练习_创建和删除元素.html 823B

dom练习题_修改元素.html 2KB

dom练习_事件捕获.html 1KB

dom练习_样式操作.html 1KB

dom_节点关系导航.html 983B

dom_事件.html 1KB

dom_元素.html 2KB

dom_方法.html 3KB

dom练习_事件冒泡.html 952B

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="father" id="fatherId"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <span class="child">4</span> <span class="child">5</span> <span class="child6">6</span> </div> <div class="father2"> <div>1</div> <span>1</span> </div> <div class="father3"> <div class="f3_child">1</div> </div> <div class="father4"> <div class="child1">child1</div> <div class="child2">child2</div> </div> <input class="input_01" type="text" value="原内容"> </body> <script> // 获取DOM元素 // 1、ID获取：document.getElementById获取具有指定id属性的元素（ID唯一） var element_id = document.getElementById("fatherId") // 2、className获取：document.getElementsByTagName获取指定标签的所有元素的节点列表 var element_div = document.getElementsByTagName("div") console.log(element_div); // 3、标签名获取：document.getElementsByClassName获取指定类名的所有元素列表 var element_class = document.getElementsByClassName("child") console.log(element_class); // 4、选择器获取：document.querySelector获取指定选择器的第一个元素 var element_selector = document.querySelector(".child") console.log(element_selector); // DOM元素的操作 // 1、新增子节点appendChild(必须是节点对象); // 创建元素节点createElement； // 创建文本节点createTextNode var sp = document.createElement("span"); var node = document.createTextNode("appendChild"); sp.appendChild(node); element_id.appendChild(sp) // 2、删除子节点 var father2 = document.querySelector(".father2") father2.remove() // 3、替换子节点 var sp2 = document.createElement("span"); var node2 = document.createTextNode("替换节点"); sp2.appendChild(node2); var father3 =document.querySelector(".father3") var c3 =document.querySelector(".f3_child") father3.replaceChild(sp2,c3) // 4、在指定子节点前插入新节点 var span_01 = document.createElement("span") var span_01_text = document.createTextNode("span_01_text") span_01.appendChild(span_01_text) var child2 = document.querySelector(".child2") child2.parentNode.insertBefore(span_01,child2) // 5、创建属性节点：createAttribute； // 返回指定的属性值：getAttribute； // 修改或设置属性值的内容：setAttribute var input_01 = document.querySelector(".input_01") var title = document.createAttribute("title") title.value ="标题" input_01.setAttributeNode(title) console.log(input_01.getAttribute("title")); input_01.setAttribute("value","新内容") </script> </html>

评论收藏

内容反馈