DOM编程

最新推荐文章于 2021-06-26 14:42:44 发布

Solaris秋

最新推荐文章于 2021-06-26 14:42:44 发布

阅读量748

点赞数

分类专栏：前端网页设计文章标签： html js javascript html5

本文链接：https://blog.csdn.net/L1194774003/article/details/104208893

版权

这篇博客详细介绍了DOM（文档对象模型）编程，包括DOM模型中HTML元素的继承关系、访问和修改HTML元素的方法，如根据ID、CSS选择器访问，以及增加、删除元素。特别讨论了如何访问和操作表单控件、列表框选项、表格子元素，提供了实例来展示如何动态地修改HTML页面内容。

摘要由CSDN通过智能技术生成

DOM模型概述

DOM是文档对象模型（Document Object Model）的简称，接住DOM模型、可以将结构化文档转换成DOM树，程序可以访问、修改书里的节点，也可以新增、删除树里的节点，陈哥需操作这颗DOM树时，结构化文档也会随之动态改变，所以，掌握了DOM编程模型后，就拥有了使用JavaScript脚本动态修改HTML的能力

DOM模型中HTML元素之间的继承关系

DOM为常用的HTML元素提供了一套完整的继承体系，从页面的document对象到每个常用的HTML元素，DOM模型都提供了对应的类，每个类都提供了相应的方法来操作DOM元素本身、属性及其子元素
DOM为HTML元素提供了一种简单的继承关系，DOM模型里的HTML元素的继承关系如图
在这里插入图片描述
图中标粗的4个元素：Node，Document，Element，htmlElement都是普通HTML元素的超类，他们不直接对应于HTML页面控件，但是他们所包含的方法可以被其他页面元素调用，
HTML其他元素

HTMLDocument: 代表HTML文档本身。
HTMLBodyElement: 代表HTML文档中的<bod…/>控件。
HTMLDivElement: 代表HTML文档中的普通…>控件。
HTMLFormElement: 代表HTML文档中的表单控件。
HTMLSelectElement: 代表HTML文档中的列表框、下拉列表控件。
HTMLOptionElement: 代表HTML文档中的列表框选项控件。
HTMLIFrame: 代表HTML文档中的iframe…>控件。
HTMLInputElement: 代表HTML文档中的单行文本框、密码框、按钮等控件。
HTMLTableElement: 代表HTML文档中的表格控件。
HTMLTableCaptionElement: 代表HTML文档中表格的标题控件。
HTMLTableRowElement: 代表HTML文档中表格的表格行控件。
HTMLTableColElement: 代表HTML文档中表格的列控件。
HTMLTableCellElement: 代表HTML文档中表格的单元格控件。
HTMLTextAreaElement: 代表HTML文档中的多行文本域控件。
HTMLOLElement: 代表HTML文档中的有序列表控件。
HTMLULElement: 代表HTML文档中的无序列表控件。
HTMLLIElement: 代表HTML文档中的列表项控件。
HTML元素之间的斧子关系有比较严格的先知，例如，HTMLCellElement通常只能作为HTMLColElement的子元素使用

HTML元素之间常见的包含关系

有一些HTML元素至今可以互相嵌套，如< div />之间可以相互嵌套，但有一些HTML元素则不可互相嵌套，例如td元素只能作为tr元素的子元素，option元素只能作为select元素的子元素，下入描述了常用HTML的元素之间的包含关系
在这里插入图片描述
HTML对象作为整个HTML文档最大的对象，里面可以包含一个HTMLbodyElement对象，HTML文档还有两个对象体系：表单对象和表格对象。

表格对象可以包含基本的输入对象，还可以包含< select />元素，< select />元素可以包含多个< option />元素
表格对象可以包含标题控件，还可以包含多个表格行控件，每个表格行又可以包含多个单元格控件

使用DOM元素增加子元素时，必须注意元素之间的合理包含关系，例如，不要为td元素添加tr子元素，虽然语法上没有错误，但这种结构在HTML文档上无法显示；在定义< table />时，至少要为其怎加一个< tr />元素，否则该表格奖没有任何显示

访问HTML元素

为了动态的修改HTML元素，必须能访问HTML元素，DOM提供了两种方式来访问HTML元素

根据ID访问HTML元素
根据CSS选择器访问HTML元素
利用节点关系访问HTML元素

根据ID访问HTML元素

document.getElementById(idVal)返回文档中id属性值为idVal的HTML元素

在设计网页时，建议为每一个标签设置一个id元素，这样就可以通过document.getElementById()方式在JavaScript中定位到具体的HTML元素，这样就可以很方便的修改它们了

根据CSS选择器访问HTML元素

Element querySelector(selectos)该方法的参数即可是一个CSS选择器，也可使用逗号隔开的多个CSS选择器，该方法返回HTML文档中的第一个符合选择器参数的HTML元素。
Nodelist querySelectorAll(selectros)该方法与前一个方法的用法类似，只是该方法将返回所有符合CSS选择器的HTML元素。

对于制定了唯一id属性值的HTML元素，既可以使用getElementById()方法来获取，也可使用此处的querySelector()方法来获取，此处只要传入CSS的ID选择器（#ID）即可
下面一个例子是使用querySelectorAll()的例子

<head>
    <script type = "text/javascript">
        var change = function(){
    
            var divList = document.querySelectorAll("div");
            alert(divList);
            for (var i in divList){
    
                divList[i].innerHTML = "测试内容" + i;
                divList[i].style.width = "300px";
                divList[i].style.height = "50px";
                divList[i].style.margin = "10px";
                divList[i].style.backgroundColor = "#faa"
            }
        }
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <input type = "button" οnclick="change();" value = "修改全部div元素"/>
</body>

上面页面代码中定义了3个< div />元素，粗体代码使用querySelectorAll(“div”)获取了页面所有的div，于是返回了所有div元素组成的NodeList，然后采用遍历循环，将NodeList中包含的所有HTML元素都设置了同样的Style样式

利用节点关系访问HTML元素

一旦获取了某个HTML元素，由于该元素实际上与DOM树的某个节点对应，因此可以利用节点之间的父子、兄弟关系来访问HTML元素

Node parentNode:返回当前节点的父节点。只读属性。
Node previousSibling:返回当前节点的前一个兄弟节点。只读属性。
Node nextSibling:返回当前节点的后一个兄弟节点。只读属性。
Node[] childNodes:返回当前节点的所有子节点。只读属性。
Node[] getElementsByTagName(tagName);返回当前节点的具有指定标签名的所有
子节点。
Node firstChild:返回当前节点的第一个子节点。只读属性。
Node lastChild:返回当前节点的最后一个子节点。只读属性。
例

<body>
    <ol id="books">
        <li id="one">1</li>
        <li id="two">2</li>
        <li id="three" class= "selected">3</li>
        <li id="fore">4</li>
        <li id="five">5</li>
        <li id="six">6</li>
    </ol>
    <input type = "button" value = "父节点" onclick = " change(curTarget.parentNode);"/>
    <input type = "button" value = "第一个" onclick = " change(curTarget.parentNode.firstChild.nextSibling);"/>
    <input type = "button" value = "上一个" onclick = " change(curTarget.previousSibling.previousSibling);"/>
    <input type = "button" value = "下一个" onclick = " change(curTarget.nextSibling