JavaScript简单学习（十）-DOM

最新推荐文章于 2023-04-24 16:36:15 发布

zhang___gang

最新推荐文章于 2023-04-24 16:36:15 发布

阅读量142

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/zhang___gang/article/details/85265475

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

DOM文档对象模型

DOM（Document Object Model）文档对象模型，是一种思想。当网页加载时，可以将结构化文档在内存中转换成对象的树。
简单来说，DOM并不是一种技术，而是一种访问结构化文档的一种思想。借助DOM模型，可以对DOM树进行修改、删除、新增等操作，让结构化文档动态化。
对于HTML文档

DOM对HTML元素访问操作

DOM模型中的节点--文档可以说是由节点构成的集合。
节点分三种
- 元素节点
- 文本节点
- 属性节点
- 针对如下内容，对应的DOM分支
```

<div id = "div1">
    <div>hello<span>test</span>bye</div>
</div>
```
- DOM示例
DOM操作：
- 浏览器解析页面，会把所有的页面的数据加载到内存中，形成一个DOM树
- 在整个运行过程中，利用JS就是动态的修改DOM树，修改页面内容，动态的增删改查

为了动态地修改HTML元素，须先访问HTML元素。DOM主要提供了两种方式来访问HTML元素：

根据ID访问HTML元素—通过document对象调用getElementById()方法来查找具有唯一id属性值的元素
利用节点关系访问HTML元素。常用属性如下：

parentNode	返回当前节点的父亲点
previousSibling	返回当前节点的前一个兄弟节点
nextSibling	返回当前节点的后一个兄弟节点
childNodes	返回当前节点的所有自己点
firstChild	返回当前节点的第一个子节点
lastChild	返回当前节点的最后一个子节点
getElementsByTagName(tagName)	返回当前节点的具有指定标签名的所有子节点

示例

<!--利用节点关系访问HTML元素-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询元素</title>
    <script type="text/javascript">
        //获取元素：document.getElementById()
        //var element1 = document.getElementById("ull"); //此时无法获得ull，因为从上到下加载，ull还未加载
        function showInfo() {
            var element1 = document.getElementById("ull");
            alert(element1.innerHTML);
            //通过标签名获取元素，返回时一个数组
            //document.getElementsByTagName:整个文档下的
            var elementArray = document.getElementsByTagName("li");
            alert(elementArray[0].innerHTML);  //华为

            alert(element1.firstChild.nextSibling.innerHTML); //华为，第一个是空格

        }
        function showLiInfo() {
            //通过警告框显示第一个ul下的所有的li中的内容
            var ul = document.getElementById("ull");
            var liArray = ul.getElementsByTagName("li");
            var content = "";
            for (var i = 0; i < liArray.length; i++) {
                content = content + liArray[i].innerHTML + " ";
            }
            alert(content);
        }
    </script>
</head>
<body>
    常用手机：
    <ul id="ull">
        <li>华为</li>
        <li>小米</li>
        <li>魅族</li>
        <li>vivo</li>
    </ul>
    <ul>
        <li>华为</li>
        <li>小米</li>
        <li>魅族</li>
        <li>vivo</li>
    </ul>
    <input type="button" value="获取元素" onclick="showInfo()"/>
    <input type="button" value="获取四个li" onclick="showLiInfo()"/>
</body>
</html>

DOM访问表单控件的常用属性和方法如下

action	访问该表单的提交属性
elements	返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件
length	返回表单内表单域的个数
method	返回表单内的method属性，主要有get和post两个值
target	确定提交表单时的结果窗口，主要有_self、_blank、_top等
reset(), submit()	重置表单和确定表单方法

在elements返回的数组中访问具体的表单控件语法如下：

.elements[index]	返回表单中第index个表单控件
.elements[elementName]	返回表单内id或name为elementName的表单控件
.elementName	返回表单中id或name为elementName的表单控件

示例

<!--DOM访问表单控件-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单查询</title>
    <script type="text/javascript">
        function handleClick() {
            //提交，要求用户名和密码不能为空
            var formElement = document.getElementById("form1");
            //获取用户名和密码，判断如果符合规则，则提交，不符合不提交
            var elementArray = formElement.elements;
            var usernameElement = elementArray["username"];
            var username = usernameElement.value;
            var passwordElement = elementArray.password; //与上面的方式等价
            var password = passwordElement.value;
            if(username!=""&&password!="") {
                //提交
                formElement.submit(); //地址栏中看到结果
            }else{
                alert("输入不能为空！")
            }
        }
    </script>
</head>
<body>
    <form id="form1" action="" method="get">
        用户名:<input type="text" name="username"><br/>
        密&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="password" name="password"><br/>
        <input type="button" value="提交" onclick="handleClick()">
    </form>
</body>
</html>

DOM访问列表框、下列菜单的常用属性如下

form	返回列表框、下列菜单所在的表单对象
length	返回列表框、下列菜单的选项个数
options	返回列表框、下列菜单里所有选项组成的数组
selectedIndex	返回下拉列表中选中选项的索引
type	返回下拉列表的类型，多选的话返回select-multiple，单选返回select-one

使用option[index]返回具体选项所对应的常用属性：

defaultSelected	返回该选项默认是否被选中
index	返回该选项在列框、下拉菜单中的索引
selected	返回该选项是否被选中
text	返回该选项呈现的文本
value	返回该选项的value属性值

示例

<!--DOM访问列表框、下列菜单-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下列菜单列表框查询</title>
    <script type="text/javascript">
        function handleClick() {
            var form1 = document.getElementById("form1");
            var citySelect = form1.elements.city;
            var optionArray = citySelect.options;
            var content = "";
            for(var i = 0; i < optionArray.length; i++) {
                if(optionArray[i].selected){
                    content = optionArray[i].text;
                    break;
                }
            }
            alert("被选中的是： " + content);
        }
    </script>
</head>
<body>
    <form id="form1" action="" method="get">
        用户名:<input type="text" name="username"><br/>
        密&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="password" name="password"><br/>
        所在的城市:
        <select name="city">
            <option value="ShangHai" selected>上海</option>
            <option value="HangZhou">杭州</option>
            <option value="GuiYang">贵阳</option>
        </select><br/>
        <input type="button" value="提交" onclick="handleClick()">
</form>
</body>
</html>

DOM访问表格子元素的常用属性和方法如下：

caption	返回该表格的标题对象
rows	返回该表格里的所有表格行
tbodies	返回该表格里所有<tbody.../>元素组成的数组
tfoot	返回该表格里所有<tfoot.../>元素
thead	返回该表格里所有<thead.../>元素

通过rows[index]返回表格指定的行所对应的行所对应的属性：

cells	返回该表格行内所有的单元格组成的数组
rowIndex	返回该表格行在表格内的索引值
sectionRowIndex	返回该表格行在其所在元素（tbody，thead等元素）的索引值

示例

<!--DOM访问表格子元素-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格查询</title>
    <script type="text/javascript">
        //使用传统的方法查找也可以

        function handleClick() {
            //表格元素.rows：获取表的所有单元格
            //row.cells:获取当前行的所有单元格数组
            var tableElement = document.getElementById("stuTable");
            var rowArray = tableElement.rows;
            var content = "";
            for (var i = 0; i < rowArray.length; i++) {
                var cellArray = rowArray[i].cells;
                for(var j = 0; j < cellArray.length; j++) {
                    content += cellArray[j].innerHTML+" ";
                }
                content += "\n";  //换行
            }
            alert(content);
        }
    </script>
</head>
<body>
    <table border="1px" cellspacing="0px" id="stuTable">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>学号</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>10</td>
            <td>1</td>
        </tr>
        <tr>
            <td>小新</td>
            <td>11</td>
            <td>2</td>
        </tr>
        <tr>
            <td>小兰</td>
            <td>10</td>
            <td>3</td>
        </tr>
    </table>
    <input type="button" value="获取所有单元格信息" onclick="handleClick()">
</body>
</html>

DOM对HTML元素的增删改操作

DOM创建节点的方法：

document.createElement(Tag)，Tag必须是合法的HTML元素

DOM复制节点的方法

节点.cloneNode(boolean deep)，当deep为true是，表示复制当前节点以及当前节点的全部后代节点。为false时，只复制当前节点。

DOM添加、删除节点的方法：

appendChild(newNode)	将newNode添加成当前节点的最后一个子节点
insertBefore(newNode, refNode)	在refNode节点之前插入newNode节点
replaceChild(newNode, oldNode)	将oldNode节点替换成newNode节点
removeChild(oldNode)	将oldNode子节点删除

示例

<!--DOM对HTML元素的增删改操作-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建复制添加删除节点</title>
    <script type="text/javascript">
        function addNode() {
            //创建一个节点
            var li = document.createElement("li");
            li.innerHTML = "沈阳";

            var ulElement = document.getElementById("city");

            //改变的是内存中的DOM树，而非源码
            //追加
            //ulElement.appendChild(li);
            //添加到第一个li之前
            ulElement.insertBefore(li,ulElement.firstChild);
        }
        function copyNode() {
            //复制一个节点
            var ulElement = document.getElementById("city");
            //复制第二个结点
            var li = ulElement.getElementsByTagName("li")[1];
            var copyNode = li.cloneNode(true);
            ulElement.insertBefore(copyNode,ulElement.firstChild);
        }
        function deleteNode() {
            //删除最后一个li
            var ulElement = document.getElementById("city");
            var liArray = ulElement.getElementsByTagName("li");
            if(liArray.length>0){
                ulElement.removeChild(liArray[liArray.length-1]);
            }else{
                alert("节点已经删完了！")
            }
        }
    </script>
</head>
<body>
    <ul id="city">
        <li>上海</li>
        <li>贵阳</li>
        <li>南京</li>
    </ul>
    <input type="button" value="创建一个节点" onclick="addNode()"><br/>
    <input type="button" value="复制一个节点" onclick="copyNode()"><br/>
    <input type="button" value="删除一个节点" onclick="deleteNode()"><br/>
</body>
</html>

DOM为列表框、下拉菜单添加选项的方式：

创建选项出来使用前面所示的createElement方法外，还可以使用专门的构造器来构造一个选项出来：

语法：

new Option(text, value, defaultSelected, selected)

该构造器有四个参数，说明如下：
text
该选项的文本、即该选项所呈现的“内容”

value 选中该选项的值
defaultSelected 设置默认是否显示该选项
selected 设置该选项当前是否被选中

并不是每次构造都需要指明4个参数，可以指明一个或者两个都可以
添加创建好的选项至列表框或下拉菜单的方式
- 直接为<select.../>的指定选项赋值
```
列表框或下拉菜单对象.options[i]=创建好的option对象
```
删除列表框、下拉菜单的选项的方法
- 直接使用列表框或下拉菜单对象.remove(index)方法删除指定选项

直接将指定选项赋值为null

列表框或下拉菜单对象.remove(index)
//或 
对象.options[index]=null

示例

<!--DOM为列表框、下拉菜单添加选项-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单列表框查询</title>
    <script type="text/javascript">
        function addOption() {
            //更便捷的方式添加一个option
            var option = new Option("桂林","guilin",false,false);
            var city = document.getElementById("city");
            //赋值
            city.options[city.options.length] = option;
            //删除所有的option
            //city.options.length = 0;
        }
    </script>
</head>
<body>
    所在的城市:
    <select name="city" id="city">
      <option value="ShangHai" selected>上海</option>
      <option value="HangZhou">杭州</option>
      <option value="GuiYang">贵阳</option>
    </select><br/>
    <input type="button" value="添加一项" onclick="addOption()"/>
</body>
</html>

DOM动态添加删除表格内容所使用到的常用方法：

insertRow(index)	在指定索引位置插入一行
createCaption()	为该表格创建标题
createTFoot()	为该表格创建<tfoot.../>元素，假如已存在就返回现有的
createTHead()	为该表格创建<thead.../>元素，假如已存在就返回现有的
deleteRow(index)	删除表格中index索引处的行
deleteCaption()	删除表格标题
deleteTFoot()	从表格删除tFoot元素及其内容
deleteTHead()	从表格删除tHead元素及其内容

给表格创建、删除单元格的方法：

insertCell(index)	在index处创建一个单元格，返回新创建的单元格
deleteCell(index)	删除某行在index索引处的单元格

示例

<!--DOM动态添加删除表格内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格添加删除</title>
    <script type="text/javascript">
        function createTable() {
            var table = document.createElement("table");
            table.id = "mytable";
            table.border = 1;

            //表里面：行
            for(var i = 0; i < 4; i++){
                //创建一行
                var row = table.insertRow(i);
                //给这个行创建3个单元格
                for(var j = 0; j < 3; j++) {
                    var cell = row.insertCell(j);
                    cell.innerHTML = "单元格" + i + " " + j;
                }
            }

            //加入DOM文档树
            var body = document.getElementsByTagName("body")[0];
            body.insertBefore(table,body.firstChild);
        }

        function deleteLastCell() {
            //用上面的方法创建一个表格，用该方法每次删除最后一个单元格
            //删除行:表元素节点deleteRow(index)
            //删除单元格:行元素节点.deleteCell(index)
            var table = document.getElementById("mytable");
            var rowArray = table.rows;
            if(rowArray.length>0) {  //还有行
                var lastRow = rowArray[rowArray.length-1];
                var cellArray = lastRow.cells;
                if(cellArray.length == 0) { //这一行已经没有单元格
                    table.deleteRow(rowArray.length-1);  //删除这一行
                    deleteLastCell();
                }else{
                    lastRow.deleteCell(cellArray.length-1); //删除最后一个单元格
                }
            }

        }
    </script>
</head>
<body>
    <input type="button" value="创建一个4行3列的表格" onclick = "createTable()"><br/>
    <input type="button" value="删除最后一个单元格" onclick = "deleteLastCell()">
</body>
</html>

zhang___gang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript简单学习（十）-DOM

DOM文档对象模型DOM（Document Object Model）文档对象模型，是一种思想。当网页加载时，可以将结构化文档在内存中转换成对象的树。简单来说，DOM并不是一种技术，而是一种访问结构化文档的一种思想。借助DOM模型，可以对DOM树进行修改、删除、新增等操作，让结构化文档动态化。对于HTML文档DOM对HTML元素访问操作 DOM模型中的节点--文档可以说是由节点构成...
复制链接

扫一扫

专栏目录

text	该选项的文本、即该选项所呈现的“内容”
value	选中该选项的值
defaultSelected	设置默认是否显示该选项
selected	设置该选项当前是否被选中

JavaScript简单学习（十）-DOM

DOM文档对象模型

DOM对HTML元素访问操作

DOM对HTML元素的增删改操作

“相关推荐”对你有帮助么？