DOM编程

最新推荐文章于 2024-07-14 12:56:18 发布

波杰克码难

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量166

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/qq_43734147/article/details/104242627

版权

DOM全称Document Object Model，即文档对象模型。
一个html页面被浏览器加载的时候，浏览器就会对整个html页面上的所有标签都会创建一个对应的对象进行描述，我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到对应的对象操作对象的属性，则可以改变浏览器当前显示的内容。
DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。
浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，而是将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元素

document对象，它是window对象的属性，可以在页面中直接使用。

根据ID访问HTML元素

document.getElementById(“html元素的id属性值”)
注：开发HTML页面时尽量为每个元素设置唯一的id属性值，如果有id相同的时候，则只能访问到前面的

根据 CSS 选择器访问 HTML 元素

Eelement querySelector(selectos)：该方法的参数既可是一个 CSS 选择器，也可是用逗号隔开的多个 CSS 选择器，该方法返回 HTML 文档中第一个符合选择器参数的 HTML 元素。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>querySelector</title>
        <script>
            var ById = function(){
                alert(document.querySelector("#a").innerHTML+"\n"
                +document.querySelector("#b").value);
            }
        </script>
    </head>
    <body>
        <div id="a">mmmmmmmmm</div>
        <textarea name="m" id="b" cols="22" rows="3">mmmmmmmmm</textarea>
        <input type="button" value="访问" οnclick="ById();"/>
    </body>
</html>

Nodelist querySelectorAll(selectros)：该方法与前一个方法的用法类似，只是该方法将返回所有符合CSS选择器的HTML元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var change = function(){
            // 获得元素为div的一个数组
            var divList=document.querySelectorAll("div");
            console.log(divList);
            for(var i=0;i<divList.length;i++){
                divList[i].innerHTML = "测试内容"+i;
                divList[i].style.width="300px";
                divList[i].style.height="50px";
                divList[i].style.margin="10px";
                divList[i].style.background="red";
            }
        }
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <input type="button" οnclick="change();" value="修改全部div元素"/>
</body>
</html>

通过关系(父子关系、兄弟关系)找标签。

Node parentNode 获取当前元素的父节点。
Node nextSibling 获取当前节点的下一个节点。（兄节点）
Node previousSibling 获取当前节点的上一个节点。（弟节点）
Node[] childNodes 获取当前元素的所有下一级子元素。
Node[] getElementsByTagName(tagName)：返回当前节点的具有指定标签名的所有子节点。
Node firstChild 获取当前节点的第一个子节点。
Node lastChild 获取当前节点的最后一个子节点。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>利用节点关系访问HTML元素</title>
        <style type="text/css">
            .selected{
                background-color: #66f;
            }
        </style>
    </head>
    <body>
        <ol id="books">
            <li id="xxx">一个</li>
            <li id="sss">二个</li>
            <li id="www" class="selected">三个</li>
            <li id="eee">四个</li>
            <li id="rrr">五个</li>
            <li id="sttt">六个</li>
        </ol>
        <input type="button" value="父节点" 
        	οnclick="change(curTarget.parentNode);">
        <input type="button" value="第一个" 
        	οnclick="change(curTarget.parentNode.firstChild.nextSibling);">
        <input type="button" value="上一个" 
        	οnclick="change(curTarget.previousSibling.previousSibling);">
        <input type="button" value="下一个" 
        	οnclick="change(curTarget.nextSibling.nextSibling);">
        <input type="button" value="最后一个" 
        	οnclick="change(curTarget.parentNode.lastChild.previousSibling);">
        <script type="text/javascript">
            var curTarget = document.getElementById("three");
            var change = function(target){
                alert(target.innerHTML);
            }
        </script>
    </body>
</html>

访问表单控件

表单在DOM中由HTMLFormElement对象表示，该对象除了可调用前面介绍的基本属性和方法之外，还拥有如下几个常用属性。

action: 返回该表单的 action 属性值，该属性用于指定表单的提交地址。读写属性。
elements: 返回表单内全部表单控件所组成的数组。使用该数组可以访问该表单内的任何表单控件。只读属性。
length: 返回表单内表单域的个数，该属性等于 elements.length 的值。只读属性。
method: 返回该表单的 method 属性，该属性通常有 POST 和 GET 两个值，默认采用 GET 方式。该属性用于确定表单发送请求的方式。读写属性。
target: 用于确定提交表单时的结果窗门，可以是＿self、 _parent、 _top、_blank 等值。读写属性。
除此之外， HTMLFormElement 对象还有如下两个常用方法。
reset(）：重设表单，将所有表单域的值设置为初始值。
submit(）：提交表单。

访问列表框、下拉菜单的选项

HTML SelectElement代表一个列表框或下拉菜单，HTML SelectElement对象除了可使用普通HTML元素的各种属性和方法外，还支持如下额外的属性。

form: 返回列表框、下拉菜单所在的表单对象。只读属性。
length: 返回列表框、下拉菜单的选项个数。该属性的值可通过增加或删除列表框的选项来改变。只读属性。
options: 返回列表框、下拉菜单里所有选项组成的数组。只读属性。
selectedIndex: 返回下拉列表中选中选项的索引，如果有多个选项被选中，则只返回第一个被选中选项的索引。读写属性。
type: 返回下拉列表的类型，即是否允许多选。如果允许多选，则返回 select-multiple; 如果不支持多选，则返回 select-one。

HTMLSelectElement 的 options 属性可直接访问列表框、下拉菜单的所有列表项，传入指定索引即可访问指定列表项，语法格式如下。

select.options[index]：返回列表框、下拉菜单的第 index+1 个选项。
列表框、下拉菜单的选项由 HTMLOptionElement 对象表示，除了前面介绍的普通属性之外，该对象还提供了如下几个常用属性。
form: 返回包含该选项所处列表框、下拉菜单的表单对象。
defaultSelected: 返回该选项默认是否被选中。只读属性。
index: 返回该选项在列表框、下拉菜单中的索引。只读属性。
selected: 返回该选项是否被选中，通过修改该属性可以动态改变该选项是否被选中。
text : 返回该选项呈现的文本，就是和之间的文本。对 HTMLOptionElement 而言，该属性与 innerHTML 属性相同。
value: 返回每个选项的 value 属性，可以通过设置该属性来改变选项的 value 值。

访问表格子元素

HTMLTableElement 代表表格， HTMLTableElement 对象额外的属性:

caption: 返回该表格的标题对象。可通过修改该属性来改变表格标题。
HTMLCollection rows: 返回该表格里的所有表格行，该属性会返回 <thead…/＞、<tfoot…／＞和<tbody…／＞元素里的所有表格行。只读属性。
HTMLCollection tBodies: 返回该表格里所有<tbody…/＞元素组成的数组。
tFoot: 返回该表格里的<tfoot…／＞元素。
tHead: 返回该表格里的所有<thead…/>元素。
table.rows[index]: 返回该表格第index+ 1行的表格行。

HTMLTableRowElement代表表格行, HTMLTableRowElement对象除了可使用普通HTML元素的各种属性和方法外，还支持如下额外的属性。

cells: 返回该表格行内所有的单元格组成的数组。只读属性。
rowlndex: 返回该表格行在表格内的索引值。只读属性。
section Rawl ndex: 返回该表格行在其所在元素 <tbody…/>、＜thead.．／＞等元素）的索引值。只读属性。
HTMLTableCelLElement 代表单元格，还支持如下额外的属性:
cellIndex: 返回该单元格在该表格行内的索引值。只读属性。

修改 HTML 元素

修改 HTML 元素通常通过修改如下几个常用属性来实现。

innerHTML: 大部分 HTML 页面元素如<div.．／>、＜td…/>的呈现内容由该属性控制。
value: 表单控件如<input…/＞、＜textarea…/＞的呈现内容由该属性控制。
className: 修改 HTML 元素的 CSS 样式，该属性的合法值是一个 class 选择器名。
style: 修改 HTML 元素的内联 CSS 样式。
options[index]：直接对<select…／＞元素的指定列表项赋值，可改变列表框、下拉菜单的指定列表项。

增加 HTML 元素

当需要为页面增加 HTML 元素时，应按如下两个步骤操作。
①创建或复制节点。
②添加节点。
创建或复制节点
document.createElement(Tag)： 创建 Tag 标签对应的节点。

<script type="text/javascript">
	//创建一个新节点
	var a= document.createElement("div"); 
	//使用警告框输出节点
	alert (a); 
</script>

Node cloneNode(boolean deep)： 复制当前节点。
当 deep 为 true 时，表示在复制当前节点的同时，复制该节点的全部后代节点；当 deep 为 false 时，表示仅复制当前节点

添加节点

对于普通的节点，可采用 Node 对象的如下方法来添加节点：

appendChild(Node newNode)：将 newNode 添加成当前节点的最后一个子节点。
insertBefore(Node newNode, Node refNode)：在 refNode 节点之前插入 newNode 节点。
replaceChild(Node newChild, Node oldChild)：将 oldChild 节点替换成 newChild 节点。

为列表框、下拉菜单添加选项

调用 HTMLSelectElement 的 add(）方法添加选项。
add(HTMLOptionElement option, HTMLOptionElement before)：在 before 选项之前添加 option 选项。如果想将 option 选项添加在最后，则将 before 指定为 null 即可；
使用之前介绍的 appendChild(option)添加亦可。

动态添加表格内容

insertRow(index)：在 index 处插入一行。返回新创建的 HTMLTableRowElement。
createCaption(）：为该表格创建标题。返回新创建的 HTMLTableCaptionElement。如果该表格已有标题，则返回已有的标题对象。
insertCell(long index)：在 index 处创建一个单元格，返回新创建的单元格。

删除 HTML 元素

删除节点

removeChild(old Node)：删除 oldNode 子节点。

####### 删除列表框、下拉菜单的选项

删除列表框、下拉菜单的选项有两种方法：

利用 HTMLSelectElement 对象的 remove(）方法删除选项。
直接将指定选项赋为 null 即可。

对于 HTMLSelectElement 对象而言，它提供了如下方法用于删除选项。

remove(long index)：删除指定索引处的选项。

删除表格的行或单元格

deleteRow(long idex)：删除表格中的index索引处的行
deleteCell(long index)：删除某行index索引处的单元格

波杰克码难

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DOM编程

DOM全称Document Object Model，即文档对象模型。一个html页面被浏览器加载的时候，浏览器就会对整个html页面上的所有标签都会创建一个对应的对象进行描述，我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到对应的对象操作对象的属性，则可以改变浏览器当前显示的内容。DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。浏览器在...
复制链接

扫一扫