javascript--DOM-summary

最新推荐文章于 2023-12-04 14:42:29 发布

Asteroid 325

最新推荐文章于 2023-12-04 14:42:29 发布

阅读量140

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43846020/article/details/103136135

版权

前端专栏收录该内容

48 篇文章 0 订阅

订阅专栏

DOM

document object model 文档对象模型
（DOM是“w3c文档对象模型”，是中立于平台和语言的接口，他允许程序和脚本动态的访问和更新文档的内容，结构，和样式）
html,css页面内容
js页面行为操作
【注】DOM是打通html，css,js，壁垒的工具

DOM的分类(3种)

<div title="属性节点">测试div</div>
1.元素节点：<div></div>
2.属性节点:title="属性节点"
3.文本节点：测试div
整个文档是一个文档节点

每个 HTML 标签是一个元素节点

包含在 HTML 元素中的文本是文本节点

每一个 HTML 属性是一个属性节点

注释属于注释节点

获取元素节点

id                document.getElementById()
tagName         node.getElementsByTagName()
name            document.getElementsByName()
className        document.getElementsByClassName()

查找元素节点

方法一： document.getElementById(id);

通过当前元素节点的id,获取相应元素节点
元素节点属性：通过这个节点对象，访问它的一系列属性
访问得到的节点.id
得到的节点.title
得到的节点.className
得到的节点.style 包括[ 得到的节点.style.width/ 得到的节点.style.height/ 得到的节点.style.backgroundColor-----]

HTML属性的属性
属性              说明
id               元素节点id的名称
title             元素节点的title属性值
style            css内联样式属性值
className          css元素的类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){//在页面加载完成以后执行的函数
  var odiv=document.getElementById("div1");
				alert(odiv);
				
			}
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>
结果：
[object HTMLDivElement]

tagname:获取元素节点的标签名
eg.【放在上述代码】
alert(odiv.tagname);----是DIV
innerHTML:获取元素节点标签间的内容，解析标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
	var odiv2=document.getElementById("div2");
]	alert(odiv2.innerHTML);//结果:<em>协议</em>
			}
		</script>
	</head>
	<body>
		<div id="div2"><em>协议</em></div>
	</body>
</html>

在style样式中，background-color访问的时候，需要将-去掉然后将后续单词的首字母大写
访问class要写className

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">		
        	window.onload=function(){
		   var odiv3=document.getElementById("div3");
		   alert(odiv3.style.backgroundColor);//red
		   alert(odiv3.style);//[object CSSStyleDeclaration]
		   alert(odiv3.style.width);//300px
		   alert(odiv3.id);//div3
		   alert(odiv3.title);//hello
		   alert(odiv3.className);//box
		   odiv3.style.width="400px";//设宽度为400px
		   odiv3.style.backgroundColor="blue";//设背景颜色为蓝色
		   odiv.title="world";//设标题为world
		   odiv.className="oxb";//设class为oxb
			
			}
			//这些值可以在浏览器右键检查元素查看
		</script>
	</head>
	<body>
		
<div id="div3" title="hello" class="box" style="width:300px;height:300px;background-color: red;">
			<em>协议</em>
		</div>
	</body>
</html>

方法二： getElementsByTagName()

参数：标签名
功能：获取当前页面上所有符合该标签名的标准的元素节点
返回值：一个装有符合条件的元素节点的数组
node.getElementsByTagName()从node结点开始，找出所有符合条件的元素节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload=function(){
		
		var alis=document.getElementsByTagName("li");
			alert(alis);//[object HTMLCollection]数组
		  alert(alis.length);//6
			

//获取ul下的所有li标签
//先获取ul这个节点
//再node.getElementsByTagName(),从node结点开始，找出所有符合条件的元素节点，oul.getElementsByTagName("li");
			var oul=document.getElementById("ul1");
			var alis=oul.getElementsByTagName("li");
			alert(alis.length);//3
		
			for(var i=0;i<alis.length;i++){
				alert(alis[i].innerHTML);//111 222 333
			
		}
		}
		</script>
	</head>
	<body>

		<ul id="ul1">
			<li>111</li>
			<li>222</li>
			<li>333</li>
		</ul>
		<ol>
			<li>444</li>
			<li>555</li>
			<li>666</li>
			
		</ol>
	</body>
</html>

方法3：document.getElementsByName()

参数：name的值
返回值:装有符合条件的元素节点的数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload=function(){
		var nodes=document.getElementsByName("hello");
		alert(nodes);//[object NodeList]
		alert(nodes.length);//3
		//注意：name属性一般情况下只有文本输入框的元素节点才有
		
		1.var odiv=document.getElementById("div4");
		2.var nodes=odiv.getElementsByName("hello");//错的
		3.alert(nodes.length);
		这三行不支持不能这么写，不能写node.getElementsByName(" ");
		}
		</script>
	</head>
	<body>
		<div name="hello" id="div4"></div>
		<span name="hello"></span>
	<div name="hello" id="div5"></div>
	</body>
</html>

方法4：node.getElementByClassName

低版本的IE不支持
功能：获取node节点下，所有符合条件的元素节点
参数：class
返回值：所有符合条件的元素节点组成的数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload=function(){
		
		// var nodes=document.getElementsByClassName("box");
		// alert(nodes);//[object HTMLCollection]
		// alert(nodes.length);//3
		// for(var i=0;i<nodes.length;i++)
		// alert(nodes[i].innerHTML);//     222 777 555
		
		// 
		
		//获取ul下的class为box的元素节点
		var oul=document.getElementById("ul1");
		var nodes=oul.getElementsByClassName("box");
		for(var i=0;i<nodes.length;i++){
			alert(nodes[i].innerHTML);		//222 777
		}
		
		}
		</script>
	</head>
	<body>
	
		<ul id="ul1">
			<li>111</li>
			<li class="box">222</li>
			<li>333</li>
			<li class="box">777</li>
		</ul>
		<ol>
			<li>444</li>
			<li class="box">555</li>
			<li>666</li>
			
		</ol>
	</body>
</html>

–封装函数，封装一个兼容的办法，使IE与其他浏览器都可以用

Asteroid 325

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript--DOM-summary

DOMdocument object model 文档对象模型（DOM是“w3c文档对象模型”，是中立于平台和语言的接口，他允许程序和脚本动态的访问和更新文档的内容，结构，和样式）html,css页面内容js页面行为操作【注】DOM是打通html，css,js，壁垒的工具DOM的分类(3种)<div title="属性节点">测试div</div>1.元素节...
复制链接

扫一扫

专栏目录