DOM

最新推荐文章于 2023-09-05 09:26:32 发布

HelloGad

最新推荐文章于 2023-09-05 09:26:32 发布

阅读量171

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/HelloGad/article/details/103831883

什么是DOM

DOM全拼为Document Object Model（文档对象模型）是一种用于HTML和XML文档的编程接口，它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。核心DOM 能够操作所有结构化文档（HTML XML）。

三大属性

1:nodeType 节点类型 typeof为number

document   9
element    1
attrbute   2
text       3

2:nodeName 节点名 typeof为string

document  #document
标签元素  全大写的标签名
文本节点  #text

3:nodeValue 节点值

document  null
标签元素   null
attribute  属性值
text       文本的内容

例如：
document.documentElement   <html>
document.head              <head>
document.body              <body>

Node的关系

分别为节点的父子关系与兄弟关系
1：父子关系

node.parentNode    获得node的父节点
node.childNodes    获得node的直接子代节点
node.firstChild    获得node下的第一个子节点
node.lastChild     获得node的最后一个子节点

2:兄弟关系

node.previousSibling      返回当前节点的前一个兄弟节点
node.nextSibing              返回当前节点的下一个兄弟节点

Element的关系

分别为元素的父子关系与兄弟关系
1.父子元素

elem.parentElement 返回父亲元素的对象
elem.children      返回子元素对象集合
elem.firstElementChild   返回第一个子元素对象
elem.lastElementChild    返回最后一个子元素对象

2.兄弟元素

elem.previousElementSibing   返回当前元素的前一个兄弟元素
elem.nextElementSibing       返回当前元素的下一个兄弟元素

DOM的查找元素对象的六种方式

1： document.getElementById()   按id查询
2： document.getElementsByTagName()  按标签名查询
3： document.getElementsByClassName()  按classname查询
4：document.getElementsByName()  按name值查询
5：document.querySelectorAll()  查询所有要查找的元素
6：document.querySelector()  查询要查找的元素

操作DOM树的两种方法：

DOM的Attribute属性用法

attribute 与property的区别：
首先在定义上更准确的来说，Attribute和Property分别为特性和属性，作为区别。
其次，这样理解下来，我们知道Attribute就是DOM节点自带属性，例如我们在HTML中常用的id,class,src,title,alt等。而Property则是这个DOM元素作为对象，其附加的属性或者内容，例如childNodes，firstChild等。
另外我们常把他们弄混淆是因为，有些例如id,class,title常用的Attribute已经被作为Property附加在DOM对象上，也可以取值和赋值。但是自定义的Attribute就不能了。
attribute是标签上出现的属性
property是保存在内容中对象的属性
prop( )是针对Dom元素属性，attr( )针对HTML元素属性，和attribute与property区别一样。
用于设置的属性值类型不同
attr()函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法，将其转为字符串类型。
prop()函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型。

查询指定属性的值 getAttribute()
修改属性值setAttribute()
删除属性removeAttribute()
元素是否包含属性hasAttribute()

例子：

<a href="https://www.baidu.com" id="Aid" class="Aclassname"></a>
<br>
<a data-log = "onclick—One">点击一下</a>
<script>
	var link = document.getElementById('Aid');
	//查询指定属性的值
	console.log(Aid.getAttribute("href"));
	// 修改属性值
	// Aid.setAttribute("href", "#top");
	// 删除属性
	// Aid.removeAttribute("class");
	// 判断是否包含属性
	var bool = Aid.hasAttribute("title");
	console.log(bool);//false
	// 以上操作都是HTML标准属性
	// 自定义的属性名
	var a = document.getElementsByTagName("a")[1];
	a.onclick = function(){
	   //可以判断用户点击了多少次
		console.log(this.getAttribute('data-log'));
	}

HTMLDOM直接访问

首先得获取元素，然后再访问它的属性并操作。

例子：

<a href="https://www.bailiban.com" id="Aid" class="Aclassname"></a>
<script>
    var link = document.getElementById('Aid');
    //修改元素属性值
	Aid.className;
	Aid.href;
	Aid.title;
	Aid.name = "a1";
	// 判断是否包含属性值
	Aid.title != "";
	// 删除属性
	Aid.title = "";
</script>

DOM树的添加

1：document.createElement();

它的缺点是反复操作DOM树，DOM修改导致的页面重绘、重新排版！重新排版是用户阻塞的操作，同时，如果频繁重排，CPU使用率也会猛涨！浪费资源影响性能。所以，如果是相同的操作，那就把结果执行完先放进一个对象里，再一次性把结果给插入到DOM中，这样就只执行了一次DOM结构，性能和一次次操作DOM相比就会大大提升了。因此，就有另一个方法

             元素添加到DOM树上
            在父标签中追加元素，在任何一个元素上追加子元素
			document.body.appendChild(a);
			document.body.appendChild(comment);
			document.body.appendChild(text);
			插入：在现有的子元素之前加入新元素
			在strong元素之前插入span元素
			div.insertBefore(span, strong);
            3、替换：替换现有的子元素

2：document.createDocumentFragment()

优点：不会对dom树反复修改添加，是把所有要进行修改、添加后的值存储在一个虚拟的节点对象里后，在进行调用。
它是用来创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。

var frag = document.createDocumentFragment();
            frag.appendChild(a);
			frag.appendChild(comment);
			frag.appendChild(text);
			document.body.appendChild(frag);

DOM之select传值

<style>
		#sel{
			width: 100px; 
		}
		div{
			display: inline-block;
			width: 50px;
		}
	</style>
</head>
<body>
	<select  id="unsel" size="5" multiple>
		<option>Argentinal</option>
		<option>Brazil</option>
		<option>Canada</option>
		<option>Chile</option>
		<option>China</option>
		<option>Cuba</option>
		<option>Denmark</option>
		<option>Egypt</option>
		<option>France</option>
		<option>Greece</option>
		<option>Spain</option>
	</select>
	<div>
		<!-- 全部右移 -->
		<button>&gt;&gt;</button>
		<button>&gt;</button>
		<button>&lt;</button>
		<!-- 全部左移 -->
		<button>&lt;&lt;</button>
	</div>
	<select  id="sel" size="5" multiple></select>
	<script>
		// 获取四个按钮
		var btns = document.getElementsByTagName('button');
		// 添加单击事件
		for(var i = 0,len = btns.length;i < len;i++){
			btns[i].onclick =  move;
		}

		var unsel = document.getElementById('unsel');
		var sel = document.getElementById("sel");
		// 空数组 selCts
		var selCts = [];
		var unselCts = unsel.innerHTML.replace(/^\s*<option>|<\/option>\s*$/g,"").split(/<\/option>\s*<option>/);
		function move(){//this --> btn
			switch (this.innerHTML) {
				case '&gt;&gt;' :// 全部右移
				    // 获取到左边所有的option的内容
				    // 将unselCts数组拼接到selCts数组结尾
					selCts = selCts.concat(unselCts);
					unselCts = [];//清空数组unselCts
					break;
				case  "&lt;&lt;" :
				    unselCts = unselCts.concat(selCts);
				    // 将unsel中的选项清空
				    selCts = [];
				    break;
			    case "&gt;" :
			    // 获取到被选中的option  获取到unsel元素下所有option  存储在options
		        var options = unsel.getElementsByTagName('option');
				// 循环遍历options中每一个 option
				    for(var i = options.length-1; i >= 0 ; i--){
				    	// 如果当前元素的selected为true 表示被选中
				    	if(options[i].selected){
				    	// 将下标为i的元素，从unselCts数组中剪切到selCts数组中
				    	selCts.push(unselCts.splice(i,1)[0]);
				    	}
				    }
				    // 循环结束
			        // 将selCts数组按照国家名字升序排列
				    selCts.sort();
				    break;
				 case "&lt;" :
				   //获取到被选中的option  获取到sel元素下所有option  存储在options
				   var Options = sel.getElementsByTagName('option');
				   // 循环遍历options中每一个 option
				    for(var i = Options.length-1; i >= 0 ; i--){
				    	// 如果当前元素的selected为true 表示被选中
				    	if(Options[i].selected){
				    	// 将下标为i的元素，从selCts数组中剪切到unselCts数组中
				    	unselCts.push(selCts.splice(i,1)[0]);
				    	}
				    }
				    // 循环结束
			        // 将selCts数组按照国家名字升序排列
				    unselCts.sort();
				    break;
			    }
			//selCts数组中的数据更新到sel元素上  
			updateView(selCts, sel);
			// unselCts数组中的数据更新到unsel元素上
			updateView(unselCts, unsel);
		}
		//将数组更新到sel元素上
		function updateView(arr, sel){
			sel.innerHTML = arr.length != 0 ? "<option>" + arr.join("</option><option>") + "</option>" : "";
		}
	</script>

DOM之二级联动

<select v-model="action_type" @change="type" id="select">
<!-- 先创建一个一个请选择的option
disabled selected hidden是点击“请选择后隐藏”
 -->
<option disabled selected hidden>--------请选择--------</option>
</select>
	<script>
		//获取id为select的元素
		var sel = document.getElementById("select");
		//循环遍历city_data的数据
		for(var i = 0; i < city_data.length; i++){
		//循环遍历city_data的下标
        for(var key in city_data[i]){
        //判断当下标为city时，进行创建option并赋值挂到sel树上
        if(key == "city"){
        var option = document.createElement("option");
        option.innerHTML = city_data[i][key];
		sel.appendChild(option);
	 }
   }
}
   /*创建新的select来接受city_data里的数据*/
    var unsel = document.createElement("select");
    //给select的id值为unsel
	unsel.setAttribute("id", "unsel");
	//绑定单击事件
	sel.onchange = function(){
	//当更新市区时清空之前右边select里的option值
	unsel.options.length = 0;
	//获取option的下标   this.selectedIndex - 1是之前创建了一个“请选择”的option，所以下标标成了1，因此-1是保持与city_data数据的下标一致。
	var index = this.selectedIndex - 1;
	//把右边的select挂在body树上
	document.body.appendChild(unsel);
	//循环遍历area里的数据并赋值给option
	for(var j = 0 ; j < city_data[index]["area"].length;j++){
     	var option = document.createElement("option");
        option.innerHTML = city_data[index]["area"][j];
        console.log(option.innerHTML);
		unsel.appendChild(option);
     	}
    }

	</script>