document对象(DOM)–认识DOM

document对象(DOM)–认识DOMdocument对象(DOM)–认识DOM文档对象模型DOM(DocumentObjectModel)定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。HTML文档可以说由节点构成的集合,DOM节点有:1.元素节点:<html>、<body>、<p>等都是元素节点,即标签。2.文本节…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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>


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/194889.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号