有一定的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()方法，是删除元素里面指定的子元素:
$event：当前触发的是什么事件
$eventtarget:触发事件的元素对象（不一定是绑定事件的对象，会因为事件冒泡变化）
$eventcurrentTarget:绑定事件的元素对象
参考：
vue中关于$event的通俗理解
Vue 点击获得父元素，子元素，兄弟元素（DOM *** 作）
请参照 css3 伪类选择器；
:first-child
选择某个元素的第一个子元素（IE6不支持）
:last-child
选择某个元素的最后一个子元素
:first-of-type
[CSS3]选择一个上级元素下的第一个同类子元素
:last-of-type
[CSS3]选择一个上级元素的最后一个同类子元素
:only-child
[CSS3]选择的元素是它的父元素的唯一一个了元素（IE6-8不支持）
:only-of-type
[CSS3]选择一个元素是它的上级元素的唯一一个相同类型的子元素（IE6-8不支持）
:nth-child()
[CSS3]选择某个元素的一个或多个特定的子元素（IE6-8不支持）
:nth-last-child()
[CSS3]选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算（IE6-8不支持）
:nth-of-type()
[CSS3]选择指定的元素（IE6-8不支持）
:nth-last-of-type()
[CSS3]选择指定的元素，从元素的最后一个开始计算（IE6-8不支持）
jquery中获取当前dom元素的子元素的方法有很多，常见的方法是使用children()方法或者fand()方法都是可以获取到某个元素的子元素的,children() 方法返回匹配元素集合中每个元素的子元素，find()方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
工具原料：jQuery、编辑器、浏览器
一、使用children()方法获得子元素
1、使用该方法获取子元素并设置子元素的字体为蓝色，代码如下：
<!DOCTYPE html><html>
<head>
<script type="text/javascript" src="/jquery/jqueryjs"></script>
<style>
body { font-size:16px; font-weight:bolder; }
p { margin:5px 0; }
</style>
</head>
<body>
<div>
<span>Hello</span>
<p class="selected">Hello Again</p>
<div class="selected">And Again</div>
<p>And One Last Time</p>
</div>
<script>$("div")children("selected")css("color", "blue");</script>
</body>
</html>
2、运行的效果如下图：
二、使用find()方法获取子元素
1、使用fand()方法获取子元素并且进行选择器的筛选，代码如下图：
<!DOCTYPE html><html>
<head>
<script type="text/javascript" src="/jquery/jqueryjs"></script>
</head>
<body>
<p><span>Hello</span>, how are you</p>
<p>Me I'm <span>good</span></p>
<script>
$("p")find("span")css('color','red');
</script>
</body>
</html>
2、运行的结果如下图：
可以得到各种浏览器的DOM对象属性方法
<table id="table">
</table>
<script language="javascript">
function showObject(obj) {
var ms = []
for(var m in obj) mspush(m)
mssort()
var html = ""
for (var i in ms) {
var m = ms[i]
html += m + ": " + obj[m] + "<br>/n"
}
html += "<br><br>"
documentwrite(html)
}
var o = documentgetElementById("table")
showObject(o)
</script>
和wbpack生命周期方法一样, 都是在从生到死的特定阶段调用的方法
PS: 生命周期钩子 = 生命周期函数 = 生命周期事件
21创建期间的生命周期方法beforeCreate:
created:
beforeMount:
mounted:
22运行期间的生命周期方法beforeUpdate:
updated:
23销毁期间的生命周期方法beforeDestroy:
destroyed：
1Vue特殊特性Vue特点: 数据驱动界面更新, 无需 *** 作DOM来更新界面
也就是说Vue不推荐我们直接 *** 作DOM, 但是在企业开发中有时候我们确实需要拿到DOM *** 作DOM
那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM
在Vue中如果想要拿到DOM元素我们可以通过ref来获取2ref使用21在需要获取的元素上添加ref属性 例如: <p ref="mypp">我是段落
22在使用的地方通过 this$refsxxx获取, 例如this$refmyppp
3ref特点ref添加到元素DOM上, 拿到的就是元素DOM
ref添加到组件上, 拿到的就是组件
1Vue渲染组件的两种方式
11先定义注册组件, 然后在Vue实例中当做标签来使用
12先定义注册组件, 然后通过Vue实例的render方法来渲染
2两种渲染方法的区别
11当做标签来渲染, 不会覆盖Vue实例控制区域
12通过render方法来渲染, 会覆盖Vue实例控制区域
componentDidMount() {
consolelog('22',ReactDOMfindDOMNode(thisrefsmode))
consolelog('22',ReactDOMfindDOMNode(thisrefsmode1))
}
<Modal title="Basic Modal" visible={true} ref="modal"
onOk={thisdel} onCancel={thisdel}
><div ref="modal1">
<p >some contents</p>
<p>some contents</p>
<p>some contents</p>
</div>
</Modal>
只能选到 modal1 选不到modal
不懂你获取dom元素 是那部分，如果是内部的可以，如查是 modal 框架的就不可以
以上就是关于DOM的理解与 *** 作全部的内容，包括:DOM的理解与 *** 作、vue获取当前点击元素的dom对象、css中如何获取dom元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）