DOM(文档对象模型)

标签:etl   width   规范   highlight   签名   javascrip   java   image   remove   

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

  

 

DOM(文档对象模型)

标签:etl   width   规范   highlight   签名   javascrip   java   image   remove   

原文地址:https://www.cnblogs.com/trail0226/p/14129741.html

版权声明:完美者 发表于 2020-12-18 12:58:28。
转载请注明:DOM(文档对象模型) | 完美导航

暂无评论

暂无评论...