前端学习之DOM模型和HTML文档

最新推荐文章于 2023-08-31 14:46:16 发布

小黑爱上排骨

最新推荐文章于 2023-08-31 14:46:16 发布

阅读量505

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/sinat_41920065/article/details/105765454

版权

本文详细介绍了如何使用DOM来访问和操作HTML元素，包括根据ID和CSS选择器访问元素，访问表单控件，列表框、下拉菜单以及表格子元素的方法。此外，还涵盖了修改元素内容、增加和删除元素的技巧，是前端开发中DOM操作的实用教程。

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

1.访问HTML元素：

为了动态地修改HTML元素，必须能访问HTML元素，DOM提供了两种方式来访问HTML元素:
➢根据ID访问HTML元素由如下方法实现。
document.getElementByld(idVal): 返回文档中id属性值为idVal的HTML元素。
innerHTML属性：代表该元素的内容：document.getElementByld(idVal).innerHTML
value属性：由于<textarea…/>和<input…/>元素所生成的表单控件，包括单行文本框、各种按钮等的可视化文本都由value属性控制，因此由value获取他们的内容document.getElementByld(idVal).value
除此之外的其他HTML元素，包括列表框，下拉菜单的列表框，<label…/>，<button…/>都应通过innerHTML来获取他们的内容
➢根据CSS选择器访问HTML元素由document的如下方法提供支持。
Eelemnt querySelector(selectos):该方法的参数既可是一个CSS选择器，也可是用逗号隔开的多个CSS选择器，该方法返回HTML文档中第一个符合选择器参数的
HTML元素。
**NodeList querySelectorAll(selectors)😗*该方法与前一个方法的用法类似，只是该方法将返回所有符合CSS选择器的HTML元素。
➢利用节点关系访问HTML元素。

<body>
    <ol id = "books">
        <li id="java">疯狂英语</li>
        <li id="ssh">轻量级得得得</li>
        <li id="ajax">等卡地擦拭擦拭</li>
        <li id="xml">等卡地擦拭擦拭</li>
        <li id="ejb">等卡地擦拭擦拭</li>
        <li id="android">等卡地擦拭擦拭</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.nextSibling);"/>
    <input type="button" value="最后一个" onclick="change(curTarget.parentNode.lastChild.previousSibling);"/>
    <script>
        var curTarget = document.getElementById("ajax");
        var change = function(target){
   
            alert(target.innerHTML);
        }
    </script>
</body>

2.访问表单控件

➢action: 返回该表单的action属性值，该属性用于指定表单的提交地址。读写属性。
➢elements:返回表单内全部表单控件所组成的数组。使用该数组可以访问该表单内的任何表单控件。只读属性。
➢length: 返回表单内表单域的个数，该属性等于elements.length的值。只读属性。
➢method: 返回该表单的method属性，该属性通常有POST和GET两个值，默认采用
GET方式。该属性用于确定表单发送请求的方式。读写属性。
除此之外，HTMLFormElement 对象还有如下两个常用方法。
➢reset(): 重设表单，将所有表单域

最低0.47元/天解锁文章

小黑爱上排骨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习之DOM模型和HTML文档

1.访问HTML元素：为了动态地修改HTML元素，必须能访问HTML元素，DOM提供了两种方式来访问HTML元素:➢根据ID访问HTML元素由如下方法实现。document.getElementByld(idVal): 返回文档中id属性值为idVal的HTML元素。innerHTML属性：代表该元素的内容：document.getElementByld(idVal).innerHTML...
复制链接

扫一扫