一文解读JavaScript中的文档对象(DOM)

简介: 一文解读JavaScript中的文档对象(DOM)

大家好,我是IT共享者,人称皮皮。


前言


相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。


1.文档对象(DOM)


1).Document对象

这是我们用的最普遍的一个文档对象了,专门用来操作DOM节点时用。

1)).获取元素
document.getElementById()           #通过id查找HTML元素document.getElementsByName()        #通过name查找HTML元素document.getElementsByTagName()     #通过标签名查找HTML元素document.getElementsByClassName()   #通过类名查找HTML元素 document.querySelector(".h")        #第一个类名为 "h" 的元素document.querySelectorAll("div.no, div#h") #所有class为"no"或者id为"h"的div元素document.body          #获取body标签document.documentElement   #获取html标签

image.png

2)).获取网页内容
document.cookie        #网页cookiedocument.domain        #文档的域名document.lastModified  #文档被最后修改的日期和时间document.referrer      #载入当前文档的文档的URLdocument.title         #当前文档的标题document.URL           #当前文档的URLdocument.doctype       #当前文档的doctypedocument.baseURI       #当前文档的绝对URIdocument.documentMode   #浏览器使用的模式document.documentURI    #文档的URIdocument.implementation #DOM实现document.inputEncoding  #文档的编码(字符集)document.readyState     #文档的(加载)状态document.strictErrorChecking    #是否强制执行错误检查

image.png

3)).文档写入
document.write('hello world')   向文档写入文本document.writeln('hello world') 向文档写入文本并换行

image.png

4)).获取集合
document.all        #所有html元素document.anchors    #所有Anchor引用document.forms      #所有的表单引用document.images     #所有的图片引用document.links      #所有的超链接引用document.scripts    #所有的脚本引用document.embeds     #所有的流媒体引用

image.png

5)).获取节点
childNodes          #获取子节点的集合 ,返回数组 ,并把换行和空格也当成是节点信息。children            #获取子节点的集合 ,返回数组   firstChild          #获取第一个子元素  并把换行和空格也当成是节点信息firstElementChild   #获取第一个子节点lastChild           #获取最后一个子节点 并把换行和空格也当成是节点信息lastElementChild    #获取最后一个子节点parentNode          #获取父节点parentElement       #获取父节点(IE)offsetParent        #获取所有父节点  对应的值是body下的所有节点信息previousSibling         #获取上一个兄弟节点  匹配字符,包括换行和空格,而不是节点previousElementSibling  #获取上一个兄弟节点  直接匹配节点nextSibling             #获取下一个兄弟节点  匹配字符,包括换行和空格,而不是节点nextElementSibling      #获取下一个兄弟节点  直接匹配节点ownerDocument           #元素的根节点

image.png

这里我们获取到了所有的Div元素,我们可以针对性的获取一个ID下的Div的子元素以及它的兄弟和父,子元素,如下:

image.png

6)).创建节点

我们可以自定义节点并添加值,不过要将它添加到文档中去,所以必须添加节点,一般和下方的增加节点配套使用。

document.createElement(标签)  #创建HTML元素document.createTextNode(文本) #给文档添加文本document.createComment(文本)  #创建一个注释节点document.createDocumentFragment() #创建文档粉碎节点
7)).增加节点
appendChild(节点) #节点被添加到元素的末尾insertBefore(a,b) #a节点会插入b节点的前面

image.png

8)).删除节点
removeChild(节点名)  #被移除的节点仍在文档中,只是文档中已没有其位置了
9)).替换节点
replaceChild(插入的节点,被替换的节点)
10)).复制节点
a.cloneChild() #复制a节点,复制出来的节点作为返回值为true时,则a元素后代也一并复制。否则,仅复制a元素本身

image.png

11)).节点属性
#节点类型 nodeType 有三种情况#1.元素节点  2.属性节点  3.文本节点
#节点名称 nodeName 
#节点值 nodeValue #元素节点没节点值,为null #文本节点的节点值就是文本#属性节点的节点值就是该属性值
#节点属性获取a.widtha['width']a.gerAttribute(属性名)  返回指定的属性值a.gerAttributeNode(属性名) 返回指定的属性节点节点属性设置a.width=400a['width']=400a.attributes['width']=400a.setAttribute('width',400) 添加指定的属性a.setAttributeNode(b) 添加指定的属性节点
#节点属性删除a.removeChild(子节点)    从元素中移除子节点a.removeAttribute(属性)  从元素中移除指定属性a.removeAttributeNode(属性) 移除指定的属性节点,并返回被移除的节点
a.id 获取当前元素的ida.className  获取当前元素的classa.classList  获取当前元素的class列表
a.accessKey='w'    设置或返回元素的快捷键a.namespaceURI     返回指定节点的命名空间的 URIa.dir              设置或返回元素的内容是否可编辑a.normalize()      合并元素中相邻的文本节点,并移除空的文本节点a.tabIndex='3'     设置或返回元素的tab键控制次序a.tagName          返回元素的标签名a.textContent      设置或返回节点及其子代的文本内容a.title            设置或返回元素的标题属性a.item(num)        返回节点列表中位于指定下标的节点a.length           返回节点列表中的节点数

image.png

image.png

image.png

image.png

12)).获取元素文本
a.innerHTML  获取或者设置对象内的HTMLa.innerText  获取或者设置对象内的文本a.outerHTML  获取或者设置对象外的HTMLa.outerText  获取或者设置对象外的文本a.value      获取或者设置表单元素的值


总结


这篇文章主要介绍了JavaScript的文档对象。下一篇文章,我们继续介绍JavaScript,敬请期待!

相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
21天前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
25天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
24天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
25天前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
25天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
2月前
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
|
2月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
30 0
|
2月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
2月前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。