JavaScript DOM（上）

anwar.

已于 2022-03-19 21:42:01 修改

阅读量5.3k

点赞数 1

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

于 2022-03-19 21:22:50 首次发布

本文链接：https://blog.csdn.net/qq_39275995/article/details/123602992

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

什么是DOM

DOM

Document Object Model
文档对象模型，通过DOM可以来任意来修改网页中各个内容
文档
文档指的是网页，一个网页就是一个文档
对象
对象指将网页中的每一个节点都转换为对象
转换完对象以后，就可以以一种纯面向对象的形式来操作网页了
模型
模型用来表示节点和节点之间的关系，方便操作页面
节点（Node）
节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点
虽然都是节点，但是节点的类型却是不同的
常用的节点
文档节点（Document），代表整个网页
元素节点（Element），代表网页中的标签
属性节点（Attribute），代表标签中的属性
文本节点（Text），代表网页中的文本内容

DOM操作

DOM查询
在网页中浏览器已经为我们提供了document对象，
它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。
document查询方法：
根据元素的id属性查询一个元素节点对象：
document.getElementById(“id属性值”);
根据元素的name属性值查询一组元素节点对象:
document.getElementsByName(“name属性值”);
根据标签名来查询一组元素节点对象：
document.getElementsByTagName(“标签名”);

元素的属性：
读取元素的属性：
语法：元素.属性名
例子：ele.name
ele.id
ele.value
ele.className
注意：class属性不能采用这种方式，
读取class属性时需要使用元素.className

修改元素的属性：
语法：元素.属性名 = 属性值

innerHTML
使用该属性可以获取或设置元素内部的HTML代码

事件（Event）

事件指的是用户和浏览器之间的交互行为。比如：点击按钮、关闭窗口、鼠标移动。。。
我们可以为事件来绑定回调函数来响应事件。
绑定事件的方式：
1.可以在标签的事件属性中设置相应的JS代码
例子：

<button onclick="js代码。。。">按钮</button>

2.可以通过为对象的指定事件属性设置回调函数的形式来处理事件
例子：

<button id="btn">按钮</button>  
<script>  
    var btn = document.getElementById("btn");  
    btn.onclick = function(){  
  
    };  
</script>

文档的加载
浏览器在加载一个页面时，是按照自上向下的顺序加载的，加载一行执行一行。
如果将js代码编写到页面的上边，当代码执行时，页面中的DOM对象还没有加载，
此时将会无法正常获取到DOM对象，导致DOM操作失败。
解决方式一：
可以将js代码编写到body的下边

<body>  
		<button id="btn">按钮</button>  
  
		<script>  
			var btn = document.getElementById("btn");  
			btn.onclick = function(){  
		  
			};  
	</script>  
</body>

解决方式二：
将js代码编写到window.onload = function(){}中
window.onload 对应的回调函数会在整个页面加载完毕以后才执行，
所以可以确保代码执行时，DOM对象已经加载完毕了

<script>  
    window.onload = function(){  
        var btn = document.getElementById("btn");  
        btn.onclick = function(){  
        };  
    };  
</script>

DOM查询

通过具体的元素节点来查询
元素.getElementsByTagName()
通过标签名查询当前元素的指定后代元素

子节点包括便签元素中的文本，子元素自包含标签元素

元素.childNodes
获取当前元素的所有子节点
会获取到空白的文本子节点

childNodes属性会获取包括文本节点在呢的所有节点
根据DOM标签标签间空白也会当成文本节点
注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
所以该属性在IE8中会返回4个子元素而其他浏览器是9个

元素.children
获取当前元素的所有子元素

元素.firstChild
获取当前元素的第一个子节点，会获取到空白的文本子节点

元素.lastChild
获取当前元素的最后一个子节点

元素.parentNode
获取当前元素的父元素

元素.previousSibling
获取当前元素的前一个兄弟节点

previousElementSibling获取前一个兄弟元素，IE8及以下不支持

元素.nextSibling
获取当前元素的后一个兄弟节点

firstElementChild获取当前元素的第一个子元素
firstElementChild不支持IE8及以下的浏览器，
如果需要兼容他们尽量不要使用

innerHTML和innerText
这两个属性并没有在DOM标准定义，但是大部分浏览器都支持这两个属性
两个属性作用类似，都可以获取到标签内部的内容，
不同是innerHTML会获取到html标签，而innerText会自动去除标签
如果使用这两个属性来设置标签内部的内容时，没有任何区别的

读取标签内部的文本内容

h1中的文本内容
元素.firstChild.nodeValue

anwar.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript DOM（上）

什么是DOMDOMDOM操作事件（Event）DOM查询DOMDocument Object Model文档对象模型，通过DOM可以来任意来修改网页中各个内容文档文档指的是网页，一个网页就是一个文档对象对象指将网页中的每一个节点都转换为对象转换完对象以后，就可以以一种纯面向对象的形式来操作网页了模型模型用来表示节点和节点之间的关系，方便操作页面节点（Node）节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点虽然都是节点，但是节点的类型却是不同的常用的节点文档
复制链接

扫一扫