草庐IT

网页DOM编程方法（API总结与应用）

chscript 2023-03-28 原文

目录

网页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特别说明：

  1. 元素节点的nodeName是标签名称

  2. 属性节点的nodeName是属性名称

  3. 文本节点的nodeName永远是#text

  4. 文档节点的nodeName永远是#document

nodeValue特别说明：

  1. 元素节点的nodeValue是null（赋值无效）

  2. 文本节点的nodeValue是文本自身

  3. 属性节点的nodeValue是属性的值

Document节点

方法 说明
Document.createElement() 用给定标签名创建一个新的元素。
Document.createTextNode() 创建一个文本节点。
Document.querySelector() 返回文档中与指定的选择器匹配的第一个元素节点。
Document.querySelectorAll() 返回包含文档中与指定的选择器匹配的所有元素节点的列表（NodeList）。

注意：NodeList不是数组，而是一个类数组对象。可称为DOM集合。它的遍历方法有以下两种方式：

  1. 利用自带的forEach方法
  2. 转换成数组形式：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() 返回元素的大小及其相对于视口的位置。
  1. 在CSS盒模型中，可视区的宽高如下所示：

根据上面的盒模型图，可视区的宽高可有以下计算公式：

offsetWidth = width + padding*2

offsetHeight = width + padding*2

  1. 当滚动条滚动到底部时，有以下计算公式：

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结构，如下：

<div class="list">
    <ul style="list-style: none; text-align: center; margin: 0px; padding: 0px;">
        <li style="background-color: green;">1</li>
        <li style="background-color: green;">2</li>
        <li style="background-color: green;">3</li>
        <li style="background-color: green;">4</li>
    </ul>
</div>

假设这样一个场景，用户点击了某个按键。我们希望能使用JS去生成上面的DOM结构。如下：

<input type="button" value="点击生成列表" onclick="createList()">
<script>
const createList = () => {
    // 创建list，设置class属性。插入body节点末尾
    let list = document.createElement("div");
    list.setAttribute("class", "list")
    document.body.insertBefore(list, null)
    // 创建ul节点，设置style样式。插入list节点内部
    let ul = document.createElement("ul");
    ul.style.listStyle = "none";
    ul.style.textAlign = "center";
    ul.style.margin = "0px";
    ul.style.padding = "0px";
    list.appendChild(ul);
    // 创建4个li节点，添加内容并设置style样式。插入ul节点内部
    let li;
    for (let i = 1; i <= 4; i++) {
        li = document.createElement("li");
        li.style.backgroundColor = "blue";
        li.textContent = i;
        ul.appendChild(li);
    }
}
</script>

按键点击后生成DOM结构如下：

我们总结一下步骤。利用JS生成DOM结构的操作如下：

  1. 创建元素：Document.createElement()
  2. 设置属性：Element.setAttribute()
  3. 添加样式：HTMLElement.style
  4. 添加内容：Node.textContent
  5. 插入父节点：Node.appendChild()

参考

MDN-Node

DOMAPIcodenoopenerdeveloperJavaScript

有关网页DOM编程方法（API总结与应用）的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  5. ruby - 将差异补丁应用于字符串/文件 - 2

    对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

  6. Ruby 方法() 方法 - 2

    我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索，但这不是我需要的。我也看过ruby​​-doc.org，但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗？更新我用methods()方法做了实验，得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco

  7. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  8. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此

  9. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  10. ruby - Highline 询问方法不会使用同一行 - 2

    设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline，但已经有几个月没有使用它了。现在，在Ruby1.9.2上全新安装时，它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗？ 最佳答案

随机推荐