DOM基本操作之面试必备系列有源码可以随意进行练习哈

最新推荐文章于 2022-11-15 23:21:14 发布

小白追梦

最新推荐文章于 2022-11-15 23:21:14 发布

阅读量71

点赞数

分类专栏： JS dom 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43815680/article/details/106290205

版权

JS 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

dom

5 篇文章 0 订阅

订阅专栏

1、Element 节点的一些属性
innerHTML HTML 结构写啥就识别啥
在这里插入图片描述

innerText (火狐不兼容) textContent(老版IE不好使)

2、Element节点的一些方法
ele.setAttribute();
els.getAttribute();

在这里插入图片描述

练习
有三个标签我现在需要添加每一个的this-name = ’ ’ 各自的名字

<body>       <div></div>
			<strong></strong>
			<strong></strong>
		<script type="text/javascript">

			var all = document.getElementsByTagName('*');
			for(var i = 0; i < all.length; i++){

				all[i].setAttribute('this-name', all[i].nodeName);  
				后面的这个all[i].nodName  不能加引号 变成字符串形式的  
				不然展示效果都是 this-name =‘all[i].nodeName’
			}
		</script>
</body>

在这里插入图片描述

3、练习问题

如何实现这个功能
在这里插入图片描述

<body>      
			
		<script type="text/javascript">

			var div = document.createElement("div");
			var p = document.createElement("p");
			div.setAttribute("class", "example");
			p.setAttribute("class", "slogan");
			// p.innerHTML = "豪哥贼帅！";
			var text = document.createTextNode("帅");
			p.appendChild(text);
			div.appendChild(p);
			document.body.appendChild(div);


  
		</script>
</body>

给这个代码做一个解释
在这里插入图片描述

题目封装函数insertAfter(); 功能类似insertBofore();

	<!DOCTYPE html>
<html lang = "en">
<head>
	<title>修炼之路</title>
	<meta charset="utf-8">
	<style type="text/css">
		
	</style>
</head>
<body>      
			<div>
				<i></i>
				<b></b>
				<span></span>
			</div>
		<script type="text/javascript">
			Element.prototype.insertAfter = function (targetNode, afterNode) {
				var beforeNode = afterNode.nextElementSibling;
				if(beforeNode == null){
					this.appendChild(targetNode);
				}else{
					this.insertBefore(targetNode, beforeNode);
				}
				}
				var div = document.getElementsByTagName("div")[0];
				var b = document.getElementsByTagName("b")[0];
				var span = document.getElementsByTagName("span")[0];
				var i = document.getElementsByTagName("i")[0];
				var p = document.createElement("p");

		</script>
</body>
</html>

解释一下这个舒服的写法
在这里插入图片描述

将目标节点内部的节点逆序
在这里插入图片描述

	<!DOCTYPE html>
<html lang = "en">
<head>
	<title>修炼之路</title>
	<meta charset="utf-8">
	<style type="text/css">
		
	</style>
</head>
<body>      
			
		<div>
			<i></i>	
			<b></b>
			<span></span>
		</div>
		<script type="text/javascript">
			  // 将目标节点内部的节点逆序
     Element.prototype.invertedChild = function(){
        var child = this.children;
             len = child.length;
            
            for (var i = len - 2; i >= 0; i--){
           this.appendChild(child[i]);
            }
        return this;
     }
     var div = document.getElementsByTagName('div')[0];
		</script>
</body>
</html>

在这里插入图片描述