js document对象

最新推荐文章于 2024-02-02 10:42:50 发布

ReverieZH

最新推荐文章于 2024-02-02 10:42:50 发布

阅读量198

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_44035017/article/details/103190670

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

doucment对象

浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存HTML文档的所有信息

浏览器在解析HTML文档时，将HTML加载到内存中，并将内存中的HTNL转换成一个doucuent对象。我们操作HTML文档其实操作的是document文档

document

获取HTMl元素对象

（1）.直接获取方式

1.通过id


window.getElementById("某一标签的id属性值");

2.通过name属性值

window.getElementByName("某一标签的name属性值");

3.通过标签名

window.getElementByTagName("标签名");

4.通过class属性值

window.getElementByClassName("某一属性的class属性值");

（2）间接获取方式

1.父子关系


var father=document.getElementById("父标签的id属性");   首先获取父级标签



var childs=father.childNodes;              然后通过父标签的childNodes获取子标签（返回的是一个数组）

2.子父关系

var son=document.getElementById("子标签的id属性");      获取子标签

var father=son.parentNode;               通过子标签的parentNode获取父标签 （返回的不是数组，是父标签对象）

3.兄弟关系


var ele=document.getElementById("元素的标签id");         获取标签对象 

var preEle=ele.previosSibing;     //获取其前面的标签对象

var nextEle=ele.nextSibing;       //获取其后面的标签对象

二.js操作元素属性

(1)获取元素属性

1.获取固有属性
获取固有属性，也就是获取标签本来的自带的属性


元素对象名.属性名                    //返回的是元素的属性值

2.获取自定义属性
元素可以自定义属性

<input type="text" name="uname" id="uname" value="" myFiled="自定义属性"/>

比如在input标签里自定义一个标签属性myFiled

自定义属性值可以通过getAttribute方法获得

元素对象.getAttribute("自定义属性名");          //返回自定义属性值

(2)修改元素属性

1.修改固有属性值

修改固有属性值通过直接重新赋值

<input type="text" name="uname" id="uname" value=""/>


function test(){
		var in=document.getElementById("uname");
		var.type=“button”;
}

2.修改自定义属性值
修改自定义属性值要通过setAttribute方法

    setAttribute("自定义属性名","新的自定义属性值");

<input type="text" name="uname" id="uname" value="" myFiled="自定义属性"/>

function test(){
		var in=document.getElementById("uname");
		in.setAttribute("myFiled","hello");            //更改自定义属性值
}

三.js操作元素内容

(1)获取元素内容

1.返回所有内容

元素对象名.innerHTML

返回的是当前元素对象内的所有内容，它是包含HTML标签的

2.返回文本内容


元素对象名.innerText

返回的是当前元素对象内的所有文本内容，它是不包含HTML标签的


innerHTML与innerText的对比

<html>
	<head>
		<meta charset="UTF-8"/>
		<script type="text/javascript">
				function test(){
						var ele=document.getElementById("mydiv");
						var inHtmL=ele.innerHTML;
						var inText=ele.innerText;
						alert(inHtmL);
						alert(inText);
				}
		</script>
	</head>
	<body>
			<div id="mydiv">
				<b>欧文牛逼</b><br>
				<h3>无兄弟不篮球</h3><br>
			</div>
			<input type="button" onclick="test()" value="测试"/>
	</body>
</html>

在这里插入图片描述

在这里插入图片描述
可以看出innerHTML包含了所有内容，包含了标签，innerText只包含了文本内容

(2)修改元素内容


元素对象名.innerHTML="新的值"     //会将原有内容覆盖，并HTML标签会被解析
元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加效果


元素对象名.innerText="新的值"  //会将原有内容覆盖，但HTML标签不会被解析，会作为普通文本显示。


<html>
	<head>
		<meta charset="UTF-8"/>
		<style>
			#mydiv01{
				border: solid 1px;
				margin-bottom: 10px;
			}
			#mydiv02{
				border: solid 1px;
				margin-bottom: 10px;
			}
		</style>
		<script type="text/javascript">
				function test(){
						var ele=document.getElementById("mydiv01");
						ele.innerHTML="<b>加油</b>";
					    
				}
				function test2(){
						var ele=document.getElementById("mydiv02");
						ele.innerText="<b>加油</b>";
		
				}
		</script>
	</head>
	<body>
			<div id="mydiv01">
				<b>欧文牛逼</b><br>
				<h3>无兄弟不篮球</h3><br>
			</div>
			<div id="mydiv02">
				<b>欧文牛逼</b><br>
				<h3>无兄弟不篮球</h3><br>
			</div>
			
			<input type="button" onclick="test()" value="测试innerHTML"/>
			<input type="button" onclick="test2()" value="测试innerText"/>
	</body>
</html>

在这里插入图片描述
按两个按钮后

可以看出innerText不会解析标签

三.js操作元素样式

(1)通过style属性

元素对象名.style.样式名="样式值"   //添加或者修改    如果最初的样式没有赋值，则可以通过赋值实现添加

元素对象名.style.样式名=""        //删除样式

通过元素的style属性实际上就是在元素标签的style属性上进行css样式操作、

注意:：以上操作，操作的是HTML的style属性声明中的样式。而不是其他css代码域中的样式。

如果通过赋值为""删除样式，删除的只是HTML的style属性声明中的样式，并不能删除css代码域的样式

(2)通过className

通过className可以操作元素的类选择器

元素对象名.className="新的值"//添加类选择器样式或者修改类选择器样式
元素对象名.className=""//删除类样式。

<html>
	<head>
		<meta charset="UTF-8"/>
		<style type="text/css">
			#showdiv{
				width: 200px;
				height: 200px;
				border: solid 1px;
			}
			
			.common{
				width: 200px;
				height: 200px;
				border: solid 1px;
			}
			
			.common2{
				width: 200px;
				height: 200px;
				border: solid 1px;
				background-color: aqua;
			}
		</style>
		<script type="text/javascript">
					function testOperCss(){
							var showdiv=document.getElementById("showdiv");
							showdiv.style.backgroundColor="#FFA500";
							showdiv.style.border="solid 2px red";
							showdiv.style.border="";
					}
			
					function testOperCss2(){
							var div01=document.getElementById("div01");  //获取元素对象
							alert(div01.className);
							div01.className="common2";  
			
												
					}	
		</script>
	</head>
	<body>
		<h3>js操作元素的样式</h3>
		<input type="button" name="" id="" value="测试--style" onclick="testOperCss()" />
		<input type="button" name="" id="" value="测试className" onclick="testOperCss2()" />
		<hr />
		<div id="showdiv" style="border: solid 2px blue;">
			
		</div>
		<div id="div01" class="common">
			
		</div>
	</body>
</html>

四.js操作元素的文档结构

(1)新建节点

通过createElement

var 变量名=document.createElement("标签名")//返回创建的HTML元素对象

这只是创建了一个结点，并没有添加，要使用appendChild()方法追加到某一结点下

(2)增加节点

1.通过innerHTML

div.innerHTML=div.innerHTML+"内容"//增加节点

2.通过appendChild

var obj=document.createElement("标签名");
元素对象名.appendChild(obj);

<html>
	<head>
		<meta charset="UTF-8"/>
		<script type="text/javascript">
				function test(){
				
				var btn=document.createElement("input");
				btn.type="button";
				btn.value="删除";
                var br=document.createElement("br");
				var ele=document.getElementById("div1");
				ele.appendChild(btn);
				ele.appendChild(br);
				}
		</script>
	</head>
	<body>
			
			<input type="button" onclick="test()" value="测试"/>
			<div id="div1"></div>
	</body>
</html>

(3)删除节点

父节点.removeChild(子节点对象)//删除指定的子节点。