document对象(DOM)–认识DOM
文档对象模型DOM(Document Object Model)定义访问和处理 HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文 本的树结构(节点树)。
HTML文档可以说由节点构成的集合，DOM节点有:
1. 元素节点:<html>、<body>、<p>等都是元素节点，即标 签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、 DOM、CSS等文本。
3. 属性节点:元素属性，如<a>标签的链接属性href="https://www.bai du.com"。节点属性:
属性 |
说明 |
|---|---|
nodeName |
返回一个字符串，其内容是给定节点的名字 |
nodeType |
返回一个整数，这个数值代表节点的类型 |
nodeValue |
返回给定节点的当前值 |
遍历节点树:
方法 |
说明 |
|---|---|
childNodes |
返回一个数组，这个数组又指定元素节点的子节点构成 |
firstChild |
返回第一个子节点 |
lastChild |
返回最后一个子节点 |
parentNode |
返回一个给定节点的父节点 |
nextSibling |
返回给定节点的下一个节点 (兄弟节点) |
prevousSibling |
返回给定节点的上一个节点(兄弟节点) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript"> window.onload = function(){
// 1.1 通过ID获取元素对象 document.getElementById("icon").style.color = "red"; // 1.2 通过指定名称 获取节点对象的集合 var name = document.getElementsByName("baidu"); console.log(name.length) name[0].style.color = "pink" // 1.3 通过指定标签名的 节点对象的集合 var tag = document.getElementsByTagName("a") console.log(tag.length) tag[1].style.color = "green" // 1.4 通过类名的 节点对象的集合 var class_name = document.getElementsByClassName("class_a"); console.log(class_name.length) class_name[2].style.color = "aqua" //2.1 通过innerHTML 获取或替换HTML的内容 var inner = document.getElementById("inner"); console.log(inner.innerHTML) inner.innerHTML = "<p>new innerHTML</p>" console.log(inner.innerHTML) console.log(inner.innerText) inner.innerText = "innerText" console.log(inner.innerText) //2.3 改变HTML的样式 var changeStyle = document.getElementById("changeStyle") changeStyle.style.color = "red"; changeStyle.style.height = "100px"; changeStyle.style.width = "400px"; changeStyle.style.backgroundColor = "peachpuff"; changeStyle.style.fontSize = "30px"; changeStyle.style.borderRadius = "50px"; changeStyle.style.textAlign = "center"; changeStyle.style.lineHeight = "100px"; //2.9 访问节点 var ul_childnodes = document.getElementById("ul") //console.log(ul_childnodes.childNodes) //ul 的所有子节点 // id = "ul" 的节点名称 为ul ,节点类型为1(元素) console.log("访问节点 ul") console.log(ul_childnodes.nodeName) // ul节点名称 console.log(ul_childnodes.nodeType) // ul节点类型 console.log(ul_childnodes.nodeValue) // 此结果为null console.log(ul_childnodes) // 打印ul的内容 // 访问 ul 的子节点 console.log("访问 ul 的子节点") console.log(ul_childnodes.firstChild) //第一个子节点 console.log(ul_childnodes.lastChild) //最后一个子节点 console.log(ul_childnodes.childNodes) //所有子节点 console.log(ul_childnodes.childNodes[1].nodeType) //ul 下的第二个节点类型 console.log(ul_childnodes.childNodes.length)//子节点个数 console.log(ul_childnodes.childNodes[1].nodeValue) //访问 ul 的父节点 console.log("访问 ul 的父节点") console.log(ul_childnodes.parentNode) console.log(ul_childnodes.parentNode.nodeName) console.log(ul_childnodes.parentNode.nodeType) console.log(ul_childnodes.parentNode.nodeValue) console.log(ul_childnodes.parentNode.parentNode) console.log(ul_childnodes.parentNode.parentNode.parentNode) //访问 ul 里的 li 的兄弟节点 console.log("访问 ul 里的 li 的兄弟节点") console.log(ul_childnodes.childNodes) console.log(ul_childnodes.childNodes[1].nextSibling) console.log(ul_childnodes.childNodes[1].nextSibling.nodeName) console.log(ul_childnodes.childNodes[1].previousSibling) var x = document.getElementsByTagName("li")[0] console.log(x.nodeName) //找到li 的节点类型为1的兄弟节点. var y = get_nextSibling(x) console.log("找到li 的节点类型为1的兄弟节点: "+y.nodeType) // 创建元素节点createElement() ,将其添加到 ul 中 var input = document.createElement("input") input.type = "button" input.value = "创建了一个按钮" ul_childnodes.appendChild(input) //也可以用setAttribute来设置属性 var input2 = document.createElement("input") input2.setAttribute("type","button") input2.setAttribute("value","利用setsetAttribute创建的按钮") input2.setAttribute("onclick","javascript:alert('创建又一个按钮');") ul_childnodes.appendChild(input2) //appendChild(newnode) 在指定节点的最后一个子节点列表之后添加一个新的子节点。 //创建文本节点 createTextNode() (先创建一个元素节点，再在元素节点里添加文本节点) var div = document.createElement("div") div.setAttribute("className","name"); var text = document.createTextNode("hello 我是新创建的文本节点") div.appendChild(text) //insertBefore() 方法可在已有的子节点前插入一个新的子节点。 //insertBefore(newnode,node); //ul_childnodes.appendChild(div) first = ul_childnodes.childNodes[2] ul_childnodes.insertBefore(div,first) console.log(div) console.log(div.getAttribute("className")) console.log(ul_childnodes) //删除节点removeChild() --从子节点列表中删除某个节点 var nei = ul_childnodes.removeChild(ul_childnodes.childNodes[1]) console.log(ul_childnodes) console.log(ul_childnodes.childNodes[0]) //替换 console.log(ul_childnodes.childNodes[3]) ul_childnodes.replaceChild(ul_childnodes.childNodes[5],ul_childnodes.childNodes[3]) } function get_nextSibling(n){
var x = n.nextSibling; while(x.nodeType != 1){
console.log(x.nodeName) console.log(x.nodeType) x = x.nextSibling } return x; } function Hidden(){
var changeStyle = document.getElementById("changeStyle") changeStyle.style.display = "none" } function show(){
var changeStyle = document.getElementById("changeStyle") changeStyle.style.display = "block" } function changeClass(){
//控制类名(className属性) var one = document.getElementById("one") console.log("控制类名，中id 为 one 的class值为: "+one.className) one.className = "xiugai" console.log("控制类名，修改后 的class值为: "+one.className) } function reset(){
//控制类名(className属性) var one = document.getElementById("one") one.className = "name" console.log("控制类名，复原后 的class值为: "+one.className) } function haveAttribute(){
//2.6 getAttribute()方法 通过元素节点的属性名称获取属性的值。 var getA = document.getElementById("one") console.log(getA.getAttribute("class")) // setAttribute()方法 getA.setAttribute("title","增加") console.log(getA.getAttribute("width")) console.log(getA.getAttribute("title")) } </script>
</head>
<body>
<!-- 1. 获取元素 -->
<!-- 1.1 通过ID获取元素 -->
<div id="icon">
1.1 通过ID获取元素
</div>
<!-- 1.2 通过name过去 -- 指定名称节点对象 || 指定标签 -->
<div class="name" id="one" width="500px">
<a name="baidu" class="class_a" href="https://www.baidu.com">百度</a>
<a name="baidu" class="class_a" href="https://www.baidu.com">百度</a>
<a name="baidu" class="class_a" href="https://www.baidu.com">百度</a>
<button type="button" onclick="changeClass()">修改类名</button>
<button type="button" onclick="reset()">复原</button>
<button type="button" onclick = "haveAttribute()">获取属性值</button>
</div>
<!-- 2.1 通过innerHTML 获取或替换HTML的内容 语法： Object.innerHTML Object 为获取元素的对象，所以需要通过ID。 -->
<div id="inner">
<h1 class="in">innerHTML</h1>
</div>
<!-- 2.3 改变HTML的样式 -->
<div id="changeStyle">
2.3 改变HTML的样式
</div>
<!-- 2.4 隐藏 和 显示 -->
<button type="button" onclick="Hidden()">隐藏</button>
<button type="button" onclick="show()">显示</button>
<!-- 2.8 访问节点 -->
<div class="jiedian">
<ul id="ul">
<li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li>
</ul>
</div>
</body>
<!-- <script type="text/javascript"> document.getElementById("icon").style.color="red"; </script> -->
</html>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
原文地址：https://cloud.tencent.com/developer/article/2151103
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。