操作DOM元素(2)

最新推荐文章于 2022-12-12 11:37:34 发布

qq_42438026

最新推荐文章于 2022-12-12 11:37:34 发布

阅读量123

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_42438026/article/details/104877099

版权

四、对节点进行操作
1、查找结点
a. 采用节点之间的关系去拿根节点： document.documentElement ;
b. 采用方法去拿
document.getElementById();//id名，在实际开发中较少使用，选择器中多用class id一般只用在顶级层存在不能太过依赖id

document.getElementsByTagName();//标签名
document.getElementsByClassName();//类名
document.getElementsByName();//name属性值，一般不用
document.querySelector();//css选择符模式，返回与该模式匹配的第一个元素，结果为一个元素；如果没找到匹配的元素，则返回null
document.querySelectorAll()//css选择符模式，返回与该模式匹配的所有元素，结果为一个类数组

var div1 = document.getElementById("div1");
var p2 = document.getElementsByTagName("p");
var div2 = document.getElementsByClassName("div2");
var div3 = document.getElementsByName("div3")
var div4 = document.querySelector(".div4");
var div5 = document.querySelectorAll(".div5");

2、删除节点:
removeChild() : 采用父节点删除子节点

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);

相比于removeChild()，remove()方法不太常见，但是却非常简单。该方法不用调用其父节点，直接在当前节点使用remove()方法就可以删除该节点，无返回值
remove()方法常用于删除元素节点与文本节点，不可用于特性节点

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
child.remove();

3、创建元素节点
document.createElement() : 创建一个标签节点

 var oDiv = document.createElement("div");

所有节点都有一个ownerDocument的属性，指向表示整个文档的文档节点document；在使用createElement()方法创建新元素的同时，也为新元素设置了ownerDocument属性

4.创建属性节点
1.document.write 不常用原因是会覆盖原来的页面内容
覆盖的原理：默认情况下，页面加载会形成一个文档流，当页面所有内容加载完毕之后，这个文档流（默认的）就会消失
点出发某个时间，调用document.write向页面添加内容的时候，就会形成一个新的文档流就会覆盖原本默认的文档流
不覆盖的情况：默认文档没有关闭
覆盖的情况：默认文档已经关闭，形成了新的文档流
2.innerHTML 也不常用（性能问题在100以内差别不大）
3.官方推荐: document.createElement(“标签名”);
对象.属性=“属性值”
对象.setAttribute(属性名,属性值)
对象.getAttribute(属性名,属性值)
特点：1.默认创建的是空标签
2.创建值存在于内存中，需要手动添加到页面上
1.创建一个空标签
var h2 = document.createElement(“h2”);
console.log(h2);
设置标签属性
h2.innerHTML = “我是h2标签”;
3.添加到页面上
document.body.appendChild(h2);

<button id="btn">点击添加</button>
		
		<script type="text/javascript">
			var btn = document.getElementById("btn");
			
			btn.onclick = function(){
				
				//使用innerHTML向页面添加100个标签 //创建100个 ： 15ms 创建1000 ：1.2秒
				
//				console.time();
//				
//				for(var i = 0;i < 1000;i++){
//					//直接赋值会覆盖前面的内容，如果想添加就要使用+=
//					document.body.innerHTML += "<p>我是第"+(i+1)+"个P标签";
//				}
//				
//				console.timeEnd();
				
				//使用document.createElement添加//创建100 ： 0.6ms	创建1000 ：3ms
				console.time();
				
				for(var i = 0;i < 1000;i++){
					var p = document.createElement("p");
					p.innerHTML = "我是第"+(i+1)+"个P标签";
					document.body.appendChild(p);
				}
				
				console.timeEnd();
				
			}
		</script>

性能比较
使用innerHTML向页面添加100个标签 //创建100个： 15ms 创建1000 ：1.2秒
使用document.createElement添加//创建100 ： 0.6ms 创建1000 ：3ms

1.操作内容
1.innerHTML 用来设置或获取对象起始和激素标签内的内容(识别html标签)
2.innerText 用来设置或获取对象起始和激素标签内的内容 (IE)
textContent用来设置或获取对象起始和激素标签内的内容 (FF)
3.outerHTML 用来设置或获取包括本对象在内起始和激素标签内的内容(识别html标签)
outerText 用来设置或获取包括本对象在内起始和激素标签内的内容

	<body>
		<style type="text/css">
			button{
				border: 1px solid red;
			}
		</style>
		<div class="contain">
			1
			<span>
				2
			</span>
			3
			<p>
				4
			</p>
		</div>
		<input type="button" name="" id="" class="bu" value="按钮" />
		<script type="text/javascript">
			var bu = document.getElementsByClassName("bu");
			bu.onclick = function(){
				console.log(event.type);
			}
			var container = document.querySelector("body");
			console.log("textContent的内容是:"+container.textContent);
			//通过textContent属性可以获取指定节点的文本，以及该指定节点所包含后代节点中文本内容，也包括<script>和<style>元素中的内容（这里的不是文本而是CSS样式代码和JavaScript代码）
    	    console.log("innerText的内容是:"+container.innerText);
    	    //IE引入了node.innerText属性，该属性会获取指定节点的文本以及后代节点中的文本，不能获取<style>和<script>中的内容。
    	    console.log("innerHTML的内容是:"+container.innerHTML);
    	    //innerHTML顾名思义就是获取指定元素内的HTML内容。
    	     console.log("outerHTML的内容是:"+container.outerHTML);
    	     //outerHTML就是获取指定元素内的HTML内容包括标签。
    	      console.log("outerText的内容是:"+container.outerText);
    	       // //outerText就是获取指定元素内的HTML内容包括标签。
		</script>
	</body>

2.操作属性
1.直接操作
对象.属性
对象.属性=值 (设置、获取、添加属性(属性值))

点语法操作元素注意点
1.只能获取行内属性，不能获取行外属性
2.获取到的是带单位的字符串
3.属性可以获取也可以修改
4.获取类名用className,class是关键字

点语法获取元素的特点:
1.可以获取标准属性
2.可以获取点语法动态添加的属性
3.无法获取行内自定义属性
4.无法获取行外属性

<style type="text/css">
			#box{
				background-color: #0f0;
				height: 300px;
			}
			.two{
				margin: 30px;
			}
			.one{
				color: #00FF00;
			}
		</style>
	
		<div id="box" class="one" style="width: 100px; background-color: green;">我是div盒子</div>
		<h1 id="h1">我是标题标签</h1>
		<div id="box" class="one" www="sss" style="background-color: yellow; width: 100px;">
			我是一个div盒子
		</div>
		
		<script type="text/javascript">
			
			var box = document.getElementById("box");
			
			console.log(box.id);
			console.log(box["id"]);
			console.log(box.className);
			console.log(box.style);
			console.log(box.style.width);
			console.log(box.style.height);//如果没有这个属性 获取的是空字符串
			console.log(box.style.backgroundColor);
			box.style.backgroundColor = "red";
			//直接赋值会覆盖掉原来的样式. 
			//box.className = "two"；
			
			//需求保存2个类名 字符串连接符 + 要有一个空格
			box.className += " two";

			var box = document.getElementById("box");
			box.aaa = "bbb";
			console.log(box.aaa);//可以获取点语法动态添加的属性
			console.log(box.www);//undefined 无法获取行内自定义属性
			console.log(box.style.height);//空字符串 无法获取行外属性
		</script>

attribute属性
获取元素属性：元素.getAttribute(“属性名”);
设置元素属性：元素.setAttribute(“属性名”,属性值);
移除元素属性：元素.removeAttribute(“属性名”);
attribute获取元素的特点
1.可以获取标准属性
2.可以获取行内自定义属性(主要用来操作行内自定义属性)
3.无法获取行外属性
4.无法获取点语法动态添加的属性

			console.log(box.getAttribute("id"));
			console.log(box.getAttribute("www"));
			console.log(box.getAttribute("style.height"));//null
			console.log(box.getAttribute("aaa"));//null

			//设置元素属性
			box.setAttribute("www","123");
			
			//移除元素属性
			box.removeAttribute("class");//removeAttribute的参数是字符串，可以用"class"

qq_42438026

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
操作DOM元素(2)

四、对节点进行操作1、查找结点a. 采用节点之间的关系去拿根节点： document.documentElement ;b. 采用方法去拿document.getElementById();//id名，在实际开发中较少使用，选择器中多用class id一般只用在顶级层存在不能太过依赖iddocument.getElementsByTagName();//标签名document.g...
复制链接

扫一扫