当前位置: 首页 > 科技观察

一篇讲解JavaScript中文档对象(DOM)的文章

时间:2023-03-16 11:14:20 科技观察

大家好,我是IT分享者,我叫皮皮。前言JavaScript做网站相信大家已经很熟悉了。它是一种脚本语言。与Python不同的是,它是一种浏览器脚本语言,而Python是一种服务器脚本语言。我们不仅要懂Python,还要懂JavaScript,因为它对制作网页有很大的作用。1.文档对象(DOM)1)。Document对象这是我们最常用的文档对象,专门用来操作DOM节点的。1)).获取元素document.getElementById()#通过id查找HTML元素document.getElementsByName()#通过名称查找HTML元素document.getElementsByTagName()#通过标签名查找HTML元素document.getElementsByClassName()#通过类名查找HTML元素document.querySelector(".h")#第一个类名为"h"的元素document.querySelectorAll("div.no,div#h")#所有class为"no"或id为"h"的divelementdocument.body#Getbody标签document.documentElement#Gethtml标签2)).获取网页内容document.cookie#网页cookiedocument.domain#文档域名document.lastModified#文档最后修改的日期和时间。referrer#加载当前文档的文档的URLdocument.title#当前文档document的标题.URL#当前文档的URLdocument.doctype#当前文档的doctypedocument.baseURI#当前文档document的绝对URI.documentMode#浏览器使用的文档模式。documentURI#DocumentURIdocument.implementation#DOM实现document.inputEncoding#Document编码(字符集)document.readyState#Document(加载)状态document.strictErrorChecking#是否强制错误检查3)).Documentwritedocument.write('helloworld')将文本写入文档document.writeln('helloworld')将文本写入文档并换行4)).Getcollectiondocument.all#allhtmlelementsdocument.anchors#allAnchorreferencesdocument.forms#allform引用document.images#所有图片引用document.links#所有超链接引用document.scripts#所有脚本引用document.embeds#所有流媒体引用5)).获取节点childNodes#获取子节点集合并返回Array,并对待换行和空格作为节点信息children#获取子节点的集合并返回一个数组firstChild#获取第一个子元素并将换行和空格作为节点信息和空格作为节点信息lastElementChild#获取最后一个子节点parentNode#获取父节点parentElement#获取父节点(IE)offsetParent#获取父节点对应的所有值都是body下的所有节点信息previousSibling#获取上一个兄弟节点的匹配字符,包括换行和空格,不是节点previousElementSibling#获取上一个兄弟节点直接匹配节点nextSibling#获取下一个兄弟节点的匹配字符,包括换行符和空格,不是节点nextElementSibling#获取下一个兄弟节点直接匹配节点ownerDocument#元素的根节点。在这里我们已经获得了所有的Div元素。我们可以具体获取某个ID下的Div的子元素及其兄弟、父子元素,如下:6))。创建节点我们可以自定义节点和添加值,但是要将其添加到文档中,我们必须添加一个节点,一般与下面添加的节点配合使用。document.createElement(label)#创建HTML元素document.createTextNode(text)#向文档添加文本document.createComment(text)#创建注释节点document.createDocumentFragment()#创建文档粉碎节点7)).添加节点appendChild(Node)#将节点添加到元素的末尾insertBefore(a,b)#将A节点插入到b节点的前面8))。删除节点removeChild(nodename)#移除的节点还在文档中,只是在文档中不再有它的位置9))。替换节点replaceChild(插入节点,替换节点)10))。复制节点a.cloneChild()#复制一个节点,当复制的节点返回为true时,则a元素的后代也被复制。否则,只有a元素本身被复制11))。节点属性#Node类型nodeType有三种情况#1。元素节点2.属性节点3.文本节点#节点名称nodeName#节点值nodeValue#元素节点没有节点值,为null#文本节点的节点值为text#属性节点的节点值为attributevalue#节点属性获取a.widtha['width']a.gerAttribute(attributename)返回指定属性值a.gerAttributeNode(attributename)返回指定属性节点节点属性设置a.width=400a['width']=400a.attributes['width']=400a.setAttribute('width',400)添加指定属性a.setAttributeNode(b)添加指定属性AttributeNode#NodeAttributeDeletea.removeChild(子节点)移除childnodefromtheelementa.removeAttribute(attribute)从元素中移除指定属性a.removeAttributeNode(attribute)移除指定属性节点并返回被移动的节点removednodea.id获取当前元素的ida.className获取当前元素的a.classList类t获取当前元素的类列表a.accessKey='w'设置或返回元素的快捷键a.namespaceURI返回指定节点的命名空间URIa.dir设置或返回元素内容是否可编辑a.normalize()合并元素中相邻的文本节点,并去除空文本节点a.tabIndex='3'设置或返回元素的tab键控制顺序a.tagName返回元素的标签名a.textContent设置or返回节点及其后代的文本内容a.title设置或返回元素的title属性a.item(num)返回节点列表中指定下标处的节点a.length返回节点数节点列表12)).获取元素文本a.innerHTML获取或设置对象内部的HTMLa.innerText获取或设置对象内部的文本a.outerHTML获取或设置对象外部的HTMLa.outerText获取或设置对象对象外Texta.value获取或设置表单元素的值Summary本文主要介绍JavaScript的文档对象。在下一篇文章中,我们将继续介绍JavaScript,敬请期待!【编者推荐】复制而不颠覆:可抗千万级流量的大型分布式系统架构设计2021年五款开源游戏化工具数字化转型的七大热点趋势与三大降温趋势Windows11新预览版22449push:开机动画变了是怎么回事?游戏玩家大规模退居Windows7:Windows10暴跌