解决根据类名查找元素兼容问题:
function byClassName(className, context) {
// 默认在 document 文档中查找
context = context || document;
/* 支持使用 getElementsByClassName 方法,则直接使用 */
if (context.getElementsByClassName)
return context.getElementsByClassName(className);
/* 不支持使用 getElementsByClassName 方法 */
// 保存所有查找到元素的数组
var _result = [];
// 将查询上下文后代中所有元素查找出来
var _tags = context.getElementsByTagName("*");
// 遍历迭代所有元素
for (var i = 0, len = _tags.length; i < len; i++) {
// 获取当前遍历到元素的所有类名
var _classNames = _tags[i].className.split(" ");
// 遍历所有类名
for (var j = 0, l = _classNames.length; j < l; j++) {
if (_classNames[j] === className) { // 当前元素的某个类名与待查找的类名一致
// 说明当前遍历到的元素是需要查找的元素之一
_result.push(_tags[i]);
break;
}
}
}
// 返回所有查找到的结果
return _result;
}
添加
创建元素节点:
var element = document.createElement(tagName)
设置属性:
element.setAttribute(attrName, attrValue)
或
element.<attrName> = attrValue
添加到父元素内部
parentElement.appendChild(element);
如果 element 是页面中已存在的DOM元素,则该方法为移动元素
添加到父元素内部某子节点前
parentElement.insertBefore(newNode, oldNode);
如果 oldNode 不存在,则将 newNode 追加到末尾
元素内部文本:
element.innerHTML
-- 内部HTML文本
element.innerText
-- 内部纯文本
创建文本节点:var txtNode = document.createTextNode(text)
可以将文本节点添加到元素内部:element.appendChild(txtNode);
删除
parentElement.removeChild(childNode)
父元素内部删除孩子节点
克隆
var copy = node.cloneNode(boolean)
boolean 表示是否克隆元素后代,默认为 false(不克隆),如果需要克隆节点后代,则传递 true
查找(层级--属性):
node.parentNode -- 查找父节点
node.childNodes -- 所有孩子节点
node.children -- 所有孩子元素节点
node.firstChild -- 第一个孩子
node.lastChild -- 最后一个孩子
node.previousSibling -- 前一个兄弟节点
node.nextSibling -- 后一个兄弟节点
CSSOM
CSS-Object Model
获取:
行内(内联)
element.style
所有
window.getComputedStyle(element) -- 经过计算后的样式
-- IE9之前浏览器不支持:element.currentStyle
设置:
element.style.<attrName> = attrValue;