JS基础8（DOM）

最新推荐文章于 2024-08-27 15:45:31 发布

Alley_h.

最新推荐文章于 2024-08-27 15:45:31 发布

阅读量89

点赞数

分类专栏： js 文章标签： html javascript html5

本文链接：https://blog.csdn.net/weixin_47794734/article/details/120083595

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

DOM

DOM document object model 文档对象模型
【介绍】DOM中的三个字母，D（文档）可以理解为整个Web加载的网页文档；O（对象）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对象；M（模型）可以理解为网页文档的属性结构
【注】“W3C 文档对象模型（DOM）是中立于平台和语言的接口，程序和脚本动态地访问和更新文档的内容、结构和样式”

html css 页面内容
js 页面行为操作
【注】DOM是打通html、css和js壁垒的一个工具
在这里插入图片描述
2. DOM中节点种类一共有三种
【注】在JS中所有节点都是对象

测试DIV

元素节点

属性节点 title = "属性节点" 文本节点测试DIV 3. 查找元素节点的方法（1）document.getElementById(id); 【功能】通过当前元素节点的id，获取对象元素节点 window.onload是在页面加载完成以后执行的函数（2）元素节点属性通过这个节点对象，访问它的一系列属性 tagName 获取元素节点的标签名 innerHTML 获取元素节点标签间的内容解析标签

window.onload = function(){ //在页面加载完成以后执行的函数
	var oDiv = document.getElementById("div1");
	alert(oDiv.tagName); //DIV
}

<div id = "div1"></div>

window.onload = function(){ //在页面加载完成以后执行的函数
	var oDiv = document.getElementById("div1");
	alert(oDiv.innerHTML);//<em>协议</em>
	oDiv.innerHTML = "<h1>我</h1>"
}

<div id = "div1"><em>协议</em></div>

（3）HTML属性的属性
id
title
style
className 在获取class，不能直接class，必须使用className
访问这些属性：
元素节点.属性名
在这里插入图片描述

window.onload = function(){ //在页面加载完成以后执行的函数
	var oDiv = document.getElementById("div1");
	alert(oDiv.id); //div1
	alert(oDiv.title);//hello
	alert(oDiv.class);//undefined
	alert(oDiv.className);//box
	alert(oDiv.style);//[object CSS2Properties] 样式对象
	alert(oDiv.style.width);//300px 
	//也可以通过样式进行修改
	oDiv.style.width ="400px"
	}
	<div id= "div1" title = "hello" class = "box" style ="width:300px;height:300px;background-color:red"><em>协议</em></div>

在style样式中
background-color 使用 - 连接的属性访问的时候，需要将 - 去掉，然后将后续单词的首字母大写

alert(oDiv.style.backgroundColor);
//进行修改的时候也可以
oDiv.style.backgroundColor = "blue";

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

window.onload = function(){
	//获取当前页面上所有li标签
	var aLis = document.getElementsByTagName("li");
	alert(aLis);//[object HTMLCollection]是一个数组
	alert(aLis.length);//8
	//获取ul下的所有的li标签
	var oUl = document.getElementById("ul1");
	var aLis = oUl.getElementsByTagName('li');
	alert(aLis.length); //4
	for (var i= 0;i<aLis.length;i++){
		alert(aLis[i].innerHTML);

	//获取第一个 元素
	①alert(aLis[i]);
	②alert(aLis.item(i));
	③alert(aLis.item(i).innerHTML);
	
	}
}
<body>
	<ul id="ul1">
		<li>11111</li>
		<li>22222</li>
		<li>33333</li>
		<li>44444</li>
	</ul>
	<ol>
		<li>55555</li>
		<li>66666</li>
		<li>77777</li>
		<li>88888</li>
	</ol>
</body>

（5）获取元素节点的方法2
getElementsByName
document.getElementsByName()
参数：name的值
返回值：装有复合条件的元素节点的数组
【注】documentByNames只能在document下，不能在某个节点下
【注】name属性一般情况下，只有文本输入框的元素节点才有

window.onload = function(){
	var nodes = document.getElementByName("hello");
	alert(nodes);//[object NodeList]
	alert(nodes.length);//3
}


<div name= "hello"></div>
<div name = "hello"></div>
<input name = "hello"></div>

window.onload = function(){
	var oDiv = document.getElementById("div1");
	var nodes = oDiv.documentByNames("hello");//会报错，documentByNames只能在document下，不能在某个节点下
	alert(nodes);//[object NodeList]
	alert(nodes.length);//3
}


<div name= "hello"></div>
<div name = "hello"></div>
<input name = "hello"></div>

<div id="div1">
	<span name = "hello"></span>
</div>

（6）获取元素节点的方法 3
getElementByClassName
node.getElementByClassName()
参数：class
功能：获取node节点下，所有符合条件的元素节点
返回值：所有符合条件的元素节点组成的数组
【注】getElementsByClassName在低版本IE浏览器不支持

window.onload = function(){
	var nodes = document.getElementsByClassName("box");
	alert(nodes);//object HTMLCollection
	alert(nodes.length);//4

for(var i = 0; i<nodes.length;i++){
	alert(nodes[i].innerHTML);
	//22222
	//44444
	//55555
	//77777
} 
}

<ul id="ul1">
		<li>11111</li>
		<li class = "box">22222</li>
		<li>33333</li>
		<li class = "box">44444</li>
	</ul>
	<ol id= "ol1">
		<li class = "box">55555</li>
		<li>66666</li>
		<li class = "box">77777</li>
		<li>88888</li>
	</ol>

window.onload = function(){
	//获取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);
	//22222
	//44444

} 
}

<ul id="ul1">
		<li>11111</li>
		<li class = "box">22222</li>
		<li>33333</li>
		<li class = "box">44444</li>
	</ul>
	<ol id= "ol1">
		<li class = "box">55555</li>
		<li>66666</li>
		<li class = "box">77777</li>
		<li>88888</li>
	</ol>

window.onload = function(){
	//获取ul下的class为box的元素节点
	var oUl = document.getElementById("ul1");
	var nodes = getElementsByClassName(oUl,"box");
for(var i = 0; i<nodes.length;i++){
	alert(nodes[i].innerHTML);
	//22222
	//44444

} 
}

封装函数，封装一个兼容的办法
* 通配符   任意类型的元素节点
function elementByClassName(parent,class){
	//<1>找到parent下所有的元素节点
	var nodes = parent.getElementByTagName('*');
	var result = [];//用记录符合条件的元素节点
	//<2>如果符合条件，添加到数组中
	if(node[i].className == classStr){
		result.push(node[i]);
	}
return result;
}

(7)获取当前样式

#div1{
	background-color:red;
}

window.onload = function(){
	var oDiv = document.getElementById("div1");
	alert(oDiv.style.width);//300px
	alert(oDiv.style.backgroundColor);//获取不到
	【注】只能找到行间的css样式
	
	//获取当前有效样式
	getComputedStyle(元素节点)[获取样式类型]
}

<div id = "div1" style = "width:300px;height:300px"></div>

div{
	background-color:red;
	width:300px;
}
#div1{
	background-color:red;
	width:400px;
}

window.onload = function(){
	var oDiv = document.getElementById("div1");
	
	/*获取当前有效样式
	getComputedStyle(元素节点)[获取样式类型]  火狐/谷歌/safari支持*/

	
	alert(getComputedStyle(oDiv)["width"]);//400px   id比name的优先级要高
}

<div id = "div1" style = "height:300px"></div>

	/*IE浏览器下获取当前样式
	元素节点.currentStyle[获取样式类型];
	【注】浏览器兼容*/
	div{
	background-color:red;
	width:300px;
	}
	#div1{
		background-color:red;
		width:400px;
	}
window.onload = function(){
	alert(getStyle(oDiv,"width"); //400px
	}
	//获取当前样式的兼容函数
	function getStyle(elem,attr){
		return elem.currentStyle ? elem.currentStyle[attr] : getComputedStyle(elem)[attr];
	}

（8）总结
id document.getElementById()
tagName node.getElementsByTagName()
name document.getElementsByName()
className document.getElementsByClassName()

通过封装函数简化上述的操作
封装一个函数，可以拥有上述几种获取元素节点的功能
【注】在css选择器
#id 通过id获取元素节点
.class 通过className获取元素节点
tagName 通过tagName获取元素节点
name=xxx 通过name获取元素节点

function $(vArg){
	//<1>对参数进行区分
	switch(vArg[0]){
		case "#"://id
		return document.getElementById(vArg.substring(1));
		break;
		case "."://className
		return elementByClassName(document,vArg.substring(1));
		break;
		default: 
		//对参数的前五个字符，进行判断
		var str = vArg.substring(0,5);
		if( str == "name="){//name
			return document.getElementByName(vArg.substring(5));
		}else{
			return document.getElementByTagName(vArg);
		}
		break;
		
	}
}

function elementByClassName(parent,class){
	//<1>找到parent下所有的元素节点
	var nodes = parent.getElementByTagName('*');
	var result = [];//用记录符合条件的元素节点
	//<2>如果符合条件，添加到数组中
	if(node[i].className == classStr){
		result.push(node[i]);
	}
return result;
}
window.onload = function(){
	//id
	//alert($("#div1").innerHTML);//111111

	//className
	//alert($(".box").length);//2
	//alert($(".box")[1].innerHTML);//333333

	//tagName
	alert($("div").length);//4

	//	name
	alert($("name=hello")[0].innerHTML);//444444
	alert($("name=hello").length);//1
	}

<div id = "div1">111111</div>
<div class = "box">222222</div>
<div class = "box">333333</div>
<div name= "hello">444444</div>

Alley_h.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础8（DOM）

DOMDOM document object model 文档对象模型【介绍】DOM中的三个字母，D（文档）可以理解为整个Web加载的网页文档；O（对象）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对象；M（模型）可以理解为网页文档的属性结构【注】“W3C 文档对象模型（DOM）是中立于平台和语言的接口，程序和脚本动态地访问和更新文档的内容、结构和样式”html css 页面内容js 页面行为操作【注】DOM是打通html、css和
复制链接

扫一扫