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