【前端攻城师之JS基础】09Dom对象文档对象模型

小橙子Wu

已于 2022-10-26 21:32:41 修改

阅读量275

点赞数

分类专栏： JS基础文章标签： javascript 前端 html

于 2022-10-26 21:32:27 首次发布

本文链接：https://blog.csdn.net/zbcwmq/article/details/127541068

版权

JS基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.Dom对象文档对象模型

可以通过js去操作整个网页

文档指的是整个html页面，对象指的是文档中的任何内容都可以看作是一个对象，模型指的是对象之间的关系

节点：

文档节点（整个html文档）

元素节点（文档中的标签）

属性节点（标签的属性）

文字节点（标签中的文本内容）

1.文档节点

浏览器已经为我们准备好了文档节点对象，这个对象是document,它作为window的属性，可以直接作为全局变量使用，可以在页面中直接使用，文档节点代表的是整个网页，网页中的所有节点都是它的子节点。

• 通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。

2.元素节点

• HTML中的各种标签都是元素节点，这也是我们最常用的一个节点。

• 浏览器会将页面中所有的标签都转换为一个元素节点，

我们可以通过document的方法来获取元素节点。

• 比如：

document.getElementById() //根据id属性值获取一个元素节点对象。

3.属性节点

• 属性节点表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。

• 可以通过元素节点来获取指定的属性节点。

• 例如：

– 元素节点.getAttributeNode(“属性名”);

• 注意：我们一般不使用属性节点。

4.文本节点

• 文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点。 网页中的空格和换行也是文本节点

• 它包括可以字面解释的纯文本内容。

• 文本节点一般是作为元素节点的子节点存在的。

• 获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本节点。

• 例如：

元素节点.firstChild; //获取元素节点的第一个子节点，一般为文本节点

2.事件的基础

事件就是用户和浏览器之间的交互行为比如点击按钮，放大缩小窗口

当事件触发时，我们通过js代码对这些事件做出反应

我们可以为某元素的对应事件，绑定处理函数的形式来响应事件，这样当事件被触发时，其对应的函数就会被调用

绑定函数的方法：

一：直接在标签中通过属性来绑定响应事件

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

二、获取对象，通过对象的指定事件来绑定响应函数

   var btn=document.getElementById("btn");

      btn.onmouseover=function(){

        alert("鼠标移入");

      }

3.文档的加载

文档中的代码是至上往下顺序执行的，我们习惯将script代码写在整个页面的前面

//为window对象绑定一个onload事件，该事件对应的响应函数会在整个html页面加载完之后再执行

window.onload=function( ){
}

4.Dom查询

1.获取节点和元素节点

获取元素节点（）//标签

document.getElementById() 根据id值获取一个对象

document.getElementsByTagName（）根据标签名获取一组对象，即使只查询到一个元素，也会返回一个数组，只不过数组中只有一个元素

document.getElementsByName( ) 根据name属性名获取一组元素对象

innerHTML这个属性可以访问到元素节点内部的html代码，对于自结束标签（input），这个属性没有意义，因为自结束标签没有内部。

如果需要访问元素的属性，直接使用元素.属性名，唯独访问元素的class属性不能直接使用元素.class而应该使用元素.className

例如

元素.id, 元素.name, 元素.value

2.获取元素节点的子节点和子元素

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

• 通过具体的元素节点调用

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

childNodes 属性，表示当前节点的所有子节点 ，返回一个数组

firstChild 属性，表示当前节点的第一个子节点

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

获取当前元素节点的子元素节点

通过具体的元素节点调用
children 属性，可以获取当前元素的子元素，返回一个数组
firstElementChild 属性，可以获取当前元素的第一个子元素 IE8以下不兼容不推荐使用 ,推荐用**xxx.children[0]**替代
xxx.children【xxx.children.length-1】返回当前元素的最后一个子元素
xxx.lastElementChild 属性，可以返回当前元素的最后一个子元素

3.获取父节点和兄弟节点/兄弟元素

获取父节点和兄弟节点

• 通过具体的节点调用

parentNode 属性，表示当前节点的父节点
parentElement 属性，表示当前节点的父元素（只能是元素节点）
previousSibling 属性，表示当前节点的前一个兄弟节点
nextSibling 属性，表示当前节点的后一个兄弟节点

获取上一个兄弟元素和下一个兄弟元素

xxx.previousElementSibling 属性，获取xxx的上一个兄弟元素

xxx.nextElementSibling 属性，获取xxx的下一个兄弟元素

4.dom查询剩余的方法和属性

其他属性

• nodeValue 文本节点可以通过nodeValue属性获取和设置文本节点的内容

innerHTML 元素节点通过该属性获取和设置标签内部的 html代码

document.body 获取页面的body元素

document.documentElement 获取页面的html标签元素

document.all 获取页面中的所有元素

其他方法

document.getElementByClassName(“.box”) 通过类名来查找元素

document. querySelector()

document. querySelectorAll()

这两个方法都是用document对象来调用，两个方法使用相同，都是传递一个选择器字符串作为参数，方法会自动根据选择器
字符串去网页中查找元素。

不同的地方是querySelector()只会返回找到的第一个元素，而

querySelectorAll()会返回所有符合条件的元素。兼容IE8

5.Dom节点的增删改

这里的修改我们主要指对元素节点的操作。

//向parent节点中添加<li>广州</li>节点

• 创建元素节点

a= document.createElement（li）

创建文本节点

b=document.createTextNode( “广州”)
创建文本节点需要给方法传入一个文本内容作为参数，浏览器会根据该内容创建文本节点，并将新节点返回
a.appendChild(b)
parent.append(a)

innerHTML属性也可以用来创建Dom节点，只是他的动静太大,之前绑定的响应函数会绑不上，所以不推荐使用

parent.innerHTML+="<li>广州</li>"

两者结合

a=document.createElement(“li”);

a.innerHTML=“广州”

parent.appendChild(a);

• 插入节点

父节点.appendChild(子节点)

父节点.insertBefore(新节点 , 旧节点) 在指定的子节点之前插入新的子节点，首先要找到他们的父节点，
才能调用插入的方法

• 删除节点

父节点.removeChild(子节点)

自我删除，自杀： child.parentNode.removeChild(child)

通过父节点删除，他杀：

首先找到父节点parent和子节点child,再通过parent.removeChild(child)删除

• 替换节点

父节点.replaceChild**(新节点 , 旧节点)**

6.获取元素的样式

1.操作内联样式

语法：元素.style.样式名

语法：元素.style.样式名=样式值

元素.style.width
元素.style.height

此种方法既可以读取内联样式也能设置样式

内联样式是那种将样式写在标签属性中的写法

通过style修改的样式都是内联样式，由于内联样式的优先级比较高，所以我们通过JS来修改的样式，往往会立即生效，
但是如果样式中设置了**!important**，则内联样式将不会生效

		- 注意：如果样式名中带有-，则需要将样式名修改为驼峰命名法
			将-去掉，然后-后的字母改大写
		- 比如：background-color --> backgroundColor
			border-width ---> borderWidth

2.获取元素正在显示的样式

有两种方法，这两种方法都只能读取元素样式，不能设置：

1.元素.currentStyle.样式名只能在IE8上使用

2.getComputedStyle(要获取样式的元素，伪元素/null); //返回一个对象，通过对象.样式名 得到元素样式
getComputedStyle（）方法是window对象自带的方法，可以直接使用（不兼容IE8及以下版本）

//封装函数，兼容所有浏览器：

//读取obj对象的name样式

function getStyle(obj,name){

			//如果当前浏览器里面有getComputedStyle方法，证明是其他浏览器，如果没有就是IE浏览器

			//加个window的原因是：**对象属性没找到，返回undefined； 变量没找到，会报错**

	if（window.getComputedStyle）{

	return getComputedStyle(obj,null)[name];

	}

	else{

	return  obj.currentStyle[name];

	}

}

3.其他样式相关的属性

属性都是只读的，不能修改

xxx.clientWidth ，xx.clientHeight. 返回元素的可见宽度和高度(包括内容区和padding)，返回一个不带单位的数字，可直接进行计算，这个值是通过计算得来的，只读，不能修改

xxx.offsetWidth，xxx.offsetHeight 返回整个元素的宽度和高度（包括内容去 padding 和边框）

xxx.offsetParent 定位父元素（规则找到第一个设置了相对定位或绝对定位的祖先元素，如果没找到，就会找body元素）

xxx.offsetLeft 返回当前元素相对于其定位父元素的水平偏移量返回一个数字

xxx.offsetTop 返回当前元素相对于其定位父元素的垂直偏移量

xxx.scrollWidth, xxx.scrollHeight 返回当前元素整个滚动区域的宽度和高度返回一个数字

xxx.scrollLeft 返回水平滚动条滚动的距离

document.documentElement.scrollTop 返回垂直滚动条滚动的距离

//当满足scrollHeight-scrollTop=clientHeight时，滚动条就拉到低了

//当满足scrollWidth-scrollLeft==clientWidth时，滚动条就拉到低了

小橙子Wu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【前端攻城师之JS基础】09Dom对象文档对象模型

可以通过js去操作整个网页文档指的是整个html页面，对象指的是文档中的任何内容都可以看作是一个对象，模型指的是对象之间的关系节点：文档节点（整个html文档）元素节点（文档中的标签）属性节点（标签的属性）文字节点（标签中的文本内容）
复制链接

扫一扫