javascript学习笔记 - DOM基础

以下内容为笔记,方便查阅。对您可能没有价值!

DOM 节点

childNodes - 子节点


var obj = document.getElementById('xx');
obj.childNodes; // 获取obj的子节点
obj.childNodes.length; //childNodes是一个数组,有length属性

//(ie6-8) obj.childNodes.length == 元素节点数量
//(高级浏览器) obj.childNodes.length == 元素节点+文本节点数量

nodeType - 节点类型


var obj = document.getElementById('xx');
var nodeType_id = obj.childNodes[0].nodeType; //获得子节点类型
  • obj.nodeType == 3 //文本节点
  • obj.nodeType == 2 //属性节点
  • obj.nodeType == 1 //元素节点

children - 子节点


var obj = document.getElementById('xx');
obj.children; //获取obj的子节点
obj.children.length;
  1. childrenchildNodes区别:
  2. childNodes 在高级浏览器中获取的子节点为元素节点文本节点的集合。
  3. children 获取的子节点仅包含元素节点
  4. children 在ff3.5版本之前不被支持,现可放心使用。
  5. 如需使用childNodes获取元素节点,需结合nodeType判断节点类型。

parentNode - 父节点


var obj = document.getElementById('xx');
obj.parentNode; //获取obj的父节点

offsetParent - 用于定位的父节点

根据样式不同,父节点不同。找到的父节点为最近的一个position元素。

firstChild / firstElementChild - 元素的第一个子节点


var obj = document.getElementById('xx');
obj.firstChild; //获取第一个子节点
obj.firstElementChild; //获取第一个子节点

firstChild / firstElementChild 区别:

  • firstChild
    • 在(ie6-8)中获得的是第一个元素子节点;
    • 在高级浏览器中,获得的是第一个子节点(文本节点或元素节点)
  • firstElementChild
    • (ie6-8)不支持此方法;
    • 高级浏览器使用此方法才能获取第一个元素子节点;

兼容方案(能力判断)


var obj = document.getElementById('xx');
oFirstChild = obj.firstElementChild || obj.firstChild;

其他节点方法

  • lastChild / lastElementChild //最后一个子节点
  • nextSibling / nextElementSibling //下一个兄弟节点
  • previousSibling / previousElementSibling //上一个兄弟节点

var obj = document.getElementById('xx');

//obj的最后一个子节点
oLastChild = obj.lastElementChild || obj.lastChild;

//obj的下一个兄弟节点
oNextSibling = obj.nextElementSibling || obj.nextSibling;

//obj的上一个兄弟节点
oPreviousSibling = obj.previousElementSibling || obj.previousSibling;

以上方法同firstChild / firstElementChild有相同的兼容问题。

DOM方式操作元素属性

  • getAttribute(属性名) //获取属性
  • setAttribute(属性名,值) //设置属性值
  • removeAttribute(属性名) //删除属性

var obj = document.getElementById('xx');

//设置obj的value值为123
//相当于obj.value='xx' 或 obj['value']='xx'
obj.setAttribute('value','123');

//获取obj的value属性值
//相当于obj.value 或 obj['value']
obj.getAttribute('value');

//删除obj的value属性
obj.removeAttribute('value');

综合应用 - 封装getElementByClass


// 基础版本
function getElementByClassName(classname){
var aResult = [];
var aEle = document.getElementsByTagName('*');

for(var i=0;i<aEle.length;i++){
if(aEle[i].className == classname){
aResult.push(aEle[i]);
}
}

return aResult;
}

评论