DOM(文档对象模型)

时间：2020-12-18 12:58:28 收藏：0 阅读：3

DOM(document object model )

DOM的版本 DOM0-DOM4
DOM0级在DOM标准规范出台之前的规范
DOM0和 DOM2使用频率最高

---- DOM节点 == （node）

一个完整的文档中存在文本节点/ 属性节点 / 元素节点

节点类型	nodeName	nodeType	nodeValue
元素节点	标签名（大写）	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

-------DOM0级查找节点

1.document.body 获取body元素

2.document.images 获取文档中所有图片标签，以数组的形式保存

3.document.links 获取文档中所有a标签，以数组的形式保存

4.document.forms 获取文档中所有表单标签，以数组的形式保存

---------快速查找元素

1.document.fetElementById(" "); 通过Id查找元素比较常用

2.document.getElementsByClassName( " "); 通过类名查找，以数组形式保存

3.document.getElementsByTagName(" "); 通过标签查找，以数组形式保存

4.document.getElementsByName(" "); 通过name查找（表单单选）

5.document.querySelector(" "); 选择器查找，找到符合条件的第一个常用

6.document.querySelectorAll(" "); 选择符合条件的所有，以数组形式保存常用

--------关系查找元素

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.父级有非静态定位，只计算自己的外边距
   如果子绝父相，只计算自己的外边距和相对偏移量之和