Javascript及Jquery获取元素节点以及添加和删除操作

–>

Javascript及Jquery获取元素节点以及添加和删除操作

用了javascript和jquery很久，把所有元素节点的操作总结了下，放在博客上作为记录。

Javascript获取元素的主要方式有三种

1、document.getElementById(\’main\’)：表示从document中查找一个id是main的dom节点。（这个跟$(\’#main\’)的作用是一样的）

2、通过名称name选取元素document.getElementsByName(“domName”)

a. 返回值是一个nodeList集合（区别于Array）

b. 和ID属性不一样，name属性只在少数DOM元素中有效（form表单、表单元素、iframe、img）。这是因为name属性是为了方便提交表单数据而打造的。  

c.为form、img、iframe、applet、embed、object元素设置name属性时，会自动在Document对象中创建以该name属性值命名的属性。所以可以通过document.domName引用相应的dom对象

3、通过标签名选取元素element.getElementsByTagName(“tagName”)

其中，element是有效的DOM元素（包括document），tagName是DOM元素的标签名。

a. tagName不区分大小写

b. 当tagName为*时，表示选取所有元素（需遵从b.规则）

Jquery选取元素的方法就不多说了，方法非常多，相关的文章和教程也非常多。

Javascript获取父元素或子元素的方法

var a = document.getElementByIdx_x_x(“dom”);

var b = a.childNodes;   获取a的全部子节点(返回节点的子节点集合，以 NodeList 对象)

这个方法需要注意的是，会出现获取隐藏的节点情况，具体原因，我还没搞清除，不过使用时候留心就可以了。

var c = a.parentNode;   获取a的父节点

var d = a.nextSbiling;   获取a的下一个兄弟节点

var e = a.previousSbiling;获取a的上一个兄弟节点

var f = a.firstChild;    获取a的第一个子节点

var g = a.lastChild;     获取a的最后一个子节点

jQuery获取父元素或子元素的方法

jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$(“span”).parent()或者$(“span”).parent(“.class”)

jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素

jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回孙节点

jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个jQuery对象返回，children()则只会返回节点

jQuery.prev()，  返回上一个兄弟节点，不是所有的兄弟节点

jQuery.prevAll()，返回所有之前的兄弟节点

jQuery.next(),   返回下一个兄弟节点，不是所有的兄弟节点

jQuery.nextAll()，返回所有之后的兄弟节点

jQuery.siblings(), 返回兄弟姐妹节点，不分前后

jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()的返回结果，不会有初始集合中的内容，比如$(“p”),find(“span”),是从p元素开始找,等同于$(“p span”)

Javascript添加及插入节点

appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild)

insertBefore() 方法：可在已有的子节点前插入一个新的子节点。语法 ：insertBefore(newchild,refchild)

replaceChild()方法接受的两个参数是：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置。 

注意：并没有insertAfter()，我这种脑洞比较大的人，总是被这个insertAfter坑。。。

在Javascript中，只提供了一种删除节点的方法：removeChild(node)

node 的类型为Node object，是必需的。Node就是希望删除的节点对象。

例子：

document.getElementById("thisNode").onclick=function(){
this.parentNode.removeChild(this);
}

removeChild() 方法指定元素的某个指定的子节点。

以 Node 对象返回被删除的节点，如果节点不存在则返回 null。

jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）

jquery的api做的比较好，我直接放图片，Jquery的文档处理

原文链接：https://www.cnblogs.com/qixinbo/p/6929652.html
本文来源 互联网收集，文章内容系作者个人观点，不代表 本站 对观点赞同或支持。如需转载，请注明文章来源,如您发现有涉嫌抄袭侵权的内容，请联系本站核实处理。