DOM文档对象模型

最新推荐文章于 2024-05-12 16:13:35 发布

好吃的都给你呀

最新推荐文章于 2024-05-12 16:13:35 发布

阅读量102

点赞数

分类专栏： #前端思维框架文章标签： DOM

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_39565202/article/details/103375752

版权

#前端思维框架专栏收录该内容

18 篇文章 0 订阅

订阅专栏

DOM Document Object Model 文档对象模型，HTML页面中的内容加载到内存，在内存中形成一个DOM对象。DOM用来操作页面上的内容。DOM本质上就是BOM中的document。

DOM文档对象模型

根据元素属性获得元素

document.getElementById(“标签id属性值”) 根据标签id属性值获取。非常常用！！！

document.getElementsByName(name) 根据name获得元素，返回数组

document.getElementsByTagName(tagName) 根据标签名获得元素，返回数组

node.getElementsByTagName(tagName) 根据标签名获得元素，返回数组

document.getElementsByClassName() 根据标签class属性获取元素（IE8以前没有支持）

访问属性

（1）获得属性值

语法

var value = node.property;

示例代码

var name = document.getElementById(‘username’).value;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//因为在浏览器加载过程中，会从上往下加载，所以在加载到这里的时候，如果不加onload，会找不到下面的元素
			//所以这种获取元素内容的语句需要放到onload中，等待加载完再运行
			onload=function(){
				//方式1
				var name = document.getElementById("aaa").innerHTML;
				alert(name);
				//方式2
				var name2 = document.getElementById("bbb");
				alert(name2.innerHTML);
			}
		</script>
	</head>
	<body>
		<div id="aaa"">aaaa</div>
		<div id="bbb"">bbbb</div>
	</body>
</html>

（2）给元素的某个属性赋值

node.property=value;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			onload=function(){
				var dd = document.getElementById("d1");
				alert(dd.innerHTML);
				dd.innerHTML="我是aaa";
				alert(dd.innerHTML);
			}
		</script>
	</head>
	<body>
		<div id = "d1">aaa</div>
	</body>
</html>

例子：全选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function All(){
				var course = document.getElementsByName("course");
				for(var i=0;i<course.length;i++){
					course[i].checked=true;
//					course[i].checked="checked";
				}
			}
			function NoAll(){
				var course = document.getElementsByName("course");
				for(var i=0;i<course.length;i++){
					course[i].checked=false;
//					course[i].checked="";
				}
			}
			function ChoOther(){
				var course = document.getElementsByName("course");
				for(var i=0;i<course.length;i++){
					if(course[i].checked==false)
						course[i].checked=true;
					else
						course[i].checked=false;
				}
			}
		</script>
	</head>
	<body>
		<input type="checkbox" value="语文" name="course"/>语文
		<input type="checkbox" value="数学" name="course" />数学
		<input type="checkbox" value="英语" name="course" />英语
		<input type="button" value="全选" onclick="All();" />
		<input type="button" value="全不选" onclick="NoAll()" />
		<input type="button" value="其他" onclick="ChoOther()" />
	</body>
</html>

修改CSS样式

规则：一个单词的css属性，在js中写法相同。多个单词的css属性css中使用 - js中使用驼峰形式。

css属性 javascript写法

background-color backgroundColor

font-size fontSize

z-index zIndex

color color

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.aaa{
				width: 150px;
				height: 100px;
			}
			.bbb{
				width: 300px;
				height: 300px;
			}
		</style>
		<script>
			function f1() {
				document.getElementById("tt").style.backgroundColor="red";
			}
			function f2(){
				document.getElementById("tt").style.color="green";
			}
			function f3(){
				document.getElementById("tt").style.fontSize="20px";
			}
			function f4(){
				document.getElementById("tt").style.fontWeight=1000;
			}
			function f5(){
				document.getElementById("tt").style.fontFamily="楷体";
			}
			function f6(){
				document.getElementById("tt").className="bbb";
			}
			
			function showImg(){
				document.getElementById("img").style.display="inline";
			}
			function hideImg(){
				document.getElementById("img").style.display="none";
			}
		</script>
	</head>
	<body>
		<input type="button" value="改变背景颜色为红色" onclick="f1()" />
	   <input type="button" value="改变字体颜色" onclick="f2()" />
	   <input type="button" value="改变字体大小" onclick="f3()" />
	   <input type="button" value="改变字体粗细" onclick="f4()" />
	   <input type="button" value="改字体为楷书" onclick="f5()" /> 
	   <input type="button" value="改变文本框大小" onclick="f6()" />
	   <hr/>
	   <textarea id="tt" class="aaa">默认的值...</textarea>
	   <hr/>
	   <input type="button" value="显示图片" onclick="showImg()" />
	   <input type="button" value="隐藏图片" onclick="hideImg()" />
	   <img src="../img/11.jpg" id="img" style="display:none" width="150px" height="200px"/>
	</body>
</html>

innerHTML和innerText

var str = node.innerHTML; // 取值获取标签内的全部html内容

node.innerHTML=""; //赋值

var str = node.innerText; //取值获取标签内的文本内容

node.innerText = ""; //赋值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
				function show(){
					var str2 = document.getElementById("dd").innerText;
					alert(str2);
				}
				function getText(){
					show();
					var str = document.getElementById("dd").innerHTML;
					alert(str);
				}
				function run(){
					getText();
					var str1 = "<ul><li>物理</li><li>化学</li><li>生物</li></ul>";
					document.getElementById("dd").innerHTML+=str1;
				}
		</script>
	</head>
	<body>
	<input type="button" value="执行语句" onclick="run()" />
	<hr />
	<div id="dd">
		<ul>
			<li>语文</li>
			<li>数学</li>
			<li>英语</li>
		</ul>
	</div>
	</body>
</html>