DOM--常用API

1.DOM树的添加
一个新元素的添加分为三个步骤
1）创建新新元素
例： var div =document.createElement(“div”);
2)设置其内容和属性
例： div.setAttribute(“id”, “boxl”);
3）将元素添加到DOM树上
1. 添加：appendChild（）在父标签中追加元素 相当于push的用法
在任何的元素上追加子元素
例：document.body.appendChild(div);
.2、插入：在现有的子元素之前加入新元素
语法：insertBefore(插入的元素, 现有的元素);
3.替换：替换现有的子元素
replaceChild(新元素, 被替换的元素);
4.删除
例：

strong i

p

修改样式(style的属性)
在设置样式时只能设置标签的行内样式，同理也只能获取行内样式
例：
var h1 = document.getElementsByTagName(“h1”)[0];
h1.style.backgroundColor = “#0f0”;
h1.style.color = “#00f”;

	var h1Style = window.getComputedStyle(h1, null);
	console.log(h1Style.width);// 300  （在css中我们给h1的width设置为300px）能够获取到内部或者  外部样式
console.log(getComputedStyle(h1, "after").color); 获取元素伪类上的
**访问html的属性**
例：
body>
<a href="https://www.bailiban.com" id="link1" class="btn">go to</a>
<br>

<button onclick="alert('Helle world')" id="btn1">click me</button>
<input type="checkbox" id="chb">
<script>
	var link = document.getElementById('link1');
	 获取指定属性的值  标签中必须有写的
	console.log(link.getAttribute("href"));
	修改属性值
	link.setAttribute("href", "#top");
	 删除属性
	link.removeAttribute("class");
	判断是否包含属性
	var bool = link.hasAttribute("title");
	console.log(bool);//false
	// 以上操作都是HTML标准属性

	自定义的属性名
	var a = document.getElementsByTagName("a")[1];
	a.onclick = function(){
		console.log(this.getAttribute('data-log'));
	}
	
	==HTML DOM querySelectorAll() 方法==
	uerySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。
       NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。
       实例： 获取文档中所有的 <p> 元素， 并为匹配的第一个 <p> 元素 (索引为 0) 设置背景颜色:
         // 获取文档中所有的 <p> 元素
        var x = document.querySelectorAll("p");
     // 设置第一个 <p> 元素的背景颜色
         x[0].style.backgroundColor = "red";

	 用HTMLDOM访问
	link.className;
	link.href;
	link.title;//""
	link.name = "a1";
	 判断是否包含属性 值
	link.title != "";
	删除属性
	link.title = "";

	标签置灰
	btn1.setAttribute("disabled", "");
	// btn1.disabled = true;

	复选框是否选中 推荐使用property方式
	chb.checked;//返回true  false
	chb.getAttribute("checked");//返回的是checked属性设置的具体值

	/*attribute  标签上出现的属性
	property   保存在内容中对象的属性*/

补充：当我们在添加子元素使，如果是同时添加多个平级子元素
可设置文档片段：临时保存多个平级元素的虚拟父元素
例：
var frag = document.craeteDocumentFragment(); 其返回值和普通的父元素一样

来源：CSDN

作者：Courage-lu

链接：https://blog.csdn.net/weixin_45846805/article/details/103830034