JavaScript交互式页面设计——文档对象模型

最新推荐文章于 2024-08-27 09:41:07 发布

讨厌睡不着

最新推荐文章于 2024-08-27 09:41:07 发布

阅读量644

点赞数

分类专栏： JavaScript 文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_62296995/article/details/122073904

版权

JavaScript 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

<一>.文档对象模型的简介

DOM(Document Object Model)是文档对象模型的简称，只关注浏览器文档部分，HTML文档每个成分都可以看做节点，即HTML文档核心操作为查看、新增、删除、替换节点，整个文档是一个文档节点，标签元素是一个元素节点，属性是一个属性节点，文本是一个文本节点，注释是一个注释节点，文档中每个节点都存在着联系，类似一张家族图谱。

<二>.dcoument对象常用属性

1.bgColor:文档背景色

2.fgColor:文档前景色

3.title:文档标题

<body>
		<h3>我的一个HTML页面</h3>
		<script>
			document.title="我的一个HTML页面";
			document.fgColor="red";
			document.bgColor="blue";
		</script>
	</body>

<三>.document对象查找页面元素节点

1.getElementById():通过ID查找页面元素

2.getElementByName():通过name查找页面元素(返回一个数组，索引从0开始)

3.getElementByTagName():通过标签名查找页面元素(返回一个数组，索引从0开始)

4.getElementByClassName():通过类名查找页面元素(返回一个数组，索引从0开始)

<body>
		<ul>
			<li id="test">1</li>
			<li class="thetest">2</li>
			<li class="thetest">3</li>
		</ul>
		<input type="button" name="btn" value="1" />
		<input type="button" name="btn" value="2" />
	</body>
	<script>
		var test = document.getElementById("test");
		var arr1 = document.getElementsByClassName("thetest");
		var arr2 = document.getElementsByTagName("li");
		var arr3 = document.getElementsByName("btn");
		
		for (var i = 0; i < arr3.length; i++) {
		document.write(	arr3[i].value+"<br />");
		}
	</script>

<四>.document对象改变HTML

<1>.使用document对象改变HTML输出流: document.write("输出的内容")

<2>.使用document对象改变HTML内容：HTML对象.innerHTML = HTML内容

<3>.使用document对象改变HTML样式：HTML对象.style.属性名 = 属性值

<4>.使用document对象改变HTML属性：HTML对象.属性 = 属性值

<body>
		<p id="thep"></p>
		<img src= "../img/demo1.jpg" width="200px" height="50px"/>
		<script>
			//document对象改变输出流
			document.write("改变HTML输出流内容");
			//document对象改变HTML内容
			document.getElementById("thep").innerHTML = "我是段落标签";
			//document对象改变样式
			document.getElementById("thep").style.fontSize = "20px";
			//document对象改变属性值
			document.getElementsByTagName("img")[0].src = "../img/demo2.jpg";
		</script>
	</body>

说明：每个HTML对象都有用于访问CSS的style属性，style对象中包含一系列与CSS对应的属性，style对象属性与CSS属性命名不同，style属性少了“ - ”，并且第二个单词开始首字母大写。例如CSS中background-color对应style中backgroundColor

<五>.DOM节点操作

<1>.如果不知道父元素的id、tag、name,可以通过元素在之间的关系来访问

<2>.节点属性

1.parentNode:当前节点的父节点

2.childNodes:当前节点的所有子节点（返回一个子节点数组）

3.firstNode：当前节点的第一个子节点

4.lastNode:当前节点的最后一个子节点

5.previousSibLing:当前节点的上一个兄弟节点

6.nextSibLing:当前节点的下一个兄弟节点

<body>
		<div id="test">
			<p>第一段落</p>
			<p>第二段落</p>
		</div>
		<input type="button" value="子节点" onclick="theChild()"/>
		<input type="button" value="父节点" onclick="theParent()"/>
		<script>
			function theChild(){
				var div1 = document.getElementById("test");
				var child = div1.childNodes;
				for (var i = 0; i < child.length; i++) {
					//nodeType==1表示元素节点，2表示属性节点，3表示文本节点
					if(child[i].nodeType==1){
						child[i].style.color = "red";
					}
				}
			}
			function theParent(){
				var div2 = document.getElementById("test");
				var thebody = div2.parentNode;
				thebody.style.backgroundColor = "pink";
			}
		</script>
	</body>

<3>.动态添加节点和删除节点

1.createElement(): 创建新节点，并使用appendChild()将节点添加到子节点末尾

2.removeElement():删除子节点，只能从父节点中删除子节点

<body>
		<input type="button" value="添加节点" onclick="insertNode()" />
		<input type="button" value="删除节点" onclick="delNode()" />
		<p>
			<h3>请选择颜色：</h3>
			<select id="sel" onchange="changeColor(this)"></select>
		</p>
		<script>
			var sel = document.getElementById("sel");

			function insertNode() {
				//红色
				var op1 = document.createElement("option");
				op1.value = "red";
				op1.innerHTML = "红色";
				sel.appendChild(op1)
				//蓝色
				var op2 = document.createElement("option");
				op2.value = "blue";
				op2.innerHTML = "蓝色";
				sel.appendChild(op2)
				//粉色
				var op3 = document.createElement("option");
				op3.value = "pink";
				op3.innerHTML = "粉色";
				sel.appendChild(op3)
			}

			function delNode() {
				sel.parentNode.removeChild(sel);
			}

            function changeColor(obj) {
				document.bgColor = obj.value;
			}
	
		</script>
	</body>

说明： function changeColor(){
                   document.bgColor = this.value;
                   }
           //此时的this表示window对象，而不是select中选择的下拉框

讨厌睡不着

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript交互式页面设计——文档对象模型

<一>.文档对象模型的简介DOM(Document Object Model)是文档对象模型的简称，只关注浏览器文档部分，HTML文档每个成分都可以看做节点，即HTML文档核心操作为参看、新增、删除、替换节点，整个文档是一个文档节点，标签元素是一个元素节点，属性是一个属性节点，文本是一个文本节点，注释是一个注释节点，文档中每个节点都存在着联系，类似一张家族图谱。<二>.dcoument对象常用属性1.bgColor:文档背景色2.fgColor:文档前景色3.ti
复制链接

扫一扫