利用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>