DOM的概念

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。

它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格。文档可以进一步被处理,处理的结果可以加入到当前的页面。

DOM是一种基于树的API文档,它要求在处理过程中整个文档都表示在存储器中。

DOM

DOM常用操作

  • 获取元素

  • 对元素进行操作

  • 动态创建元素

  • 事件

获取页面元素

  • 根据id获取元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab栏选项卡</title>
</head>

<body>
    <div id="main">Hello</div>
    <div>world</div>
    <script>
        var main = document.getElementById("main");
        console.log(main);
    </script>
</body>

</html>
  • 根据标签名获取元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab栏选项卡</title>
    <script>
        var main = document.getElementsByTagName('div');
        console.log(main);
    </script>
</head>

<body>
    <div>Hello</div>
    <div>world</div>
</body>

</html>
  • 根据标签的name属性获取元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab栏选项卡</title>
</head>

<body>
    <div>Hello</div>
    <div name="world">World</div>
    <script>
        var main = document.getElementsByName('world');
        console.log(main);
    </script>
</body>

</html>
  • 根据标签class属性获取元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab栏选项卡</title>
</head>

<body>
    <div>Hello</div>
    <div class="world">World</div>
    <script>
        var main = document.getElementsByClassName('world');
        console.log(main);
    </script>
</body>

</html>
  • 根据选择器获取元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab栏选项卡</title>
</head>

<body>
    <div id="tit">Hello</div>
    <div id="tit">World</div>
    <script>
        var main = document.querySelector("#tit")
        console.log(main);
    </script>
</body>

</html>
  • 根据选择器获取同一属性名所有元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab栏选项卡</title>
</head>

<body>
    <div id="tit">Hello</div>
    <div id="tit">World</div>
    <script>
        var main = document.querySelectorAll("#tit")
        console.log(main);
    </script>
</body>

</html>

上一篇:创建类与对象

下一篇:到顶了~