javascript什么是DOM详解

最新推荐文章于 2023-08-25 19:20:44 发布

_阿锋丶

最新推荐文章于 2023-08-25 19:20:44 发布

阅读量311

点赞数

分类专栏： javascript html css

本文链接：https://blog.csdn.net/weixin_43342105/article/details/99175231

版权

javascript 同时被 2 个专栏收录

50 篇文章 2 订阅

订阅专栏

html css

29 篇文章 17 订阅

订阅专栏

JS什么是DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 
        什么是DOM、
        全称Document Object Model
        JS通常对DOM来对html文档进行操作
        文档
         就是整个HTML文档
         对象
         对象表示将网页的每一个部分都转换为一个对象
         模型
         使用模型来表示对象之间的关系   


         什么是节点

         节点NOde，是构成我们网页的基础部分，网页中的每一个部分都可以称为
         一个节点，分为四类

         1，文档节点，整个html文档          
         2，元素节点：html文档中的标签
         3，属性节点；元素的属性
         4，文本节点，html中的文本内容

        通过document对象调用
        1，getElementById（）
        通过id属性获取一个元素节点对象
        2，getElementsByTagName（）
        通过标签名获取一组元素节点对象
        3，getElementsByName()
        通过name属性获取一组元素节点对象
        
        通过元素节点调用
        1，getElementByTagName()
        还回当前节点的指定标签后代节点

         事件
         事件就是文档或浏览器窗口发生的一些特定的交互瞬间
         比如，点击按钮，鼠标移动等

         处理事件
         我们可以在事件对应的属性中设置一些js代码
         这样事件被触发时，这些代码将会执行

        onload事件会在整个页面加载完成的时候才触发
        
        window.onload=function()//可以写在head里面了
        {
              var btn=doucument.getElementById("btn");
        //绑定处理函数
        //像这种为单击事件绑定的函数，我们成为单击响应函数
        btn.onclick=function()
        {
            alert("不要点我");
        };
        }

        

    -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <button id="btn"> 我是一个按钮</button>
        <script type="text/javascript">
        // 浏览器已经为我们提供了文档节点，这个对象是window属性
        // 可以在页面中直接使用，文档节点代表队是整个网页
        console.log(document);
        var btn=doucument.getElementById("btn");//获取对象
        console.log(btn);           
        //修改按钮的文字
        btn.innerHTML="我还是按钮";//通过这个属性可以获取元素内部的html的代码,但对于自结束标签，这个属性没有意义
        //如果还想读取元素的属性直接元素.属性名


        //获取按钮对象
        var btn=doucument.getElementById("btn");
        //绑定处理函数
        //像这种为单击事件绑定的函数，我们成为单击响应函数
        btn.onclick=function()
        {
            alert("不要点我");
        };

        
        </script>
</body>
</html>