DOM对象

DOM对象

科技前沿 • 2025-02-14 09:39 • 阅读 36

大家好，我是讯享网，很高兴认识大家。

概念
Document Object Model：文档对象模型，将标记语言文档的各个部分封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作（核心DOM、XML DOM、HTML DOM）
Document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
comment：注释对象
Node：节点对象，其他5个的父对象
Document对象
创建：在HTML DOM模型中可以使用window对象来获取
方法：
getElementById()：查找具有指定的唯一 ID 的元素。
getElementsByTagName()：返回所有具有指定名称的元素节点，返回值是一个数组。
getElementsByClassName()：根据class的属性值来获取元素对象们。返回值是一个数组
getElementsByName()：根据类属性值来获取元素对象们。也是返回数组

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="div1">div1</div> <div class="div2">div2</div> <div class="div3">div3</div> <input type="text" name="username"> <script> //元素名字 var divs = document.getElementsByTagName("div"); alert(divs.length);//3 //Class属性值 var div_cls = document.getElementsByClassName("div2"); alert(div_cls.length);//1 //name属性值 var names = document.getElementsByName("username"); alert(names.length);//1 </script> </body> </html>

讯享网

创建其他DOM对象
createAttribute(name)：创建拥有指定名称的属性节点，并返回新的 Attr 对象。
createComment()：创建注释节点。
createElement()：创建元素节点。
createTextNode()：创建文本节点。

讯享网var table = document.createElement("table");

NODE对象
所有DOM对象都可以称为一个节点
方法：
appendChild() 向节点的子节点列表的结尾添加新的子节点。
removeChild() 删除（并返回）当前节点的指定子节点。
replaceChild() 用新节点替换一个子节点。
属性：
parentNode 返回节点的父节点

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div{ 
     border: 1px solid red; } #div1{ 
     width: 200px; height: 200px; } #div2{ 
     width: 100px; height: 100px; } #div3{ 
     width: 100px; height: 100px; } </style> </head> <body> <div id="div1"> <div id="div2">div2</div> div1 </div> <a href="javascript:void(0)" id="del">删除子节点</a> <a href="javascript:void(0)" id="add">添加子节点</a> <!-- <input type="button" value="删除子节点" id="del">--> <script> //删除子节点 var element_a = document.getElementById("del"); element_a.onclick = function (){ 
     var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); div1.removeChild(div2); } //添加子节点 var e_add = document.getElementById("add"); e_add.onclick = function (){ 
     var div1 = document.getElementById("div1"); var div3 = document.createElement("div"); div3.setAttribute("id","div3"); div1.appendChild(div3); } var div2 = document.getElementById("div2"); var div1 = div2.parentNode; alert(div1) //超链接功能： //1.可以被点击：样式 //2.点击后跳转到href指定的url </script> </body> </html>

相关推荐