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

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

前言

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

1.文档对象(DOM)

1).Document对象

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

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

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

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

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

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

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

6)).创建节点

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

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

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

11)).节点属性
1#节点类型 nodeType 有三种情况 2#1.元素节点 2.属性节点 3.文本节点 3 4#节点名称 nodeName 5 6#节点值 nodeValue 7#元素节点没节点值,为null 8#文本节点的节点值就是文本 9#属性节点的节点值就是该属性值 10 11#节点属性获取 12a.width 13a['width'] 14a.gerAttribute(属性名) 返回指定的属性值 15a.gerAttributeNode(属性名) 返回指定的属性节点 16节点属性设置 17a.width=400 18a['width']=400 19a.attributes['width']=400 20a.setAttribute('width',400) 添加指定的属性 21a.setAttributeNode(b) 添加指定的属性节点 22 23#节点属性删除 24a.removeChild(子节点) 从元素中移除子节点 25a.removeAttribute(属性) 从元素中移除指定属性 26a.removeAttributeNode(属性) 移除指定的属性节点,并返回被移除的节点 27 28a.id 获取当前元素的id 29a.className 获取当前元素的class 30a.classList 获取当前元素的class列表 31 32a.accessKey='w' 设置或返回元素的快捷键 33a.namespaceURI 返回指定节点的命名空间的 URI 34a.dir 设置或返回元素的内容是否可编辑 35a.normalize() 合并元素中相邻的文本节点,并移除空的文本节点 36a.tabIndex='3' 设置或返回元素的tab键控制次序 37a.tagName 返回元素的标签名 38a.textContent 设置或返回节点及其子代的文本内容 39a.title 设置或返回元素的标题属性 40a.item(num) 返回节点列表中位于指定下标的节点 41a.length 返回节点列表中的节点数

12)).获取元素文本
1a.innerHTML 获取或者设置对象内的HTML 2a.innerText 获取或者设置对象内的文本 3a.outerHTML 获取或者设置对象外的HTML 4a.outerText 获取或者设置对象外的文本 5a.value 获取或者设置表单元素的值

总结

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

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

一文带你解读​JavaScript的引用类型和函数对象

前言相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。1.引用类型相当于Java中的类创建实例过程,比如我要创建个对象,可以这样做:varobnewObject();

盘点JavaScript中5个常用的对象

大家好,我是IT共享者,人称皮皮。前言相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。JavaScript对象在JavaScript中有许多有用的对象,它们可以用来实现很

盘点JavaScript中那些进阶操作知识(上篇)

前言相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。1.进阶操作这里列举了一些小编以前经常用到的一些例子以及一些经验,由于篇幅受限,这里我将会把部分执行结果的输出直接输入