DOM文本对象模型
2022/6/6 23:21:58
本文主要是介绍DOM文本对象模型,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
DOM文档对象模型
DOM节点的分类
<div class="" id="">我是div</div> // 1.Dom节点分类 // 文本节点 ==> 我是div 所有标签显示的内容 // 属性节点 ==> class id 所有标签里面的属性 // 元素节点 ==> div 所有的标签
节点的获取
document.getElementById //通过id获取 document.getElementsByClassName //通过类名获取 document.getElementsByName // 通过name获取 document.getElementsByTagName // 通过标签名获取 document.querySelector // 获取第一个 document.querySelectorAll //获取所有 document.body //获取body
节点的属性
<script> // 元素具备的属性 // id className style // id 获取对应的id (设置) // className 获取对应的class名 // style 获取样式(设置) // title 获取title属性 // innerHtml 获取显示的内容(设置,包含html内容) // innerText 获取显示的文本(设置,不包含html内容) </script>
<body> <div class="box" id="innerbox" name="hz"></div> <script> let div = document.querySelector("div") // 获取所有的元素节点 返回的是一个伪数组 console.log(div.attributes) console.log(div.attributes.length) // 通过下标获取对应的属性节点 let id = div.attributes[1] // 通过key键值获取对应的属性节点 console.log(div.attributes["id"]) console.log(id) // 节点的几个属性 nodeName nodeType nodeValue console.log(id.nodeName) console.log(id.nodeType) console.log(id.nodeValue) </script> </body>
元素节点的方法
<div title="text"></div> <input type="text" placeholder="password"> <a href="http://4399.com"></a> <script> let div = document.querySelector("div") // 获取 console.log(div.getAttribute("title")) // 移除 div.removeAttribute("title") // 增加,修改 div.setAttribute("class","box") div.setAttribute("id","hz") // .语法获取自带的属性 console.log(document.querySelector("input").value) console.log(document.querySelector("input").type) console.log(document.querySelector("input").placeholder) console.log(document.querySelector("a").href) </script>
节点操作的方法
// 创建元素节点 createElement("标签名") let new_div = document.createElement("div") // 创建属性节点 createAttribute("class") let cla = document.createAttribute("属性名") // 设置属性节点 cla.value = "box" // 创建文本节点 createTextNode("文本内容") let text = document.createTextNode("这是一段文本") // 给new_div设置属性 setAttributeNode new_div.setAttributeNode(cla) // 给new_div添加子节点 new_div.appendChild(text) // 把new_div添加到body里面 // document.body.appendChild(new_div) let newEle = document.createElement("div") document.body.appendChild(newEle) let span = document.createElement("span") let p = document.createElement("p") // insertBefore(新元素,旧元素)在某某之前添加 new_div.insertBefore(p,text) // appendChild() 在后面追加 new_div.appendChild(span) document.body.appendChild(new_div) // 全部移除 remove() newEle.remove() // 移除对应的子节点 removeChild) new_div.removeChild(p) // 替换对应的子节点 replaceChild(元素,要替换的元素) new_div.replaceChild(p,span) // 全部替换 replaceChildren() new_div.replaceChildren("a")
this指向
<body> <button>1</button> <button>2</button> <button>3</button> <button>4</button> <button>5</button> <button>6</button> </body> <script> // this 指向调用者本身 var btn = document.querySelectorAll("button"); console.log(btn); for (var i = 0; i < btn.length; i++) { console.log(i); btn[i].onclick = function () { console.log(this); }; } setTimeout(() => { console.log(this); // 指向window }, 1000); </script>
克隆
<button>浅克隆</button> <button>深克隆</button> <div class="box"> <div class="inner"></div> </div> <script> var oBtns = document.querySelectorAll("button"); var oBox = document.querySelector(".box"); //浅克隆: 只会克隆自身结构,不会克隆子节点 oBtns[0].onclick = function () { var cloenDiv = oBox.cloneNode(false);// false浅克隆 //把克隆的div,添加到body里 document.body.appendChild(cloenDiv) } //深克隆 oBtns[1].onclick = function () { var cloenDiv = oBox.cloneNode(true);// //把克隆的div,添加到body里 document.body.appendChild(cloenDiv) } </script>
子元素节点
<ul id="box"> <li>我是第01个li</li> <li>我是第02个li</li> <li>我是第03个li</li> <li>我是第04个li</li> <li>我是第05个li</li> </ul> <script> // document.querySelectorAll // document.getElementsByTagName() // document.querySelector() var oBox = document.querySelector("#box"); //获取第一个儿子 var ele = oBox.firstElementChild || oBox.firstChild; ele.style.backgroundColor = "red"; ele.style.borderRadius = "5px"; //最后一个儿子 var ele = oBox.lastElementChild || oBox.lastChild; ele.style.backgroundColor = "pink"; //获取指定的某一个 oBox.children[2].style.backgroundColor = "green"; </script>
父节点
<div class="box"> <div class="inner"></div> </div> <script> //parentNode 顶级是 document //parentElement顶级是null // var oBox = document.querySelector(".box"); var oInner = document.querySelector(".inner"); //找父节点 找'亲'父亲 // console.log(oInner.parentNode); // oInner.parentNode.style.backgroundColor = "pink"; // oInner.parentElement.style.backgroundColor = "green"; console.log(oInner.parentNode.parentNode.parentNode.parentNode);//document console.log( oInner.parentElement.parentElement.parentElement.parentElement );//null
兄弟节点
nextSibling // 后一个 previousSibling //前一个
这篇关于DOM文本对象模型的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?