JavaScript日记（九）DOM

Tmil

已于 2022-10-22 19:41:26 修改

阅读量901

点赞数

分类专栏： JavaScript 文章标签： javascript

于 2022-04-22 20:19:52 首次发布

本文链接：https://blog.csdn.net/qq_46067727/article/details/124354144

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

DOM（Document Object Model）：

JS中通过DOM来对HTML文档进行操作。Document表示的就是整个的HTML网页文档；Object表示将网页中的每一个部分都转换为了一个对象；使用Model表示对象之间的关系，方便我们获取对象

节点Node——构成HTML文档的最基本单元，常用节点分为四类：文档节点（整个HTML文档）、元素节点（HTML文档中的HTML标签）、属性节点（元素的属性）、文本节点（HTML标签中的文本内容）

节点的属性	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

浏览器已经为我们提供文档节点对象，这个对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页

<body>
    <button id="btn">我是一个按钮</button>
    <script type="text/javascript">
        //获取到button对象
        var btn=document.getElementById("btn");
        //修改按钮文字
        btn.innerHTML="I'm button";
        //innerHTML属性可以获取到元素内部的html代码
    </script>
</body>

innerText属性可以获取到元素内部的文本内容，与innerHTML类似，不同的是它会自动将html标签去除

事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间，JavaScript和HTML的交互是通过事件实现的

<button id="btn" onclick="alert('点我干嘛');">我是一个按钮</button>
//这种写法称为结构和行为耦合，不方便维护，不推荐使用

可以为按钮的对应事件绑定处理函数的形式来响应事件，当事件被触发时，对应的函数将会被调用

<button id="btn">我是一个按钮</button>
<script type="text/javascript">                            
    //获取按钮对象
    var btn=document.getElementById("btn");
    //绑定一个单击事件
    btn.onclick=funtion(){
    alert("你还点");
    };
</script>

浏览器加载页面时自上向下加载，读取一行运行一行，如果将script标签写在页面顶端，在代码执行时，页面还没有加载，onload事件可以在整个页面加载完成后才触发，添加该事件可以确保代码执行时所有的DOM对象已经加载完毕了

<script type="text/javascript">
    window.onload=funtion(){
        //获取ID为btn的按钮
        var btn=document.getElementById("btn");
        //为按钮绑定一个单击响应函数
        btn.onclick=function(){
            alert("hello");
        };
    };
</script>
<body>
    <button id="btn">我是一个按钮</button>
</body>

获取元素节点（通过document对象调用）：

1.getElementById(“id属性”)，通过id属性获取一个元素节点对象

2.getElementsByTagName(“标签名”)，通过标签名获取一组元素节点对象，此方法会返回一个类数组对象，所有查询到的元素都会封装到对象中

3.getElementsByName(“name属性”)，通过name属性获取一组元素节点对象

如果需要读取元素节点属性，直接使用：元素.属性名，但读取class属性需要使用：元素.className

获取元素的子节点（通过具体的元素节点调用）：

1.getElementsByTagName()方法，返回当前节点的指定标签名后代节点

2.childNodes属性，表示当前节点的所有子节点，此属性会获取包括文本节点在内的所有节点，DOM会将标签间空白当成文本节点，但在IE8及以下浏览器中不会。children属性可以获取当前元素的所有子元素

3.firstChild属性，表示当前节点的第一个子节点，可以获取到当前元素的第一个子节点（包括空白文本节点）。firstElementChild可以获取当前元素的第一个子元素（不包括空白文本节点），但不支持IE8及以下浏览器

4.lastChild属性，表示当前节点的最后一个子节点

获取父亲节点和兄弟节点（通过具体的节点调用）：

1.parentNode属性，表示当前节点的父节点