利用dom操作html元素方式

1.利用document对象的方法
document.getElementById()  ：返回对拥有指定id的第一个对象的引用

document.getElementByName() ：返回带有指定名称的对象集合

document.getElementByTagName() ：返回对带有指定标签名的对象集合

document.getElementByClassName() ：返回带有指定类名的对象集合

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">box</div>
<div class="bar">bar</div>
<div name="main">main</div>
</body>
</html>
<script>
    console.log(document.getElementById('box'))
    console.log(document.getElementsByClassName('bar'))
    console.log(document.getElementsByTagName('div'))
    console.log(document.getElementsByName('main'))
</script>

script中的四行代码分别是获取id为box的元素、获取所有class元素为bar的元素、获取所有标签为div的元素和获取所有name为main的元素


2.利用document对象的属性

document.body  ： 返回文档的body元素

document.documentElement  ： 返回文档的html元素

document.forms  ： 返回对文档中所有Form对象引用

document.images  ： 返回对文档中所有image对象引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
<script>
    var body=document.getElementsByTagName('body')[0]
    var html=document.getElementsByTagName('html')[0]
    console.log(document.body === body);
    console.log(document.documentElement === html)
</script>

 

script中前两条代码分别获取body元素和html元素，后两条代码比较返回结果根据比较结果为true或者false

3.利用Element对象的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="ul">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
</body>
</html>
<script>
    var list=document.getElementById('ul').getElementsByTagName('li')
    console.log(list)
</script>

 

script中的代码通过document的getElementById()方法获取id为ul的元素对象，然后再调用getElementsByTagName()方法获取该元素内标签为<li>的对象集合

posted @ 2021-12-21 11:01  Lhaoyu  阅读(368)  评论(1)  编辑  收藏  举报