用了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的文档处理