uni-app获取dom节点信息

首先明白一点，uni-app提供的view、button、image、text通通都是组件，不是h5的标签，虽然用起来方便，但如果你想获取dom节点信息，尽管给组件绑定一个id选择器，用documentgetElementById()等这种传统的JS获取dom方式是没有任何效果。

因为他们是组件，除非你不用这些现成的组件，用回h5的标签。

所以你如果想获取uni-app提供组件的DOM元素，需要如下的方法。

unicreateSelectorQuery()in(this);用于创建一个实例。

in(this)在这里是为了规范页面创建实例，避免获取不到实例报null，用上总没错

queryselect('#text')用于选择DOM节点

boundingClientRect()返回dom节点的相关信息

拿到的是一些元素本身的宽高信息、距离页面四边的距离。

使用unicreateSelectorQuery()创建dom实例，需要在这个mounted()生命周期里面进行，这个生命周期它代表组件已经创建完成，可以挂载实例，进而获取dom元素

如果不写在mounted生命周期里，你也可以写在methods方法定义里面，不过你需要这样来调用。

您好，HTML5规范文档中指出:如果一个元素符合下面两条规则中的任一条,则window对象中必须要有与之对应的一个属性,属性值就是这个对象

如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名

如果一个元素拥有name属性,那么name属性的属性值就会成为window对象的属性名但这个元素的标签名必须是: a, applet, area, embed, form, frame, frameset, iframe, img, object,其中的一个。

> "foo" in window

false

> typeof foo // 这个全局变量到底有木有

object

//错误控制台输出了下面的警告//Element referenced by ID/NAME in the global scope

//Use W3C standard documentgetElementById() instead

> foo

[object HTMLDivElement]

//错误控制台输出了下面的警告//Element referenced by ID/NAME in the global scope

//Use W3C standard documentgetElementById() instead> "foo" in window true

常用的属性有，innerHTML属性、nodeName属性、nodeValue属性、nodeType属性等。

1、innerHTML属性，是获取元素内容的最简单方法。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

2、nodeName属性，规定节点的名称。nodeName 是只读的。

3、nodeValue属性，规定节点的值。对于元素类型的节点，其nodeValue 是 undefined 或 null；对于文本类型的节点，其nodeValue 是文本本身；对于属性类型的节点，其nodeValue是属性值。

4、nodeType属性，返回节点的类型。nodeType 是只读的。比较重要的节点类型有，元素（类型值为1），属性（类型值为2），文本（类型值为3），注释（类型值为8），文档（类型值为9）。

扩展资料

1、DOM属性访问方式

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。方法是您能够执行的动作（比如添加或修改元素）。属性是您能够获取或设置的值（比如节点的名称或内容）。

2、DOM其他属性

innerText属性设置或获取位于对象起始和结束标签内的文本，disabled属性获取表明用户是否可与该对象交互的值，nextSibling属性获取对此对象的下一个兄弟对象的引用，tagName属性获取对象的标签名称。

参考资料

百度百科-DOM

给要点击的dom加个id或者class，例如叫click-dom

然后$('#click-dom')on('click',function(){

//点击后要做的 *** 作

})

DOM： Document Object Model，文档对象模型；js提供了丰富的api来 *** 作文档内容。

DOM树： html文档中的内容是以树形结构排布，html是DOM树根，html下只有两个子标签head、body

节点： DOM将所有的分支端都成为节点。节点有很多类型，常见的节点类型有：文本节点、元素节点。

可以通过 nodeType查看节点类型 ： 1元素节点、3文本节点

特殊的元素节点：

1、html元素

2、body元素

3、head元素

节点 *** 作的api（属性和方法）

1、nodeName：只读属性，可以读取节点名称

2、nodeType：只读属性，读取节点类型

3、 hasChildNodes()：判断调用方法的节点是否存在子节点，存在返回true，不存在返回false。

主流浏览器会将换行符、制表符、空格当做文本节点处理，IE9以下会忽略它们。

4、childNodes：只读属性，获得节点的子节点集合，子节点集合是一个类数组结构，有数组特点无数组方法

5、firstChild：获得节点的第一个子节点

6、lastChild：获得节点的最后一个子节点

7、querySelector()：

参数：string类型，css选择器

作用：获得文档中第一个符合选择器条件的节点

兼容：在IE9以下不支持

8、 querySelectorAll()： // 获得的都是静态集合

参数：string类型，css选择器

作用：获得文档中所有符合选择器条件的节点集合（类数组结构）

兼容：在IE9以下不支持

注意： querySelector() 和 querySelectorAll() 得到的都是元素节点。

9、previousSibling：获取节点的前一个兄弟节点

10、nextSibling：获取节点的后一个兄弟节点

11、parentNode：获得节点的父节点（父节点一定是元素节点）

12、removeChild()：节点删除它的指定子节点

DOM *** 作元素：暂时不用的隐藏、一定不用的删除。

13、cloneNode()：克隆一个节点

参数：boolean类型，true深克隆，false浅克隆，默认浅克隆

深克隆：不仅克隆节点和节点的属性，还会克隆节点的子节点

浅克隆：只克隆节点和节点的属性，不会克隆节点的子节点

14、areplaceChild(b,c)：用b替换c

其中a是c的父节点，c是文档上已经存在的节点，b可以是节点也可以是已存在节点，被替换的节点会从文档结构中删除。

15、areplaceWith(b)：用b替换a

a已存在的节点，b可以是新节点也可以是已存在节点，被替换的节点从DOM树删除。

16、ainsertBefore(b,c)：在c前面插入b

其中，a是c的父节点，c是已经存在的节点，b是新节点

17、aappendChild(b)：在a末尾追加b

a是父节点，b是a的子节点, c是子节点

元素节点的相关api

1、getElementsByTagName()：根据标签名获得元素集合（类数组结构）

区别：HTMLCollection 是动态集合，NodeList 是静态集合。

2、createElement()：根据标签名创建新元素

3、id：读写属性，可以读取或设置元素的id值

4、className：读写属性，可以读取或设置元素的class值

5、classList：读取标签的类名集合（类数组结构）

add()：为元素新增类名，如果类名已存在不会重复添加

remove()：删除元素指定类名，如果类名不存在不会执行 *** 作

元素的属性分为两类：

一类是元素本里就拥有的属性，例如：id、class、style、src、herf、target、alt、title、type、value等等，这些属性可以在js中直接通过语法读取或设置。

再一类是我们为了解决问题给元素添加的自定义属性，这些属性在js中无法直接通过语法读取，需要通过 *** 作方法访问。

6、setAttribute(name,value)

参数：name表示要设置的属性名，value要为属性设置的值

无返回值

7、getAttribute(name)

参数：name表示要读取的属性名

返回值：返回属性的值，如果属性不存在会返回null

8、removeAttribute(name)

参数：name表示要删除的属性名

无返回值

说明：setAttribute()、getAttribute()、removeAttribute()都可以 *** 作元素的本地属性和自定义属性。

element拓展：

兼容：以下属性、方法在IE9以下不支持。

1、children：读取元素的所有元素子节点集合（类数组）

2、parentElement：读取元素的父元素节点

3、previousElementSibling：读取前一个元素兄弟节点

4、nextElementSibling：读取后一个元素兄弟节点

5、firstElementChild：读取第一个元素子节点

6、lastElementChild：读取最后一个元素子节点

7、remove(): 将调用方法的元素从DOM结构中删除

##1访问/获取节点

documentgetElementById(id); //返回对拥有指定id的第一个对象进行访问

documentgetElementsByName(name);//返回带有指定名称的节点集合 注意拼写:Elements

documentgetElementsByTagName(tagname);//返回带有指定标签名的对象集合　  注意拼写：Elements

documentgetElementsByClassName(classname);  //返回带有指定class名称的对象集合 注意拼写：Elements

##2创建节点/属性

documentcreateElement(eName);//创建一个节点

documentcreateAttribute(attrName); //对某个节点创建属性

documentcreateTextNode(text);　//创建文本节点

##3添加节点

documentinsertBefore(newNode,referenceNode);　 //在某个节点前插入节点

parentNodeappendChild(newNode);//给某个节点添加子节点

##4复制节点

cloneNode(true | false);//复制某个节点  参数：是否复制原节点的所有属性

##5删除节点

parentNoderemoveChild(node);//删除某个节点的子节点 node是要删除的节点

注意：为了保证兼容性，要判断元素节点的节点类型(nodeType)，若nodeType==1，再执行删除 *** 作。通过这个方法，就可以在 IE和 Mozilla 完成正确的 *** 作。

nodeType属性可返回节点的类型最重要的节点类型是：

元素类型节点类型

元素element        1

属性attr        2

文本text        3

注释comments        8

文档document        9

##6修改文本节点

方法作用

appendData(data);将data加到文本节点后面

deleteData(start,length);将从start处删除length个字符

insertData(start,data);在start处插入字符,start的开始值是0;

replaceData(start,length,data);在start处用data替换length个字符

splitData(offset);在offset处分割文本节点

substringData(start,length);从start处提取length个字符

##7属性 *** 作

getAttribute(name)//通过属性名称获取某个节点属性的值

setAttribute(name,value);  //修改某个节点属性的值

removeAttribute(name);　 //删除某个属性

##8查找节点

parentObjfirstChild;//如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使用 parentObjfirstChildfirstChild

parentObjlastChild;//获得一个节点的最后一个节点，与firstChild一样也可以进行递归使用 parentObjlastChildlastChild

parentObjchildNodes;   //获得节点的所有子节点，然后通过循环和索引找到目标节点

##9获取相邻的节点

curtNodepreviousSibling;  //获取已知节点的相邻的上一个节点

curtNodenextSlbling;  // 获取已知节点的下一个节点

##10获取父节点

childNodeparentNode;//得到已知节点的父节点

##11替换节点

replace(newNode,oldNode);

有一定的JS基础后，就可以进入 dom 环节了，dom使得网页的交互效果得到完美呈现，可以说dom真正打开了网页和用户之间的通道桥梁，日常生活中我们点击鼠标，敲击键盘，甚至于无意间触碰到屏幕（触摸屏），都会或多或少或大或小的得到一些躲藏起来的内容。

打开淘宝，在输入框输入商品时，下拉的推荐商品：

或是当打开某个不想再浏览的网页时，右上角的那个×：

这些大部分都存在DOM的身影。

这里的“DOM”，通常来讲，叫做 DOM 文档对象模型 ， 通过 *** 纵DOM，可以随意更改内容，样式，或者增删改查 ，因为网页是在浏览器中显示的，整个浏览器是BOM，所以DOM其实是BOM的一部分，BOM 就是 window对象 ，DOM 就是 document（文档）对象。

如果该元素，是网页的必备元素，而且只能有一个，可以通过document对象直接获取。比如：的src属性：

任由我们怎么去修饰的显示，但它本身的路径属性是独有的，所以我们可以直接获取：

更多的时候，我要需要获取网页中的指定元素，这就需要专门的方法来获取了，这里列举几个方法：

getElementById()方法，根据元素的id属性值来获取指定的元素，因为ID的唯一性，使得该方法需要搭配ID选择器使用，如果网页里ID重复时，它会获取第一个：

getElementsByTagName()方法，根据元素的标签名获取所有该元素，该方法获取的是所有该标签的元素，以伪数组的形式呈现：

getElementsByClassName()方法，根据元素的类选择器名称获取所有该元素，该方法获取的途径是标签的类，也就是class属性，由于拥有该属性的标签可能不只一个，所以该方法获得的也是一个伪数组（还有，可以看方法名，凡是带Elements的大多数都是伪数组）：

getElementsByName()方法，根据元素的name属性值获取所有该元素，相同的性质，有name属性的标签也不少：

querySelector()方法，根据选择器的名称返回元素，如果有多个元素，只返回第一个元素，这个方法就比较常用了，而且IE这个啥也不咋适配的浏览器现在几乎不咋能见到了，可以多多考虑用他了该方法是  ES6新增，无论是ID 还是class都可以选，但是和上面区别的是选ID时前面要加#号，选class时前面要加“”：

区别于Elements，这里是个单数，所以只会获取一个，要是想获取多个相同的，就用querySelectorAll()吧！querySelectorAll()看这个ALL就知道它是用来选全部的：

最后这俩方法更实用，可以选取CSS几乎所有选择器，而且querySelectorAll()得到的数组数据后还可以使用数组的方法。

*** 作DOM的样式 ，有多种方式：

通过style属性直接设置

通过className属性设置类选择器

也可以通过classList属性添加多个类选择器

*** 作DOM的内容：

innerText属性，用于获取 和 *** 作 DOM的文本内容。

innerHTML属性，用于获取 和 *** 作 DOM的HTML内容：

createElement()方法，用于创建DOM元素：

appendChild()方法，用于在当前DOM元素中添加子元素：

自删 remove()方法，是元素删除自己:

通过父级删除子级 removeChild()方法，是删除元素里面指定的子元素:

以上就是关于uni-app获取dom节点信息全部的内容，包括:uni-app获取dom节点信息、js获取已知id的DOM元素、常用的 HTML DOM 属性是什么等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！