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() 设定指定的属性值
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) 生成被选元素的副本,包含子节点,文本和属性,
括号中的参数为是否要复制时间处理程序
如对本文有疑问,
点击进行留言回复!!
相关文章:
-
-
-
-
-
-
-
CSS中的四种定位区别详解
我们都知道,前端开发里面的css中常用的定位方式有普通定位,相对定位,绝对定位、固定定位定位这四种。但是很多零基础的前端小白都不知道这4种定位方式都有什么作用和...
[阅读全文]
-
-
-
-
网友评论