转码日记——Javascript笔记（11）DOM查询

zzcoding_

已于 2022-09-19 16:33:35 修改

阅读量289

点赞数

分类专栏：转码日记文章标签： javascript 前端 html 开发语言

于 2022-09-19 16:27:56 首次发布

本文链接：https://blog.csdn.net/zzcoding_/article/details/126667192

版权

本文详细介绍了DOM文档对象模型的概念，强调了JavaScript如何操作网页。内容涵盖文档节点、元素节点、属性节点和文本节点的分类，以及事件、页面加载、DOM查询的方法，如getElementById、getElementsByTagName、getElementsByClassName等。同时，文章还讨论了如何处理元素的子节点、父节点和同胞节点，并提及了IE8兼容性问题。

摘要由CSDN通过智能技术生成

DOM — document object model 文档对象模型，目的是通过JS来操作网页

文档：html文档（网页）对象：将网页中的每个部分都转换成了一个对象模型：使用模型来表示对象之间的关系

网页里的每一个部分都是节点，常用的节点分为四类：（1）文档节点 — 整个html文档（2）元素节点 — html文档中的html标签（3）属性节点 — 元素的属性如id=“”（4）文本节点 — html标签中的文本内容

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

//获取id是btn的button对象

var btn = document.getElementById("btn");
//document就是html对象

//修改按钮的文字（inner.HTML）

btn.innerHTML = "I am button";

事件

文档或浏览器窗口中发生的一些特定的交互瞬间，如点击按钮，关闭窗口，移动鼠标等。我们可以在事件对应的属性中设置一些JS代码，当事件被触发时，这些代码将会执行。

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

//获取对象
var btn = document.getElementById("btn");
//使用函数绑定一个单击事件
btn.onclick = function(){
    alert("stop!");
};
//像这种为单击事件绑定的函数，我们称之为单击响应函数
//当事件被触发时，函数执行，这个函数叫响应函数

文档的加载

浏览器加载页面时，按照从上到下的顺序，读取一行就运行一行。如果<script>标签写在最上面，在js代码执行的时候，下面的html还没有加载，就可能出现点击按钮没有反应的情况，因为页面没有加载，DOM对象也没有加载，js代码获取不到。

可以使用onload,可以使事件在页面加载之后再触