利用javascript
写一个在页面点击加减按钮实现数字的累加。
简略的html大概如此。看得懂就好不要在意这些细节啊
<input
type="button"
value="+"
onclick="jia(this)"
/>
<label
class="num">0</label>
<input
type="button"
value="-"
onclick="jian(this)"
/>
样子是这样的
javascript
代码如下
<script
type="text/javascript">
function
jia(a)
{
var
nextnode
=
anextElementSibling;//获取下一个节点
alert(nextnodeinnerHTML);
var
a
=
parseInt(nextnodeinnerHTML)
a
+=
1;
nextnodeinnerHTML
=
a;
}
function
jian(a)
{
var
previousnode
=
apreviousElementSibling;
var
a
=
parseInt(previousnodeinnerHTML)
a
-=
1;
a
=
a
>
0
a
:
0;
previousnodeinnerHTML
=
a;
}
</script>
解释一下：
function
jian(a）和
function
jia(a)就是当前点击的对象了。在onclick事件接的方法里加了this;
-
nextElementSibling
获取当前节点的下一个节点(获得下一个兄弟节点)
-
previousElementSibling
获取当前节点的上一个节点
注意：
IE将跳过在节点之间产生的空格文档节点（如：换行字符），而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取，因此，在ie
中用nextSibling便可读取到的下一个节点元素，在FF中就需要这样写：nextElementSibling了。
上面的解释的意思的使用
nextElementSibling
和previousElementSibling
获得下一个兄弟节点和上一个兄弟节点，可以去掉换行，空格上面之类的，直接找到我们标签元素。但是下面的两个
nextSibling
previousSibling
也是得下一个兄弟节点和上一个兄弟节点的，只是在IE中好用
--------------------关键字解释
parseInt
转化功能。
a
=
a
>
0
a
:
0;----三元表达式。
Document
Document接口表示在浏览器中加载的任何网页，并作为到网页内容的入口点，这是 DOM 树。 DOM树包括诸如<body> 和 <table>之类的元素，其他等等。其也为文档（document）提供了全局性的函数，例如获取页面的URL、在文档中创建新的 element 的函数。它为文档提供全局的函数，像如何获取页面的URL和在文档中创建新的元素。
这里主要用于Document的两个方法
1、 documentgetElementById
返回一个匹配特定 ID的元素
<script>function changeColor(newColor) {
var elem = documentgetElementById("para1");
elemstylecolor = newColor;
}
</script>
</head>
<body>
<p id="para1">Some text here</p>
</body>
新手注意：
新手要注意方法名中 'Id' 的拼写——'getElementByID' 是没有作用的。许多人会忽视这个错误。
如果没有查找到对应的元素，方法会返回null。注意ID参数是大小写敏感的，所以documentgetElementById("Main")无法获取到元素<div id="main">，因为'M'和'm'是不一样的。
2、DocumentgetElementsByClassName()
返回一个类似数组的对象，包含了所有指定 class 名称的子元素。
documentgetElementsByClassName('test'); //获取所有class为'test'的元素documentgetElementsByClassName('red test'); //获取所有class同时包括'red'和'test'的元素
ref 目前使用过的三种方式：
1、在html的元素中使用rel，可在js中直接调用该元素，用this$refs（ref值） 获取到的是dom元素
2、在vue的组件上加rel，可在js中直接使用该组件包括该组件的方法，用this$refs（ref值）方法名()
3、在v-for的循环列中使用rel
避坑：
v-for中使用rel需要绑定 变量 ，即v-bind:rel='变量名'
ref 需要在dom渲染完成后才会有 ，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用 ，或者 在 this$nextTick(()=>{}) 中调用 。
如果rel循环未绑定变量，那就$refs获取获取数组再循环得到使用即可
例子1：在html元素上使用
<div id="app">
<h1 ref="h1ele">这是h1</h1>
<hello ref="ho"></hello>
<button @click="getref">获取h1元素</button>
</div>
获取注册过 ref 的所有组件或元素
methods: {
getref() {
// 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素
consolelog(this$refsh1eleinnerText);
this$refsh1elestylecolor = 'red';// 修改html样式
consolelog(this$refshomsg);// 获取组件数据
consolelog(this$refshotest);// 获取组件的方法
}
}
例子2：
<html部分
<view class="example-body">
<button class="button" type="primary" @click="togglePopup('top', 'popup')">顶部d出 popup</button>
<button class="button" type="primary" @click="togglePopup('center', 'popup')">中间d出 popup</button>
<button class="button" type="primary" @click="togglePopup('bottom', 'popup')">底部d出 popup</button>
</view>
<uni-popup ref="showpopup" :type="type" @change="change"><text class="popup-content">{{ content }}</text></uni-popup>
<uni-popup ref="showtip" :type="type" :mask-click="false" @change="change">
<view class="uni-tip">
<text class="uni-tip-title">警告</text>
<text class="uni-tip-content">这是一个通过自定义 popup，自由扩展的 警告d窗。点击遮罩不会关闭d窗。</text>
<view class="uni-tip-group-button">
<text class="uni-tip-button" @click="cancel('tip')">取消</text>
<text class="uni-tip-button" @click="cancel('tip')">确定</text>
</view>
</view>
</uni-popup>
<js部分
methods: {
togglePopup(type, open) {
switch (type) {
case 'top':
thiscontent = '顶部d出 popup'
break
case 'bottom':
thiscontent = '底部d出 popup'
break
case 'center':
thiscontent = '居中d出 popup'
break
}
thistype = type
this$nextTick(() => {
this$refs['show' + open]open()
})
},
cancel(type) {
this$refs['show' + type]close()
},
change(e) {
consolelog('是否打开:' + eshow)
}
},
一般来讲获取DOM元素，需documentquerySelector（"class"）获取这个dom节点，然后在获取元素的值。
但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的元素上绑定rel，然后$refs里面调用就行。
然后在javascript里面这样调用：this$refs元素绑定rel 这样就可以减少获取dom节点的消耗了
id选择器：一个用来查找的ID，即元素的id属性
id选择器也是基本的选择器，jQuery内部使用JavaScript函数documentgetElementById()来处理ID的获取。原生语法的支持总是非常高效的，所以在 *** 作DOM的获取上，如果能采用id的话尽然考虑用这个选择器
值得注意：
id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的
类选择器，顾名思义，通过class样式类名来获取节点
描述：
类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选
元素选择器
元素选择器：根据给定（html）标记名称选择所有的元素
描述：
全选择器
抛开jQuery，如果要获取文档中所有的元素，通过documentgetElementsByTagName()中传递""同样可以获取到
不难发现，id、class、tag都可以通过原生的方法获取到对应的节点，但是我们还需要考虑一个兼容性的问题，我这里顺便提及一下，比如:
IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的
getElementById的参数在IE8及较低的版本不区分大小写
IE7及较低的版本中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名并且A在B之前，那么getElementById会选中A
IE8及较低的版本，浏览器不支持getElementsByClassName
DOM 节点和元素的区别
获取元素
id获取： getElementById
class获取 ：getElementsByClassName
tag获取 ：getElementsByTagName
css选择器来获取： querySeletor
获取多个元素： querySeletorAll
通过名字 ： getElementByName
元素和节点的各种关系 (node节点 element 元素);
子关系
子元素 ： children
子节点： childNodes
第一个子元素 ：firstEelementChild
第一个子节点： fisetChild
最后一个子元素： lastEelementChild
最后一个子节点：lastChild
父关系
parentNode
parentElementNode
兄弟关系
上一个子元素 ： previousElementSibling
上一个子节点： previouseSibling
下一个子元素： nextElementSibling
下一个子节点：nextSibling
元素的增删改查
创建一个元素 createElement("标签名");
添加一个父容器里面 父元素appendChild(子元素)
只会添加到父容器的最后
添加到某一个元素之前 父元素insertBefore("添加的元素","添加到哪个之前");
删除元素
removeChild： 父元素removeChild("要删除的元素");
remove(): 要删除的元素remove();
修改
替换: 父元素replaceChild(“替换的新元素”,“替换的旧元素”);
获取非行间样式
Chrome： 样式值 = getComputyStyle("元素","伪类")[‘样式名’]
IE : currentStyle： 元素currentStyle样式名
下面例子通过documentgetElementsByClassName("class1")获取所有同一class的元素，使用for循环把取得的div元素的值存入数组arr中，完成的代码如下：
运行结果，打印数组如下：
扩展资料：
js或jQuery获取html元素的值的常用方法：
例如：<div id="aa">值</div>
js写法：
alert(documentgetElementById('aa')innerHTML);
jQuery写法：
alert($('#aa')html());
说明如下：
innerHTML是取元素的内部html代码，此例中即div内部的所有html代码。
html()方法作用也是取dom节点的内部html内容，是jQuery中的函数方法。
不知道你具体是要修改i的样式还是移除class，所以都给你说了吧
$('#defo')addClass()、$('#defo')removeClass()、$('#defo')toggleClass()、$('#defo')css()
一般都是用id去获取dom节点，因为id相对唯一，如果是要改变多个就用$('fa')[Methods]
documentgetElementsByClassName()或ElementgetElementsByClassName，如果你说的是第二种，那么就可以找出子节点中含有此样式的节点。另外，这是Javascript在DOM中的方法，从应用场景来看，通过className很难分辨出父子节点，但还是可以利用offsetParent、parentElement、childElements可以找到它们之间的关系。
以上就是关于javascript获取dom的下一个节点方法全部的内容，包括:javascript获取dom的下一个节点方法、原生js问题。选取class选择器。使用id的时候，js可以选取到，但是使用class的时候js选取不到。、vue中$refs的使用记录等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）