欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

DOM编程之原生JS与JQuery对比

程序员文章站 2022-06-04 23:06:16
dom-原生js与jquery对比 原生js 获取 document.getelementby..("id") 获取element对象 document.queryselecto...

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) 生成被选元素的副本,包含子节点,文本和属性,括号中的参数为是否要复制时间处理程序