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有效的命名,需要改写成驼峰式

修改类

• element.classList.add() 添加class
• element.classList.remove() 移除class

操作DOM(操作的是Node节点node)

DOM查找

• element.children 获取当前元素的所有子元素(element)
• 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()

修改类

• $(selector).addClass()
• $(selector).removeClass()

操作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=$("<div>我是DOM</div>")

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