DOM编程之原生JS与JQuery对比

dom-原生js与jquery对比

原生js

获取

document.getelementby..("id") 获取element对象 document.queryselectorall(".class") 和 document.queryselector("#id") 获取element对象(ie>8)

修改内容

element.innerhtml 返回或修改标签内所有内容,包括html标签,输出格式带缩进和换行 element.innertext 返回或修改文本内容,不包括html标签,输出格式不带缩进,自动换行,不输出隐藏标签的内容,不输出style标签的内容 element.textcontent 返回或修改文本内容,不包括html标签,输出格式带缩进和换行,会输出display:none标签的内容,会输出style标签的内容

修改属性

element.attribute 获取所有的属性,返回的是一个namednodemap对象 element.getattribute() 返回指定的属性值 element.setattribute() 设定指定的属性值

修改css

element.style.fontsize 由于font-size并非javascript有效的命名,需要改写成驼峰式

操作dom(操作的是node节点node)

dom查找

element.childnodes 获取当前节点的所有子节点 element.firstchild 获取当前节点的第一个子节点 element.lastchild获取当前节点的最后一个子节点 element.parentnode获取当前节点的父节点 element.previoussibling获取当前节点的前一个同级节点 element.nextsibling获取当前节点的后一个同级节点

dom创建

document.createelement(tag) 创建一个html标记对象 document.createtextnode('text') 创建一个文本节点

dom插入

element.appendchild()向元素中添加节点 element.insertbefore()在指定的已有的子节点之前插入新节点

dom删除

element.removechild() 从元素中移除子节点

dom替换

element.replacechild() 替换元素中的子节点

dom克隆

element.clonenode(true|false) 克隆选中的节点,并返回副本,括号中的参数为是否要克隆所有后代

jquery

获取

$(selector)获取的是一个包含element元素的数组 ,$("#id")[0] === document.getelementbyid("id"),可以通过这个方式来调用原生js的方法

修改内容

$(selector).html() $(selector).text() $(selector).val()

修改属性

$(selector).attr()

修改css

$(selector).css()

操作dom(操作的是元素节点element)

dom查找

$(selector).parent() 方法返回被选元素的直接父元素(1个） $(selector).parents() 方法返回被选元素的所有祖先元素。(1个或多个） $(selector).prev() 方法返回被选元素的前一个兄弟元素(1个）。相同父元素的元素。 $(selector).next() 方法返回被选元素的后一个兄弟元素(1个）。相同父元素的元素。 $(selector).siblings() 方法返回被选元素的所有兄弟元素(1个或多个）。相同父元素的元素。 $(selector).find() 方法返回被选元素的所有后代元素。后代是子、孙、曾孙、依此类推。 $(selector).children() 方法返回被选元素的所有直接子元素

dom创建

var odiv=$("

我是dom

")

dom插入

$(selector).append() 向该元素内部增加内容（末尾）父 添加 子

$(selector).appendto() 将要增加的内容增加到元素（末尾） 子 给 父

$(selector).after() 方法在被选元素之后插入内容。(兄弟)

$(selector).before() 方法在被选元素之前插入内容。(兄弟)

dom删除

$(selector).remove()删除被选元素（删除自身及其子元素）

$(selector).empty(）清空子该元素（只删除所有子节点）

dom替换

$(selector).replacewith() 将所选择的元素(select)替换成括号中的元素

$(selector).replaceall() 用括号中的元素替换成所选择的元素(select)

dom克隆

$(selector).clone(true|false) 生成被选元素的副本,包含子节点,文本和属性,括号中的参数为是否要复制时间处理程序