关于DOM

最新推荐文章于 2022-04-26 15:26:35 发布

LucasBelieve

最新推荐文章于 2022-04-26 15:26:35 发布

阅读量323

点赞数

分类专栏： dom 文章标签： css html dom

本文链接：https://blog.csdn.net/lucasbelieve/article/details/78024478

版权

1 篇文章 0 订阅

订阅专栏

学习前端的html,css,js，都会讲到DOM，而且用起来也很简单直观。但过去，就是学会了那几个对象的几个方法，比如document.getElementById() ，没有完整的认识。最近在讲前端课程的时候，认真阅读了W3School的DOM教程，忽然明白到了DOM的真正含义，跟大家分享。

具体来讲，DOM是对HTML中元素、属性等的抽象。每个HTML的文档节点都会被一个对象来表示，比如document对象表示的是整个文档，select对象表示的是HTML中的一个下拉列表框等等。

dom

这里存在一个对应关系。DOM中的对象与HTML文档中的文档是对应的，改变DOM对象，HTML文档也会随之变化。比如以下代码：


var p = document.getElementById("content");

p.style.border="1px solid green";

实际上会为文档中一个id为content 的p元素加一个绿色边框。

所以DOM就是用对象的方式表示HTML中的元素，以支持开发者通过js编程来控制HTML。或者理解为HTML元素提供给JS的接口。

对象有些什么特点呢？对象有属性和方法可以被调用，只要知道这个对象有哪些属性那些方法，就知道我们可以用js对它做哪些操作了。所以，有了w3school和MDN的参考文档，就可以发挥对网页控制的最大能力了。

js一直以来在网页中担任的动态效果的角色完全仰仗于DOM的可编程能力。

特别有意思的是DOM中的一些对象：

element对象，所有对象的父级对象，常用的getElementByTagName()，appendChild()，removeChild()方法，parentNode属性其实都是element对象上的。所以每个对象都可以使用

style对象，对HTML样式的抽象，修改该对象会反映在内联样式上。

attribute对象，HTML元素属性的抽象等等

event对象，对事件的封装，target属性指向触发事件的对象

获得元素
- getElementById()方法根据ID获得元素
- getElementsByTagName() 方法根据标签名字获得所有的此类标签，可以应用在某个具体元素上缩小查找范围为该元素内部
- querySelector() 方法，特别强力，参数为css选择器，但是注意，只返回匹配的第一个元素。若是要返回所有的，使用querySelectorAll()方法。
- nodeList 属性，获得子节点
- parentNode 属性，找到元素的父级，另有nextSibling,previousSibling,fristChild,lastChild可以使用
创建元素
- createElement()方法创建元素
- createTextNode()方法创建文本节点
- innerHTML属性，直接用字符串创建HTML对象
添加元素
- appendChild()方法在元素中添加子元素
- insertBefore() 在元素前插入元素
删除元素
- removeChild() 移除子元素，请注意参数为子元素，子元素必须是确实包含在该元素中的
替换元素
- replaceChild() 替换子元素
修改属性
- DOM对象.属性，如imgObj.src=”www.baidu.com/logo.png”
修改样式
- DOM对象.style.具体样式名，参考Style对象，比如divObj.style.backgroundColor=”red”
事件处理
- DOM对象.事件句柄=事件处理函数


buttonObj.onclick=function(){

alert("Hello My Dear Friend");

}