当前位置： 首页 > Web前端 > HTML

原生JS中DOM节点相关API集合

时间：2023-04-02 17:01:57 HTML

原生JS中DOM节点相关API集合Node属性Node.nodeName//返回节点名称，只读Node.nodeType//返回节点类型常量值，只读Node.nodeValue//返回Text或Comment节点的文本值，只读Node.textContent//返回当前节点及其所有后代节点的文本内容，可读可写Node.baseURI//返回绝对路径当前网页的Node.ownerDocument//返回当前节点所在的顶级文档对象，即documentNode.nextSibling//返回当前节点紧后的第一个兄弟节点Node.previousSibling//返回最近的兄弟节点在当前节点前面Node.parentNode//返回当前节点的父节点Node.parentElement//返回当前节点的父Element节点Node.childNodes//返回当前节点的所有子节点Node.firstChild//返回当前节点的第一个子节点Node.lastChild//返回当前节点Node的最后一个子节点//parentNode接口Node.children//返回指定节点的所有Element子节点Node.firstElementChild//返回第一个Element当前节点的子节点Node.lastElementChild//返回当前节点的最后一个ElementChildnodeNode.childElementCount//返回当前节点的所有Element子节点的个数。操作Node.appendChild(node)//将最后一个子节点添加到该节点Node.hasChildNodes()//返回一个布尔值，表示当前节点是否有子节点Node.cloneNode(true);//默认为false（克隆节点），true（克隆节点及其属性，以及后代）Node.insertBefore(newNode,oldNode)//在指定的子节点之前插入一个新的子节点Node.removeChild(node)//删除节点，在待删除节点的父节点上操作Node.replaceChild(newChild,oldChild)//替换节点Node.contains(node)//返回一个布尔值，表示参数节点是否为的后代节点当前节点。Node.compareDocumentPosition(node)//返回一个7位的二进制值，表示参数节点与当前节点的关系Node.isEqualNode(noe)//返回一个布尔值，用于判断两个节点是否相等。所谓相等节点是指具有相同类型、相同属性和相同子节点的两个节点。Node.normalize()//用于清理当前节点内部的所有Text节点。它删除空文本节点并将相邻的文本节点合并为一个。//ChildNode接口Node.remove()//用于删除当前节点Node.before()//Node.after()Node.replaceWith()Document节点Document节点Document.doctype//document.documentElement//返回当前文档的根节点document.defaultView//返回文档对象所在的window对象document.body//返回当前文档的节点document.head//返回当前文档的节点documentdocument.activeElement//返回当前文档中具有焦点的元素。//节点集合属性document.links//返回当前文档的所有a元素document.forms//返回所有表单元素document.images//返回所有图片元素document.embeds//返回网页文档中的所有嵌入对象.scripts//返回当前文档的所有脚本document.styleSheets//返回当前网页的所有样式表//文档信息属性document.documentURI//表示当前文档的URLdocument.URL//返回的URL当前文档文档。domain//返回当前文档的域名document.lastModified//返回当前文档最后一次修改的时间戳document.location//返回location对象，提供当前文档的URL信息document.referrer//返回当前文档的访问来源document.title//返回当前文档的标题。document.characterSet属性返回用于呈现当前文档的字符集，例如UTF-8、ISO-8859-1。document.readyState//返回当前文档的状态document.designMode//控制当前文档是否可编辑、可读、可写document.compatMode//返回浏览器处理文档的模式document.cookie//方法用于操作CookieDocument节点的readWrite方法document.open()//用于创建和打开文档document.close()//document.write()//用于向当前文档写入内容document.writeIn()//用于向当前文档写入内容，在末尾添加换行符。查找节点document.querySelector(selectors)//接受一个CSS选择器作为参数，返回匹配该选择器的第一个元素节点。document.querySelectorAll(selectors)//接受一个CSS选择器作为参数，返回所有匹配该选择器的元素节点。document.getElementsByTagName(tagName)//返回所有带有指定HTML标签的元素document.getElementsByClassName(className)//返回包含所有满足指定条件的类名的元素document.getElementsByName(name)//用于选择带有name属性的HTML元素（如

、、、、和等）document.getElementById(id)//返回匹配指定id属性的元素节点。document.elementFromPoint(x,y)//返回页面指定位置最顶层的Element子节点。生成节点document.createElement(tagName)//用于生成HTML元素节点。document.createTextNode(text)//用于生成文本节点document.createAttribute(name)//生成一个新的属性对象节点并返回。document.createDocumentFragment()//生成一个DocumentFragment对象(4)事件方法document.createEvent(type)//生成一个事件对象，可以被element.dispatchEvent()方法使用document.addEventListener(type,listener,capture)//registereventdocument.removeEventListener(type,listener,capture)//注销事件document.dispatchEvent(event)//触发事件otherdocument.hasFocus()//返回一个布尔值，表示当前文档中是否有元素Activate或获得焦点。document.adoptNode(externalNode)//从其原始文档中移除一个节点，将其插入到当前文档中，并返回插入的新节点。document.importNode(externalNode,deep)//从外部文档中复制指定节点，插入到当前文档中。Element节点的Element.attributesElement.attributes//返回当前元素节点的所有属性节点Element.id//返回指定元素的id属性，可读写Element.tagName//返回大写标签指定元素的名称Element.id。innerHTML//返回元素包含的HTML代码，可读可写Element.outerHTML//返回指定元素节点的所有HTML代码，包括自身和所有包含的子元素，可读可写Element.className//返回当前的element类属性，可读可写Element.classList//返回当前元素节点的所有类集合Element.dataset//返回元素节点中的所有data-*属性。Size属性Element.clientHeight//返回元素节点可见部分的高度Element.clientWidth//返回元素节点可见部分的宽度Element.clientLeft//返回元素节点左边框的宽度Element.clientTop//返回元素节点上边框的宽度Element.scrollHeight//返回元素节点的总高度Element.scrollWidth//返回元素节点的总宽度Element.scrollLeft//返回像素向右滚动的元素节点水平滚动条的值。通过设置该属性，可以改变元素的滚动PositionElement.scrollTop//返回元素节点垂直滚动的像素值Element.offsetHeight//返回元素的垂直高度（包括border，padding）Element.offsetWidth//返回元素的水平宽度（包括border、padding）Element.offsetLeft//返回当前元素左上角相对于Element.offsetParent节点的垂直偏移Element.offsetTop//返回Element的水平位移.style//返回元素节点的内联样式节点相关属性Element.children//包含当前元素节点的所有子元素Element.childElementCount//返回当前元素节点Element包含的子HTML元素节点的个数.firstElementChild//返回当前节点的第一个Element子节点Element.lastElementChild//返回当前节点的最后一个Element子节点Element.nextElementSibling//返回当前元素节点的下一个兄弟HTML元素节点Element.previousElementSibling//返回当前元素节点的前一个兄弟HTML节点Element.offsetParent//返回当前元素节点最接近的和CSSposition属性不等于静态父元素。元素节点方法定位方法getBoundingClientRect()//getBoundingClientRect返回一个对象，包括top,left,right,bottom,width,height//width和height是元素本身的宽高//top是upper之间的距离boundaryoftheelementandtopofthewindow//右元素的右外边界到窗口顶部的距离//底部元素的下外边界到窗口顶部的距离//left元素的左外边框到窗口顶部的距离//元素本身的宽度（包括border,padding）//height元素本身的高度（包括border,padding）getClientRects()//返回页面上当前元素形参的所有矩形。//元素在页面上的偏移量varrect=el.getBoundingClientRect()return{top:rect.top+document.body.scrollTop,left:rect.left+document.body.scrollLeft}属性方法Element.getAttribute():读取指定属性Element.setAttribute()：设置指定属性Element.hasAttribute()：返回一个布尔值，表示当前元素节点是否具有指定属性Element.removeAttribute()：移除指定属性的Find方法Element。querySelector()Element.querySelectorAll()Element.getElementsByTagName()Element.getElementsByClassName()Event方法Element.addEventListener()：添加事件回调函数Element.removeEventListener()：移除事件监听函数Element.dispatchEvent()：触发事件//ie8Element.attachEvent(oneventName,listener)Element.detachEvent(oneventName,listener)//事件对象varevent=window.event||event;//事件的目标节点vartarget=event.target||event.srcElement;//事件代理ul.addEventListener('click',function(event){if(event.target.tagName.toLowerCase()==='li'){console.log(event.target.innerHTML)}});otherElement.scrollIntoView()//滚动当前元素，进入浏览器可见区域//解析HTML字符串，然后插入生成的节点进入DOM树的指定位置Element.insertAdjacentHTML(where,htmlString);Element.insertAdjacentHTML('beforeBegin',htmlString);//在元素之前插入Element.insertAdjacentHTML('afterBegin',htmlString);//在子元素之前的第一个Insert处插入元素Element.insertAdjacentHTML('beforeEnd',htmlString);//在此元素的最后一个子元素之后插入Element.insertAdjacentHTML('afterEnd',htmlString);//在这个元素之后插入Element.remove()//用于从DOM中移除当前元素节点Element.focus()//用于将当前页面的焦点转移到指定元素？GitHub？个人网站

原生JS中DOM节点相关API集合相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。