DOM

最新推荐文章于 2024-05-29 14:49:47 发布

dingxiaozhuang

最新推荐文章于 2024-05-29 14:49:47 发布

阅读量152

点赞数

文章标签： dom

本文链接：https://blog.youkuaiyun.com/Judith__/article/details/108177269

版权

HTML DOM
是HTML的标准对象模型，标准编程接口，W3C标准。
HTML DOM就是关于如何获取修改、添加或删除 HTML元素的标准。
DOM结点
根据W3C的HTML DOM标准，HTML文档中所有内容都是节点：（1）文档就是文档节点（2）每个HTML元素是元素结点（3）HTML元素内的文本是文本节点（3）每个HTML属性是属性节点（4）注释就是注释结点。
HTML DOM结点数
在这里插入图片描述树中的所有节点都可以通过JavaScript进行访问，这些节点都可以被增删改。

节点父、子和兄弟
节点树中拥有层级关系
父节点拥有子节点，同级的子节点被称为兄弟。

<html>
	<head>
	<title>DOM</title>
	</head>
	<body>
		<h1>DOM练习</h1>
		<div>第一节</div>
	</body>
</html>

上面代码中

节点是根节点，没有父节点；的是的子节点，是

的父节点，和是兄弟。从上面小例子可以看出，一个节点可以拥有任意数量的子节点。

DOM的读写操作

<script>
//1.读取结点的名称和类型
var p1=document.getElementById("p1");
console.log(p1);
//节点类型返回数值（了解），元素的节点返回1，属性节点返回2，文本节点返回3，文档节点返回9
//2.读写节点的内容
var p2=document.getElementById("p2");
//2.1读节点内容innerHTML(带标签)
console.log(p2.innerHTML);
//2.2写节点内容
p2.innerHTML="2.DOM操作包含<u>查询</u>节点";
//2.3写节点内容
var p3=document.getElementById("p3");
console.log(p3.innerText);
p3.innerText="3.DOM操作";
//3.读写节点的值
var input=document.getElementById("but");
console.log(input.value);
input.value="BBB";
//4.读写节点的属性（getAttribte setAttribute）
var img=document.getElementById("img");
console.log(img.getAttribute("src"));
//删掉节点中的对应属性
img.removeAttribute("src");
console.log(img.getAttribute("src"));
//给对应的结点设置一个新的属性并赋值
img.setAttribute("src","image/06.png");
console.log(img.getAttribute("src"));
//5.通过属性名给节点添加样式
var a=document.getElementById("a1");
console.log(a.style.color);
a.style.color="pink";
console.log(a.style.color);
</script>
<body>
	<p id="p1">1.DOM操作包含读写</p>
	<p id="p2">2.DOM操作包含查询</p>
	<p id="p3">3.DOM操作包含增删</p>
	<p><input type="button" value="A" id="but" /></p>
	<p><img id="img" src="images/01.png" /></p>
	<a id="a1" href="#" style="color:pink">注册</a>
</body>

常用方法
在这里插入图片描述

DOM查询、删除节点

<script>
	windom.onload=function(){
		//根据name查询节点
		var radios=document.getElementsByName("sex");
		console.log(radios):
		//根据层次调查节点
		//1）查询节点的父亲
		var sh=document.getElementsById("sh");
		var ul=document.parentNode;
		console.log(ul);
		//2)查询节点的孩子
		var lis=ul.childNodes;
		//3)查询父节点的父节点
		var a=document;
		//4)查询节点的兄弟
		var x=document.getElementById("sh");
		var f=x.parentNode;
		var ss=f.getElementByTagName("li")[1];
	}
</script>
<body>
	<p>
		性别：
		<input type="radio" name="sex" />男
		<input type="radio" name="sex" />女
	</p>
	<ul id="city">
		<li>北京</li>
		<li id="sh">上海</li>
		<li>广州</li>
		<li>深圳</li>
		<li><a id="find">杭州</a></li>
	</ul>
</body>

联动查询

<script>
	var cities=[
				["西安市","宝鸡市","渭南市","汉中市"]
				["成都","都江堰","广元市","绵阳市"]
				["昆明市","双西版纳","丽江","大理"]
				]
	funcation province(val){
		//获取市的标签
		var city=document.getElementById("city");
		//根据下标获取所对应的省的所有市
		var cc=cities[val];
		//清除市的select标签下的所有内容
		city.innerHTML="<option>--请选择--</option>"
		//遍历此省所对应的所有市
		if(cc){
			for(var i in cc){
				var optionn=document.createElement("option");
				option.innerHTML=cc[i];
				city.appendChils(option);
			}
		}
	}
</script>
<body>
	省：<select onchange="provice(this.value)">
		<option value="-1">--请选择--</option>
		<option value="0">陕西省</option>
		<option value="1">四川省</option>
		<option value="2">云南省</option>
	市：<select>
		<option>--请选择--</option>
	</select>
<body>