DOM&BOM

最新推荐文章于 2024-07-18 20:18:47 发布

piterous

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量58

点赞数

文章标签： html

本文链接：https://blog.csdn.net/piterous/article/details/115331250

版权

DOM

HTML DOM(文档对象模型)
当网页被加载时，浏览器会创建页面的文档对象模型，HTML DOM模型被构造为对象的树。

查找元素

通常要使用JavaScript操作HTML元素，就需要找到棉心的元素，可通过如下的方法找到元素:

1、通过id找到HTML元素

getElementById():这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。

<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Goktech-javascript</title>
<script>
    function a(){
    
    var a =document;
var a = document.getElementById ( "Payne" ) ;
document.write("这是基于Id抓取到的内容:+a.inrerH.TML");
    }
</script>
</head>
<body>
<h1>id="Payne "welcome to gok!</h1>
	<button onclick="a()">a</button>
 </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0h1jsJIa-1617096605454)(F:\Private folder\笔记\javascript\照片\image-20210328162920837.png)]

<!--案例2：通过触发test()函数后，给一个id为“div1”的div层添加背景色为黄颜色。-->
<!DOCTYPE html>
<html>
<head>
    <title>shopping list</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/css.css" rel="stylesheet" type="text/css">
</head>
    <h1>what to buy</h1>
    <P title="a gentle reminder">Don't forget to buy this stuff.</P>
    <ul id="purchases">
        <li>A tin of beans</li>
        <li class="sale">Cheese</li>
        <li class="sale important">milk</li>
    </ul>
    <div id="div1">helloworld</div>
    <input type="button" value="按钮" onclick="test()"/>
    <script>
        function test(){
    
            document.getElementById("div1").style.backgroundColor="yellow";
        }
    </script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0atPlssE-1617096605457)(F:\Private folder\笔记\javascript\照片\SouthEast)]

2、通过标签名找到HTML元素

getElementsByName:通过name属性来寻找元素对象，方法可返回带有指定名称的对象的集合。

<!DOCTYPE html>
<html>
<head>
    <title>shopping list</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/css.css" rel="stylesheet" type=

最低0.47元/天解锁文章

piterous

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM&BOM

DOMHTML DOM(文档对象模型)当网页被加载时，浏览器会创建页面的文档对象模型，HTML DOM模型被构造为对象的树。查找元素通常要使用JavaScript操作HTML元素，就需要找到棉心的元素，可通过如下的方法找到元素:1、通过id找到HTML元素getElementById():这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。<! DOCTYPE html><html><head><meta charset="UTF-8
复制链接

扫一扫