DOM对象基本处理方法

最新推荐文章于 2024-03-28 20:49:36 发布

913y

最新推荐文章于 2024-03-28 20:49:36 发布

阅读量219

点赞数

分类专栏： JavaWeb程序设计 Javascript 文章标签： javascript javaweb

本文链接：https://blog.csdn.net/Rlynn/article/details/115819608

版权

JavaWeb程序设计同时被 2 个专栏收录

19 篇文章 1 订阅

订阅专栏

Javascript

9 篇文章 0 订阅

订阅专栏

一、获取节点

方法	描述
getElementById()	根据id获取dom对象,如果id重复,则以第一个为准
getElementsByName()	根据name属性值获取dom对象数组,常用于多选获取值
getElementsByTagName()	根据标签名获取dom对象数组
getElementsByClassName()	根据样式名获取dom对象数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p id="p1" class="para"> 这是段落1</p>
		<p id="p1" class="para"> 这是段落2</p>
		姓名;
			<input type="text" name="txt"/><br />
		兴趣：
			<input type="checkbox" name="hobby" value="游泳"/>游泳
			<input type="checkbox" name="hobby" value="画画"/>画画
			<input type="checkbox" name="hobby" value="跳舞"/>跳舞
		<hr />
		<a href="javascript:void(0)" onclick="byId()">按照id获取</a>
		<a href="javascript:void(0)" onclick="byName()">按照name获取</a>
		<a href="javascript:void(0)" onclick="byTag()">按照标签名获取</a>
		<a href="javascript:void(0)" onclick="byClass()">按照样式名获取</a>
	</body>
	
	<script type="text/javascript">
		//按照id获取
		function byId(){
			var p=document.getElementById("p1");
			console.log(p);
		}
		
		//按照name获取
		function byName(){
			var hobbys=document.getElementByName("hobby");
			console.log(hobbys);
		}
		
		//按照标签名获取
		function byTag(){
			var inputs=document.getElementsByTagName("input");
			console.log(inputs);			
			//获取元素类型
			for(var i=0; i < inputs.length; i ++){
				console.log(inputs[i].type);
				console.log(inputs[i].value);
				if(inputs[i].type == "checkbox"){
					console.log(inputs[i].checked);//查看复选框是否被选中
				}
			}
		}
		
		//按照样式名获取
		function byClass(){
			var para=document.getElementsByClassName("para");
			console.log(para);
		}
		
	</script>
</html>

注意: href=“javascript:void(0)” 为伪协议，表示不执行跳转，而执行指定的点击事件

二、创建节点

方法	描述
createElement()	创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
createTextNode()	创建一个文本节点，可以传入文本内容
innerHTML	创建节点，直接添加到指定位置

三、插入节点

方法	描述
write(）	将任意的字符串插入到文档中
appendChild(）	向元素中添加新的子节点，作为最后一个子节点
insertBefore()	向指定的已有节点之前插入新的节点

四、间接查找节点

方法	描述
childNodes	返回元素的一个子节点的数组
firstChild	返回元素的第一个子节点
lastChild	返回元素的最后一个子节点
nextSibling	返回元素的下一个兄弟节点
parentNode	返回元素的父节点
previousSibling	返回元素的上一个兄弟节点

五、删除节点

方法	描述
removeChild()	从元素中移除子节点

913y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
DOM对象基本处理方法

DOM对象获取节点方法描述getElementById()根据id获取dom对象,如果id重复,则以第一个为准getElementsByName()根据name属性值获取dom对象数组,常用于多选获取值getElementsByTagName()根据标签名获取dom对象数组getElementsByClassName()根据i样式名获取dom对象数组<!DOCTYPE html><html> <head> &
复制链接

扫一扫

专栏目录