DOM的理解与 *** 作

有一定的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()方法，是删除元素里面指定的子元素:

$("#content1")

append(

'<table id="1_'//id=1_type

+ type

+ '"><tr><td>分享语句'

+ type

+ '</td></tr><tr>'

+ '<td><div id="wshopshare"></div></td>'

+ '<td><input name="wshopshare" id="wshopshare" type="text" style="width: 440px; "></td>'

+ '<td></td>'

+ '<td><button type="button" id="del1" onclick="componentdeleteAll(\'1\');">删除</button></td>'

+ '</tr></table>');

首先明白一点，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方法定义里面，不过你需要这样来调用。

in在js里是遍历属性，而不是遍历数组

改成：

for(var i=0;i< documentgetElementsByClassName('left')length;i++){

var k = documentgetElementsByClassName('left')[i];

kstyledisplay = "none";

}

以上就是关于DOM的理解与 *** 作全部的内容，包括:DOM的理解与 *** 作、如何通过jquery获取js动态append到html页面的dom属性、uni-app获取dom节点信息等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！