DOM方法

最新推荐文章于 2022-06-26 17:42:59 发布

Yhaomin

最新推荐文章于 2022-06-26 17:42:59 发布

阅读量109

点赞数 2

分类专栏： JavaScript js

本文链接：https://blog.csdn.net/weixin_50993428/article/details/117301979

版权

js 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

JavaScript

12 篇文章 0 订阅

订阅专栏

获取元素

getElementById() 返回带有指定 ID 的元素
getElementsByTagName() 返回指定标签名的元素
getElementsByClassName() 返回指定类名的元素

DOM节点

appendChild() 把新的子节点添加到指定节点。

			function add(){
				var aObj=document.createElement("a");
				aObj.href="http://sohu.com";
				aObj.target="_blank";
				
				// 方法二
				aObj.innerHTML="<img src='../img/sohu.jpg' width='50' height='50' alt='sohu'>";
				
				/*
				方法一
				var img=document.createElement("img");
				img.src="../img/sohu.jpg";
				img.width="50";
				img.height="50";
				img.alt="sohu";
				aObj.appendChild(img); */
				
				var content=document.getElementById("content");
				content.appendChild(aObj);
			}

		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br>
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br>
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br>
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br>
		<div class="content" id="content"></div>
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb <br>
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb <br>
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb <br>
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb <br>
		<a href="javascript:add();">增加img_link</a><br>

removeChild() 删除子节点。

insertBefore（）在指定的子节点前面插入新的子节点。

createElement（）创建属性节点

createTextNode() 创建文本节点

<style type="text/css">
			.content{width: 400px;overflow-y: scroll;border: 1px solid #ccc;height: 300px;}
			a{display: inline-block;margin:0 10px 10px 0;position: relative;width: 50px;height: 50px;line-height: 50px;text-align: center;border: 1px solid #ccc;text-decoration: none;}
			body>a{width: 800px;border: none;text-align: left;}
			a img:last-child{position: absolute;right: 5px;top: 5px; z-index: 2315684654;}
		</style>
<script>
			function add(){
				var colors=["yellor","red","orange","green","pink","purple","aqua"]
				
				var con=document.getElementById("content");
				var sec=document.getElementById("sec");
				var aObj=document.createElement("a");
				aObj.href="#";
				// aObj.innerHTML="<img src='../img/sohu.jpg' width='50' height='50'>";
				aObj.innerHTML=Math.floor(Math.random()*10);
				aObj.style.backgroundColor=colors[Math.floor(Math.random()*7)]
				
				var imgObj=document.createElement("img"); //创建新节点
				imgObj.src="../img/close.jpg";
				aObj.appendChild(imgObj);
				
				con.insertBefore(aObj,sec);//在sec前插入aObj
				
				imgObj.onclick=function(){
					con.removeChild(aObj);//removeChild删除的是自己
				}
			}
		</script>
<body>
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br>
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br>
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br>
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br>
		<div class="content" id="content">
			<p>我是第一段</p>
			<!-- 带插入预留 -->
			<p id="sec">我是第二段</p>
		</div>
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb <br>
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb <br>
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb <br>
		bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb <br>
		<a href="javascript:add();">增加img_link</a><br>
	</body>

setAttribute() 设置/修改属性

.pra{
				width: 400px;height: 400px;position: absolute;
				left: calc(50% - 200px);top: calc(50% - 200px);
				background-color: orangered;text-align: center;line-height: 200px;
			}
<body onload="showAttr()">
		<p></p>
		<script>
			function showAttr(){
				var p=document.createElement("p");
				var text=document.createTextNode("快来升级的反馈里的房价款");
				p.appendChild(text);
				document.body.appendChild(p);
				
				var pObj=document.getElementsByTagName("p")[0];
				pObj.setAttribute("id","pra");//setAttribute("属性名","属性值")
				pObj.setAttribute("class","pra");
				
			}
		</script>
	</body>

getAttribute() 返回指定的属性值/获取属性值

<a href="javascript:void(0);"  title="搜狐" onclick="showAttr()" id="link">搜狐</a>
		<script>
			function showAttr(){
				var linkObj=document.getElementById("link");
				console.log(linkObj.getAttribute("title"));
				console.log(linkObj.title);
			}
		</script>

createAttribute() 创建属性节点。

<img id="pic" >
		<script>
			var imgObj=document.getElementById("pic");
			var srcAtt=document.createAttribute("src"); //01 创建属性
			srcAtt.value="../img/sohu.jpg"; // 02 设置属性值
			imgObj.setAttributeNode(srcAtt); // 03 添加属性节点
			
		</script>

Yhaomin

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
DOM方法

获取元素getElementById() 返回带有指定 ID 的元素getElementsByTagName() 返回指定标签名的元素getElementsByClassName() 返回指定类名的元素DOM节点appendChild() 把新的子节点添加到指定节点。 function add(){ var aObj=document.createElement("a"); aObj.href="http://sohu.com"; aObj.target="_blan
复制链接

扫一扫

专栏目录