DOM学习

DOM全称是Document Object Model 文档对象模型，就是把文档中的标签，属性，文本，转换为对象来管理
在这里插入图片描述

大纲

HTML DOM(文档对象模型)
document对象
HTML DOM结点

具体案例

HTML DOM(文档对象模型)

在这里插入图片描述

document对象

使用innerText获取标签内部的文本内容
使用innerHtml获取内部的标签和文本
在这里插入图片描述
下面是一些方法(具体请见万维)

第一个例子

在这里插入图片描述
这里获取对象使用的是通过name获取，这样可以获取到一组对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选框</title>
    <script type="text/javascript">
        function selectAll(){
            // 获取到复选框（这里要求name相同）
            var sports = document.getElementsByName("sport");
            // sport是什么？是nodeList 即一个集合
            // 拿到sports集合进行遍历
            for (var i = 0;i < sports.length;i++){
                sports[i].checked = true;
            }
        }
        function selectNone(){
            // 获取到复选框（这里要求id相同）
            var sports = document.getElementsByName("sport");
            // sport是什么？是nodeList 即一个集合
            // 拿到sports集合进行遍历
            for (var i = 0;i < sports.length;i++){
                sports[i].checked = false;
            }
        }
        function selectReverse(){
            // 获取到复选框（这里要求id相同）
            var sports = document.getElementsByName("sport");
            // sport是什么？是nodeList 即一个集合
            // 拿到sports集合进行遍历
            for (var i = 0;i < sports.length;i++){
                sports[i].checked = !sports[i].checked;
            }
        }
    </script>
</head>
<body>
你会的运动项目：
<input type="checkbox" name="sport" value="zq" checked="checked">足球
<input type="checkbox" name="sport" value="tq">台球
<input type="checkbox" name="sport" value="ppq">乒乓球<br><br>
<button onclick="selectAll()">全选</button>
<button onclick="selectNone()">全不选</button>
<button onclick="selectReverse()">反选</button>
</body>
</html>