JS学习笔记_09DOM

coulson_666

已于 2022-08-23 08:39:46 修改

阅读量133

点赞数

分类专栏： Javascript 文章标签： javascript 学习前端

于 2022-08-22 14:58:21 首次发布

本文链接：https://blog.csdn.net/coulson_666/article/details/126465977

版权

Javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

DOM

DOM，全称为Document Object Model文档对象模型。
JS中通过DOM来对HTML文档进行操作，理解DOM就可以随心所欲的操作WEB页面。

事件

事件就是用户和浏览器之间的交互行为。比如：点击按钮、鼠标移动、关闭窗口。。

一、处理事件的方式

（一）方式一

1、可以在事件对应的属性中设置一些JS代码，这样当事件被触发时，这些代码将会执行（响应事件）；

<button id="btn" onclick="alert('我被点击了');">这是一个按钮</button>

2、这种写法我们叫做结构和行为耦合，不方便维护，不推荐使用；

（二）方式二

1、可以为按钮的对应时间绑定处理函数的形式来响应事件，这样当事件被触发时，其对应的函数将会被调用
例如：绑定一个单击事件，像这种为单击事件绑定的函数，我们称之为单击响应函数
**备注：**在

//获取按钮对象
var btn = document.getElementById("btn");
//
btn.onclick = function(){
alert("我被点击了");
}

二、文档的加载

1、浏览器在加载一个页面时，是按照自上而下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象；
例如：

<head>
	<script></script>
</head>
<body></body>

2、将JS代码编写到页面下部就是为了，可以在页面加载完毕之后再执行JS代码；
例如：

<head></head>
<body>
	<button></button>
	<script></script>
</body>

3、onload事件会在整个页面加载完成之后触发，为window绑定一个onload事件（可以确保事件在整个页面加载完成之后才触发），该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了；
将代码写在上部

window.onload = function(){
alert("hello");
};

三、DOM查询

（一）获取元素节点

通过document对象调用：
1、getElementById()-通过ID属性获取一个元素节点对象
2、getElementsByTagName()-通过标签名获取一组元素节点对象；
这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中；即使查询到的元素只有一个，也会返回一个数组；
3、getElementsByName()-通过name属性获取一组元素节点对象
备注：
1、innerHTML 用于获取元素内部的HTML代码，对于自结束标签，这个属性没有意义
2、如果需要读取元素节点的属性，直接使用元素.属性名
例如：元素.ID 元素.name 元素.value
注意：class属性不能采用这种方式，读取class属性时需要使用
(元素.className)

（二）获取元素节点的子节点

通过具体的元素节点调用：
1、getElementsByTagName()-方法，返回当前节点的指定标签名后代节点
2、childNodes-属性，表示当前节点的所有子节点
会获取包括文本节点在内的所有节点（空白也会当作子节点text）；
根据DOM标签，标签空白也会当成文本节点；
**注意：**在IE8及以下的浏览器中，不会将空白文本当成子节点，所以该属性在IE8中会返回4个子元素而其他浏览器是9个；

3、firstChild-属性，表示当前节点的第一个子节点
可以获取到当前元素的第一个子节点（包括空白文本节点）
4、lastChild-属性，表示当前节点的最后一个子节点
备注：
1、firstElementChild获取当前元素的第一个子元素（不支持IE8及以下的浏览器，如果需要兼容则避免使用）
2、children属性可以获取当前元素的所有子元素

（三）获取父节点和兄弟节点

通过具体节点调用：
1、parentNode-属性，表示当前节点的父节点

2、previousSibling-属性，表示当前节点的前一个兄弟节点
也可能获取到空白的文本
3、nextSibling-属性，表示当前节点的后一个兄弟节点
备注：
1、innerText：
（1）该属性可以获取到元素内部的文本内容
（2）它和inner HTML类似，不同的是它会自动将html去除
2、previousElementSibling获取前一个兄弟元素（不支持IE8及以下的浏览器，如果需要兼容则避免使用）