Javascript操作DOM常用API总结

  • 时间:
  • 浏览:2
  • 来源:新大发快三—大发彩票APP

这个 API是根据元素的class返回另另一个多 即时的HTMLCollection,用法如下

DocumentFragment是所有节点中唯另另一个多 这样对应标记的类型,它表示并与非 生活轻量级的文档,否则当作另另一个多 临时的仓库用来保存否则会加上到文档中的节点。DocumentFragment有下面的特性:

(1)nodeType为11

(2)nodeName为#document-fragment

(3)nodeValue为null

(4)parentNode为null

getBoundingClientRect用来返回元素的大小以及相对于浏览器可视窗口的位置,用法如下:

parentNode:每个节点全是另另一个多 parentNode属性,它表示元素的父节点。Element的父节点否则是Element,Document或DocumentFragment。

parentElement:返回元素的父元素节点,与parentNode的区别在于,其父节点都可是我另另一个多 Element,否则全是,则返回null

除此之外,朋友还另另一个多多 都要注意的点:

否则被一键复制的节点绑定了事件,则副本也会跟着绑定该事件吗?这里要分情況讨论:

(1)否则是通过addEventListener否则比如onclick进行绑定事件,则副本节点都都还能否 绑定该事件

(2)否则是内联法律法律依据 绑定比如

这个 例子很简单,假如另另一个多 class都含有“test”的元素,另另一个多 在文档树的前面,否则它在第三级,另另另一个多 在文档树的里边,但它在第一级,通过querySelector获取元素时,它通过高度优先搜索,拿到文档树前面的第三级的元素。

这个 接口很简单,根据元素id返回元素,返回值是Element类型,否则不趋于稳定该元素,则返回null。

使用这个 接口有几点要注意:

(1)元素的Id是大小写敏感的,一定要写对元素的id

(2)HTML文档中否则趋于稳定多个id相同的元素,则返回第另另一个多 元素

(3)只从文档中进行搜索元素,否则创建了另另一个多 元素并指定id,但并这样加上到文档中,则这个 元素是都都还能否 被查找到的

window.getComputedStyle是用来获取应用到元素后的样式,假设某个元素并未设置高度假如通过其内容将其高度撑开,这之都要获取它的高度就要用到getComputedStyle,用法如下:

通过节点本人获取节点的父节点,否则将自身删除。

这段代码创建了另另一个多 新节点,否则加上到child节点日后。

和appendChild一样,否则插入的节点是页面上的节点,则会移动该节点到指定位置,否则保留其绑定的事件。

节点查询型API也是非常常用的api,下面朋友分别说明一下每另另一个多 api的使用。

哪哪几个Node类型中,朋友最常用的假如element,text,attribute,comment,document,document_fragment这几种类型。

朋友简单来介绍一下这几种类型:

在这里,我将常用的DOM操作api进行分类,首这样介绍的是创建型的api。这个 类型的api,简而言之假如用来创建节点的。

页面修改型api主假如这五个接口,要注意哪几个特点:

(1)不管是新增还是替换节点,否则新增或替换的节点是另另另一个多 趋于稳定页面上的,则其另另另一个多 位置的节点将被移除,也假如说同另另一个多 节点都都还能否了趋于稳定于页面的多个位置

(2)节点并与非 生活绑定的事件会都都还能否 消失,会老要保留着。

previousSibling:节点的前另另一个多 节点,否则该节点是第另另一个多 节点,则为null。注意有否则拿到的节点是文本节点或注释节点,与预期的不符,要进行正确处理一下。

previousElementSibling:返回前另另一个多 元素节点,前另另一个多 节点都可是我Element,注意IE9以下浏览器不支持。

appendChild朋友在前面否则用到多次,假如将指定的节点加上到调用该法律法律依据 的节点的子元素的末尾。调用法律法律依据 如下:

setAttribute:根据名称和值修改元素的特性,用法如下。

createTextNode用来创建另另一个多 文本节点,用法如下:

DOM1级定义了另另一个多 Node接口,该接口由DOM中所有节点类型实现。这个 Node接口在JS中是作为Node类型实现的。在IE9以下版本无法访问到这个 类型,JS中所有节点都继承自Node类型,都共享着相同的基本属性和法律法律依据 。

Node另另一个多多 属性nodeType表示Node的类型,它是另另一个多 整数,其数值分别表示相应的Node类型,具体如下:

Node.ELEMENT_NODE:1

Node.ATTRIBUTE_NODE:2

Node.TEXT_NODE:3

Node.CDATA_SECTION_NODE:4

Node.ENTITY_REFERENCE_NODE:5

Node.ENTITY_NODE:6

Node.PROCESSING_INSTRUCTION_NODE:7

Node.COMMENT_NODE:8

Node.DOCUMENT_NODE:9

Node.DOCUMENT_TYPE_NODE:10

Node.DOCUMENT_FRAGMENT_NODE:11

Node.NOTATION_NODE:12

假设朋友要判断另另一个多 Node是全是元素,朋友都都还能否 另另另一个多 判断

这段代码很简单,主假如绑定button事件,事件内容是一键复制了另另一个多 parent,修改其id,否则加上到文档中。

这里有几点要注意:

(1)和createElement一样,cloneNode创建的节点假如游离有html文档外的节点,要调用appendChild法律法律依据 不能加上到文档树中

(2)否则一键复制的元素有id,则其副本同样会含有该id,否则id具有唯一性,太大太大太大太大在一键复制节点后都要要修改其id

(3)调用接收的bool参数最好传入,否则不传入该参数,不同浏览器对其默认值的正确处理否则不同

Text表示文本节点,它含有的是纯文本内容,都都还能否了含有html代码,但都都还能否 含有转义后的html代码。Text有下面的特性:

(1)nodeType为3

(2)nodeName为#text

(3)nodeValue为文本内容

(4)parentNode是另另一个多 Element

(5)这样子节点

child节点否则作为parent节点的最后另另一个多 子节点。

appendChild这个 法律法律依据 很简单,否则还有有一点都要注意:否则被加上的节点是另另一个多 页面中趋于稳定的节点,则执行后这个 节点否则加上到指定位置,其另另另一个多 所在的位置将移除该节点,也假如说都都还能否 一起去趋于稳定另另一个多 该节点在页面上,离米 把这个 节点移动到另另另一个多 地方。朋友来看例子

getAttribute返回指定的特性名相应的特性值,否则不趋于稳定,则返回null或空字符串。用法如下:

这段代码通过querySelectorAll,使用id取舍器和class取舍器取舍了另另一个多 元素,并依次输出其内容。要注意两点:

(1)querySelectorAll也是通过高度优先搜索,搜索的元素顺序和取舍器的顺序无关

(2)返回的是另另一个多 非即时的NodeList,也假如说结果都都还能否 随着文档树的变化而变化

Document表示文档,在浏览器中,document对象是HTMLDocument的另另一个多 实例,表示整个页面,它一起去也是window对象的另另一个多 属性。Document有下面的特性:

(1)nodeType为9

(2)nodeName为#document

(3)nodeValue为null

(4)parentNode为null

(5)子节点否则是另另一个多 DocumentType或Element

这个 接口根据元素标签名获取元素,返回另另一个多 即时的HTMLCollection类型,哪几可是我即时的HTMLCollection类型呢?朋友来看看这个 示例

Attr类型表示元素的特性,离米 元素的attributes属性中的节点,它有下面的特性:

(1)nodeType值为2

(2)nodeName是特性的名称

(3)nodeValue是特性的值

(4)parentNode为null

原文地址:http://luopq.com/2015/11/500/javascript-dom/

在讲解操作DOM的api日后,首先朋友来复习一下一点基本概念,哪哪几个概念是掌握api的关键,都要理解它们。

这个 接口有下面几点要注意:

(1)返回结果是另另一个多 即时的HTMLCollection,会随时根据文档特性变化

(2)IE9以下浏览器不支持

(3)否则要获取另另一个多 以上classname,可传入多个classname,每个用空格相隔,这个

这段代码中另另一个多多 按钮,另另一个多 按钮是显示HTMLCollection元素的个数,另另另一个多 按钮都都还能否 新增另另一个多 div标签到文档中。前面提到HTMLCollcetion元素是即时的表示该集合是随时变化的,也假如是文档含有哪几个div,它会随时进行变化,当朋友新增另另一个多 div后,再访问HTMLCollection时,就会含有这个 新增的div。

使用document.getElementsByTagName这个 法律法律依据 有几点要注意:

(1)否则要对HTMLCollection集合进行循环操作,最好将其长度缓存起来,否则每次循环一定会去计算长度,暂时缓存起来都都还能否 提高时延

(2)否则这样趋于稳定指定的标签,该接口返回的全是null,假如另另一个多 空的HTMLCollection

(3)“*”表示所有标签

Comment表示HTML文档中的注释,它有下面的几种特性:

(1)nodeType为8

(2)nodeName为#comment

(3)nodeValue为注释的内容

(4)parentNode否则是Document或Element

(5)这样子节点

parentNode表示新节点被加上后的父节点

newNode表示要加上的节点

refNode表示参照节点,新节点会加上到这个 节点日后

朋友来看这个 例子

element是要获取的元素,pseudoElt指定另另一个多 伪元素进行匹配。

返回的style是另另一个多 CSSStyleDeclaration对象。

通过style都都还能否 访问到元素计算后的样式

removeChild顾名思义,假如删除指定的子节点并返回,用法如下:

newChild是替换的节点,都都还能否 是新的节点,也都都还能否 是页面上的节点,否则是页面上的节点,则其将被转移到新的位置

oldChild是被替换的节点

这个 个多多 api很这个,通过css取舍器来查找元素,注意取舍器要符合CSS取舍器的规则。

首先来介绍一下document.querySelector。

document.querySelector返回第另另一个多 匹配的元素,否则这样匹配的元素,则返回null。

注意,否则返回的是第另另一个多 匹配的元素,这个 api使用的高度优先搜索来获取元素。朋友来看这个 例子:

本文主要总结了原生js中常用的操作DOM的api接口,主要为了复习基础知识。平时开发用多了jQuery等类库,对基础知识的了解否则就渐渐地遗忘,但哪哪几个基础知识才是朋友立足的根本,都都还能否了掌握原生的js,不能真正做好js的开发。

createTextNode接收另另一个多 参数,这个 参数假如文本节点中的文本,和createElement一样,创建后的文本节点也假如独立的另另一个多 节点,同样都要appendChild将其加上到HTML文档树中

cloneNode是用来返回调用法律法律依据 的节点的另另一个多 副本,它接收另另一个多 bool参数,用来表示与非 一键复制子元素,使用如下:

deletedChild指向被删除节点的引用,它等于node,被删除的节点仍然趋于稳定于内存中,都都还能否 对其进行下一步操作。

注意:否则被删除的节点全是其子节点,则线程池池池否则报错。朋友都都还能否 通过下面的法律法律依据 来确保都都还能否 删除:

其中name是特性名,value是特性值。否则元素不含有该特性,则会创建该特性并赋值。

否则元素并与非 生活含有指定的特性名为属性,则都都还能否 世界访问属性进行赋值,比如下面两条代码是等价的:

另另另一个多 说说,副本节点同样会触发事件。

createDocumentFragment法律法律依据 用来创建另另一个多 DocumentFragment。在前面朋友说到DocumentFragment表示并与非 生活轻量级的文档,它的作用主假如存储临时的节点用来准备加上到文档中。

createDocumentFragment法律法律依据 主假如用于加上多量节点到文档中一定会使用到。假设要循环一组数据,否则创建多个节点加上到文档中,比如示例

getElementsByName主假如通过指定的name属性来获取元素,它返回另另一个多 即时的NodeList对象。

使用这个 接口主要要注意几点:

(1)返回对象是另另一个多 即时的NodeList,它是随时变化的

(2)在HTML元素中,并全是所有元素全是name属性,比如div是这样name属性的,否则否则强制设置div的name属性,它也是都都还能否 被查找到的

(3)在IE中,否则id设置成某个值,否则传入getElementsByName的参数值和id值一样,则这个 元素是会被找到的,太大太大太大太大最好不好设置同样的值给id和name

文本分类整理了javascript操作DOM的一点常用的api,根据其作用分类整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识。

使用createElement要注意:通过createElement创建的元素何必 属于html文档,它假如创建出来,并未加上到html文档中,要调用appendChild或insertBefore等法律法律依据 将其加上到HTML文档树中。

insertBefore用来加上另另一个多 节点到另另一个多 参照节点日后,用法如下:

nextSibling:节点的后另另一个多 节点,否则该节点是最后另另一个多 节点,则为null。注意有否则拿到的节点是文本节点,与预期的不符,要进行正确处理一下。

nextElementSibling:返回后另另一个多 元素节点,后另另一个多 节点都可是我Element,注意IE9以下浏览器不支持。

clientRect是另另一个多 DOMRect对象,含有left,top,right,bottom,它是相对于可视窗口的距离,滚动位置趋于稳定改变时,它们的值是会趋于稳定变化的。除了IE9以下浏览器,还含有元素的height和width等数据,具体可查看链接

优化后的代码主假如创建了另另一个多 fragment,每次生成的li节点先加上到fragment,最后一次性加上到list,朋友都都还能否 看示例

前面朋友提到创建型api,它们假如创建节点,并这样真正修改到页面内容,假如要调用appendChild来将其加上到文档树中。我在这里将这个会修改到页面内容归为一类。

修改页面内容的api主要包括:appendChild,insertBefore,removeChild,replaceChild。

这段代码将按钮绑定了另另一个多 事件,这个 事件创建了5000个li节点,否则依次将其加上HTML文档中。另另另一个多 做另另一个多多 缺点:每次一创建另另一个多 新的元素,否则加上到文档树中,这个 过程会造成浏览器的回流。所谓回流简单说假如指元素大小和位置会被重新计算,否则加上的元素太大,会造成性能间题。这个 日后,假如使用createDocumentFragment了。

DocumentFragment全是文档树的一每段,它是保趋于稳定内存中的,太大太大太大太大都都还能否 造成回流间题。朋友修改里边的代码如下:

在html文档中的每个节点之间的关系都都都还能否 看成是家谱关系,含有父子关系,兄弟关系等等,下面朋友依次来看看每并与非 生活关系。

childNodes:返回另另一个多 即时的NodeList,表示元素的子节点列表,子节点否则会含有文本节点,注释节点等。

children:另另一个多 即时的HTMLCollection,子节点全是Element,IE9以下浏览器不支持。

firstNode:第另另一个多 子节点

lastNode:最后另另一个多 子节点

hasChildNodes法律法律依据 :都都还能否 用来判断与非 含有子节点。

这段代码主假如获取页面上的child节点,否则加上到指定位置,都都还能否 看后另另另一个多 的child节点被移动到parent中了。

这里还另另一个多多 要注意的点:否则child绑定了事件,被移动时,它依然绑定着该事件。

创建型api主要包括createElement,createTextNode,cloneNode和createDocumentFragment五个法律法律依据 ,都要注意下面几点:

(1)它们创建的节点假如另另一个多 孤立的节点,要通过appendChild加上到文档中

(2)cloneNode要注意否则被一键复制的节点与非 含有子节点以及事件绑定等间题

(3)使用createDocumentFragment来正确处理加上多量节点时的性能间题

createElement通过传入指定的另另一个多 标签名来创建另另一个多 元素,否则传入的标签名是另另一个多 未知的,则会创建另另一个多 自定义的标签,注意:IE8以下浏览器不支持自定义标签。

使用如下:

朋友简单地介绍了几种常见的Node类型,要记住,HTML中的节点并何必 是包括元素节点,它还包括文本节点,注释节点等等。在这里朋友假如简单地说明了几种常见的节点,我都都还能否 进一步学习的同学都都还能否 查找一下相关资料。

document.querySelectorAll的不同之趋于稳定于它返回的是所有匹配的元素,否则都都还能否 匹配多个取舍符,朋友来看看下面这个 例子

Element提供了对元素标签名,子节点和特性的访问,朋友常用HTML元素比如div,span,a等标签假如element中的并与非 生活。Element有下面哪几个特性:

(1)nodeType为1

(2)nodeName为元素标签名,tagName也是返回标签名

(3)nodeValue为null

(4)parentNode否则是Document或Element

(5)子节点否则是Element,Text,Comment,Processing_Instruction,CDATASection或EntityReference

关于第五个参数参照节点还有哪几个注意的地方:

(1)refNode是必传的,否则不传该参数会报错

(2)否则refNode是undefined或null,则insertBefore会将节点加上到子元素的末尾

这段代码通过cloneNode一键复制了一份parent元素,其中cloneNode的参数为true,表示parent的子节点也被一键复制,否则传入false,则表示只一键复制了parent节点。

朋友看看这个 例子

replaceChild用于使用另另一个多 节点替换另另另一个多 节点,用法如下

兼容性间题:querySelector和querySelectorAll在ie8以下的浏览器不支持。