标签：etl width 规范 highlight 签名 javascrip java image remove
DOM
一个完整的文档中存在 文本节点/ 属性节点 / 元素节点
| 节点类型 | nodeName | nodeType | nodeValue |
|---|---|---|---|
| 元素节点 | 标签名（大写） | 1 | null |
| 属性节点 | 属性名 | 2 | 属性值 |
| 文本节点 | #text | 3 | 文本内容 |
1.document.body 获取body元素
2.document.images 获取文档中所有图片标签，以数组的形式保存
3.document.links 获取文档中所有a标签，以数组的形式保存
4.document.forms 获取文档中所有表单标签，以数组的形式保存
2.document.getElementsByClassName( " "); 通过类名查找，以数组形式保存
3.document.getElementsByTagName(" "); 通过标签查找，以数组形式保存
4.document.getElementsByName(" "); 通过name查找 （表单单选）
1.ele.parentElement 查找父元素
2.ele.firstElementChild 查找第一个子元素
ele.lastElementChild 查找最后一个子元素
3.ele.previousElementSibling(" ") 查找前一个兄弟元素
ele.nextElementSibling(" ") 查找后一个兄弟元素
4.ele.children 所有子元素
1.创建元素节点
let ele = document.createElement("div"); //<div></div>
2.创建文本节点
let text = document.createTextNode("666"); //666
3.创建属性节点
let attr = document.creatAttribute("id"); //id = "";
赋值：attr.value="box1" //id ="box1";
4.添加子节点 ele.appendChild(childNode);
5.设置属性节点 ele.setAttributeNode(attr)
*ele.Id=" ", ele.className = " ";
6.在之前插入
parentNode.insertBefore(newNode,oldNode);
7.删除子元素
parentNode.removeChild(child);
8.innerHTML 和 innerText
innerHTML:获取或设置指定元素标签内的HTMl内容，从该元素标签的起始位置到终止位置的全部内容；
innerText：获取parentNode 的子文本节点
9.获取属性 ele.getAttribute(attr);
10.获取、设置特殊写法的属性
设置获取类名：ele.className
设置获取for: ele.HTMLfor
11.添加属性值 ele.setAttribute(attr,value);
? ele.setAttribute("id","box");
12.删除属性 ele.removeAttribute(attr);
13.多个类名的添加 ele.classList.add("");
ele.classList.toggle(‘checked‘)
14.样式操作
1.ele.style.backgroundColor=" ";
ele.style.width=" ";
2.ele.style.cssText=` //会替换前面同一元素的样式
width:200px;
height:200px
`
3.Object.assign(box.style,{ //常用
width:"100px",
backgroundColor:"red"
})
15.获取计算后的值
1.获取属性值 window.getComputedStyle(div).attr //getComputedStyle(div).backgroundColor--rgb(255, 0, 0)
2.ele.clientWidth 和 ele.clientHeight 获取的是content+padding
3.ele.offsetWidth 和 ele.offsetHeight 获取的是 content +padding +boder
4.ele.offsetLeft 和 ele.offsetTop 1.没有父级元素，只计算自己的外边距 2.有父级元素，且同时都有外边距，计算自己本身与父级元素外边距之和 3.父级有非静态定位，只计算自己的外边距 如果子绝父相，只计算自己的外边距和相对偏移量之和
标签：etl width 规范 highlight 签名 javascrip java image remove
原文地址：https://www.cnblogs.com/trail0226/p/14129741.html
