土干 发表于 2023-1-14 22:59:22

网页DOM编程方法(API总结与应用)

目录

[*]网页DOM编程

[*]Node、Document和Element三者关系
[*]DOM编程常用 API 总结
[*]DOM编程 API 应用


网页DOM编程

Node、Document和Element三者关系

Node:各种类型的 DOM API 对象会从这个接口继承。
Document:表示在任何在浏览器中加载的网页(DOM树)。
Element:描述所有相同种类的元素所普遍具有的方法和属性。
完整的继承关系如下图:
说明:图中的子类可以从父类继承方法和属性。
DOM编程常用 API 总结

Node节点
属性方法说明Node.nodeName 只读返回一个包含该节点名字的DOMString。Node.nodeType只读返回一个与该节点类型对应的无符号短整型的值。Node.nodeValue返回或设置当前节点的值。Node.textContent返回或设置一个元素内所有子节点及其后代的文本内容。Node.firstChild 只读返回该节点的第一个子节点Node,如果该节点没有子节点则返回null。Node.lastChild 只读返回该节点的最后一个子节点Node,如果该节点没有子节点则返回null。Node.previousSibling 只读返回该节点同级的前一个节点 ( Node) ,如果不存在返回 null。Node.nextSibling 只读返回与该节点同级的下一个节点 Node,如果不存在返回null。Node.parentNode 只读返回一个当前节点 Node的父节点。Node.childNodes只读返回一个包含了该节点所有子节点的实时的NodeList。Node.appendChild()将指定的 childNode 参数作为最后一个子节点添加到当前节点。Node.removeChild()移除当前节点的一个子节点,这个子节点必须存在于当前节点中。Node.replaceChild()将选定的节点替换一个子节点 Node 为另外一个节点。Node.insertBefore()在当前节点下增加一个子节点 Node,并使该子节点位于参考节点的前面。nodeName特别说明:

[*]元素节点的nodeName是标签名称
[*]属性节点的nodeName是属性名称
[*]文本节点的nodeName永远是#text
[*]文档节点的nodeName永远是#document
nodeValue特别说明:

[*]元素节点的nodeValue是null(赋值无效)
[*]文本节点的nodeValue是文本自身
[*]属性节点的nodeValue是属性的值
Document节点
方法说明Document.createElement()用给定标签名创建一个新的元素。Document.createTextNode()创建一个文本节点。Document.querySelector()返回文档中与指定的选择器匹配的第一个元素节点。Document.querySelectorAll()返回包含文档中与指定的选择器匹配的所有元素节点的列表(NodeList)。注意:NodeList不是数组,而是一个类数组对象。可称为DOM集合。它的遍历方法有以下两种方式:

[*]利用自带的forEach方法
[*]转换成数组形式:Array.from(nodelist)、[].slice.call(nodelist)
Element节点
方法说明Element.getAttribute()返回元素上一个指定的属性值。Element.setAttribute()设置指定元素上的某个属性值。Element.removeAttribute()从指定的元素中删除一个属性。Element.clientWidth 只读返回Number 表示该元素内部的宽度。Element.clientHeight 只读返回Number 表示内部相对于外层元素的高度。Element.clientTop 只读返回 Number 表示该元素距离它上边界的高度。Element.clientLeft 只读返回Number表示该元素距离它左边界的宽度。Element.scrollWidth 只读返回类型为: Number ,表示元素的滚动视图宽度。Element.scrollHeight 只读返回类型为: Number,表示元素的滚动视图高度。Element.scrollTop返回类型为:Number ,表示该元素纵向滚动条距离Element.scrollLeft返回类型为:Number,表示该元素横向滚动条距离最左的位移。Element.getBoundingClientRect()返回元素的大小及其相对于视口的位置。
[*]在CSS盒模型中,可视区的宽高如下所示:
根据上面的盒模型图,可视区的宽高可有以下计算公式:
offsetWidth = width + padding*2
offsetHeight = width + padding*2

[*]当滚动条滚动到底部时,有以下计算公式:
scrollHeight = scrollTop + clientHeight
注意:scrollTop是一个动态值,随着滚动条向下滑动逐渐增加。而clientHeight则是一个静态值。
HTMLELement节点
属性说明HTMLElement.style获取/设置元素的 style 属性HTMLElement.offsetWidth只读元素自身可视宽度加上左右 border 的宽度HTMLElement.offsetHeight 只读元素自身可视高度加上上下 border 的宽度HTMLElement.offsetTop只读元素自己 border 顶部距离父元素顶部或 body 元素 border 顶部的距离HTMLElement.offsetLeft只读元素自己 border 左边距离父元素 border 左边或 body 元素 border 左边的距离HTMLElement.offsetParent只读元素的父元素,如果没有就是 body 元素。若元素脱离文档流,则为null在CSS盒模型中,偏移量的宽高如下所示:
根据上面的盒模型图,偏移量的宽高可有以下计算公式:
offsetWidth = width +border*2 +padding*2
offsetHeight = width +border*2 +padding*2
DOM编程 API 应用

接下来利用上面的API去实现以下几个步骤。首先考虑这样一个DOM结构,如下:
    <ul >
      <li >1</li>
      <li >2</li>
      <li >3</li>
      <li >4</li>
    </ul>假设这样一个场景,用户点击了某个按键。我们希望能使用JS去生成上面的DOM结构。如下:
按键点击后生成DOM结构如下:
我们总结一下步骤。利用JS生成DOM结构的操作如下:

[*]创建元素:Document.createElement()
[*]设置属性:Element.setAttribute()
[*]添加样式:HTMLElement.style
[*]添加内容:Node.textContent
[*]插入父节点:Node.appendChild()
参考
MDN-Node

来源:https://www.cnblogs.com/chscript/p/16994966.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: 网页DOM编程方法(API总结与应用)