利用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;----三元表达式。
在各种浏览器中存在三种事件模型:原始事件模型,DOM2事件模型,IE事件模型。
其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE以外的所有主流浏览器支持
原始事件模型：
在原始事件模型中(也有说DOM0级)，事件发生后没有传播的概念，没有事件流。北大青鸟认为事件发生，处理，结束，就这么简单。监听函数只是元素的一个属性值，通过指定元素的属性值来绑定监听器。书写方式有两种：
(1)HTML代码中指定属性值：
(2)在js代码中指定属性值：documentgetElementsByTagName(‘input’)[0]onclick=func
优点：所有浏览器都兼容
缺点：
1逻辑与显示没有分离
2相同事件的监听函数只能绑定一个，后绑定的会覆盖掉前面的
3无法通过事件的冒泡、委托等机制。
DOM2事件模型
此模型是W3C制定的标准模型。W3C制定的事件模型中，一次事件的发生包含三个过程：
(1)事件捕获阶段。事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节点是否注册了该事件的监听函数，若有则执行。
(2)事件处理阶段。事件到达目标元素,执行目标元素的事件处理函数
(3)事件冒泡阶段。事件从目标元素上升一直到达document，同样依次检查经过的节点是否注册了该事件的监听函数，有则执行。
所有的事件类型都会经历"事件捕获阶段"但是只有部分事件会经历"事件冒泡阶段"阶段,例如submit事件就不会被冒泡。
etarget与ecurrentTarget是干什么的
etarget获取当前实际触发事件节点，ecurrentTarget获取获取当前监听节点。
11111
$('div')on('click',function(e){consolelog(ecurrentTarget);consolelog(etarget);})
如果点击span的输出：
li对象
span对象
点击li的非span区域，输出
li对象
li对象
preventDefault与stopPropagation是干什么的
首先是自己的所有后代： $("#b")find("")
然后是自己的所有弟弟：$("#b")nextAll()
接着是弟弟们的所有后代：$("#b")nextAll()find("")
然后是自己所有祖先的弟弟（父亲的弟弟、祖父的弟弟……）：$("#b")parents()nextAll()
最后是所有祖先的弟弟们的所有后代：$("#b")parents()nextAll()find("")
获取到div将display 设置成 block 呗。
// 绑定单击事件$('a')on('click', function() {
// div 是 a 标签的下一个兄弟节点，直接获取它即可。
$(this)next()css('display', 'block');
})
js找一个子元素的父元素：
<!DOCTYPE html><html><head>
<meta charset="utf-8">
</title> <script type="text/javascript"> function deleteElement(Obj)
{ ObjparentNodeparentNoderemoveChild(ObjparentNode); } </script></head>
<body> <ul class="list2" ><li ><img alt="" src="1jpg" /><div>mingzi1</div>
<a onclick="deleteElement(this)">删除</a></li><li ><img alt="" src="2jpg" />
<div>mingzi2</div><a onclick="deleteElement(this)">删除</a></li><li >
<img alt="" src="3jpg" /><div>mingzi3</div><a onclick="deleteElement(this)">删除</a>
</li></ul></body></html>
删除一个父元素下面的所有子元素:
documentgetElementById("ok")innerHTML = "";
删除其中的一个：
documentgetElementById("ok")remove(documentgetElementById("ok")children(i));
//删除id为"ok"下的第i-1个子元素
从定义来理解appendChild() 方法：
appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild)
appendChild方法是在父级节点中的子节点的末尾添加新的节点（相对于父级节点 来说）。
来看个这个简单的实例：在id为box-con 的末尾添加一个子节点div
windowonload = function () {
var btn = documentgetElementById("creatbtn");
btnonclick = function() {
insertEle();
}
}
function insertEle() {
var oTest = documentgetElementById("box-one");
var newNode = documentcreateElement("div");
newNodeinnerHTML = " This is a newcon ";
//oTestappendChild(newNode);
oTesetinsertBefore(newNode,null); // 这两种方法均可实现
}
有好多种方法，比如：
documentgetElementById("xxx");是通过元素Id来取得元素，这是获取单一元素的最快途径。
documentgetElementsByName("xxx");则可以根据元素Name来取得一系列的元素，因为name不同意，这样需要通过[index]来取得相对应的元素。
其他还有不少，建议查阅一下资料，以上是用得比较多的。
以上就是关于javascript获取dom的下一个节点方法全部的内容，包括:javascript获取dom的下一个节点方法、北大青鸟分享js代码事件机制识别、使用jquery查找某个元素之后的所有满足条件元素（包括兄弟节点、子节点和无关节点）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）