访问HTML元素

最新推荐文章于 2024-03-27 23:50:16 发布

怪人友cj

最新推荐文章于 2024-03-27 23:50:16 发布

阅读量184

点赞数

分类专栏： JavaScript基础文章标签： javascript js

本文链接：https://blog.csdn.net/qq_44642803/article/details/104225098

版权

JavaScript基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

为了动态的修改HTML元素，必须能访问HTML元素，DOM提供了三种方式来访问HTML元素：
➢根据ID访问HTML元素
➢根据CSS选择器访问HTML元素
➢利用节点关系访问HTML元素

根据ID访问HTML元素

➢document.getElementById(idVal)：返回文档中id属性为idVal的HTML元素
下面的代码示范了如何根据ID来访问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>根据ID访问HTML元素</title>
	    <script type="text/javascript">
	        var accessById = function(){
	            alert(document.getElementById("a").innerHTML+"\n"
	            +document.getElementById("b").value);
	        }
	    </script>
	</head>
	<body>
	    <div id="a">guairenyoucj</div>
	    <textarea id="b" cols="25" rows="3">怪人友cj</textarea>
	    <input type="button" value="访问2个元素" onclick="accessById();">
	</body>
</html>

DOM模型扩展了HTML元素，几乎为所有的HTML元素都新增了innerHTML属性，该属性代表该元素的内容。但<textarea…/>例外，因为它是一个表单控件，他的开始标签和结束标签之间的内容是他的值，因此只能通过value属性来访问。

根据CSS选择器访问HTML元素

根据CSS选择器来访问HTML元素由document的如下方法提供支持
➢Element querySelector(selectos)：该方法的参数既可以是一个CSS选择器，也可以是用逗号隔开的多个CSS选择器，该方法返回HTML文档中第一个符合选择器参数的HTML元素
➢NodeList querySelectorAl(selectors)：该方法与前一个方法的用法类似，只是该方法将返回所有符合CSS选择器的HTML元素。
下面代码示范了querySelector()的用法

<!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 accessById = function(){
                alert(document.querySelector("#a").innerHTML+"\n"
                +document.querySelector("#b").value);
            }
        </script>
    </head>
    <body>
        <div id="a">怪人友cj</div>
        <textarea name="" id="b" cols="25" rows="3">怪人友cj</textarea>
        <input type="button" value="访问两个" onclick="accessById();"/>
    </body>
</html>

下面代码示范了querySelectorAl()方法同时获取多个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>querySelectorAll</title>
        <script>
            var change =function(){
                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="#faa";
                }
            }
        </script>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <input type="button" onclick="change();" value="修改全部div">
    </body>
</html>

利用节点关系访问HTML元素

一旦获取了某个HTML元素，由于该元素实际上与DOM树的某个节点对应，因此可以利用节点之间的父子、兄弟关系来访问HTML元素。
利用节点关系访问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>利用节点关系访问HTML元素</title>
        <style type="text/css">
            .selected{
                background-color: #66f;
            }
        </style>
    </head>
    <body>
        <ol id="books">
            <li id="one">第一个</li>
            <li id="two">第二个</li>
            <li id="three" class="selected">第三个</li>
            <li id="four">第四个</li>
            <li id="five">第五个</li>
            <li id="six">第六个</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 type="text/javascript">
            var curTarget = document.getElementById("three");
            var change = function(target){
                alert(target.innerHTML);
            }
        </script>
    </body>
</html>

空格和换行也算一个节点，叫空节点。

访问表单控件

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>访问表单控件</title>
    </head>
    <body>
        <form action="" id="d" method="get">
            <input type="text" name="user"><br>
            <input type="text" name="pass"><br>
            <select name="color">
                <option value="red">红色</option>
                <option value="blue">蓝色</option>
            </select><br>
            <input type="button" value="第一个" onclick=
                "alert(document.getElementById('d').elements[0].value);">
            <input type="button" value="第二个" onclick=
                "alert(document.getElementById('d').elements['pass'].value);">
            <input type="button" value="第三个" onclick=
                "alert(document.getElementById('d').color.value);">
        </form>
    </body>
</html>

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

HTML SelectElement代表-一个列表框或下拉菜单，HTML SelectElement对象除了可使用普通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>访问列表项</title>
    </head>
    <body>
        <select name="mySelect" id="mySelect">
            <option value="one">第一个</option>
            <option value="two">第二个</option>
            <option value="three">第三个</option>
            <option value="four">第四个</option>
            <option value="five">第五个</option>
            <option value="six">第六个</option>
        </select><br>
        <input type="button" value="第一个" 
        	onclick="change(curTarget.options[0])">
        <input type="button" value="上一个" 
        	onclick="change(curTarget.options[curTarget.selectedIndex-1])">
        <input type="button" value="下一个" 
        	onclick="change(curTarget.options[curTarget.selectedIndex+1])">
        <input type="button" value="最后一个" 
        	onclick="change(curTarget.options[curTarget.length-1])">
        <script>
            var curTarget = document.getElementById("mySelect");
            var change = function(target){
                alert(target.text);
            }
        </script>
    </body>
</html>

访问表格子元素

HTMLTableElement代表表格，HTMLTableElement 对象除了可使用普通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>访问表格元素</title>
    </head>
    <body>
        <table id="d" border="1">
            <caption>表头</caption>
                <tr>
                    <td>1-1</td>
                    <td>1-2</td>
                </tr>
                <tr>
                    <td>2-1</td>
                    <td>2-2</td>
                </tr>
                <tr>
                    <td>3-1</td>
                    <td>3-2</td>
                </tr>
        </table>
        <input type="button" value="表格标题" 
        	onclick="alert(document.getElementById('d').caption.innerHTML);">
        <input type="button" value="表格第一行第一格"
        	onclick="alert(document.getElementById('d').rows[0].cells[0].innerHTML);">
        <input type="button" value="表格第二行第二格" 
        	onclick="alert(document.getElementById('d').rows[1].cells[1].innerHTML);">
        <input type="button" value="表格第三行第二格" 
        	onclick="alert(document.getElementById('d').rows[2].cells[1].innerHTML);">
    </body>
</html>

怪人友cj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
访问HTML元素

为了动态的修改HTML元素，必须能访问HTML元素，DOM提供了三种方式来访问HTML元素：➢根据ID访问HTML元素➢根据CSS选择器访问HTML元素➢利用节点关系访问HTML元素根据ID访问HTML元素➢document.getElementById(idVal)：返回文档中id属性为idVal的HTML元素下面的代码示范了如何根据ID来访问HTML元素<!DOCTYPE ...
复制链接

扫一扫

专栏目录