JS基础【对DOM的简单认识】

为什么80%的码农都做不了架构师？>>>   

DOM基础1

一、DOM是什么?

DOM1标准,DOM2标准

二、浏览器支持:

FF非常标准 : DOM1 DOM2都实现

Chrome\Safari:  DOM1大部分  DOM2部分


IE:  DOM1大部分  DOM2没有支持


三、DOM节点

1、childNodes子节点；
火狐将空行、文本节点和文字都算作子节点（有兼容性问题）；
解决办法看第2点（使用childNodes需要和nodeType一起使用，防止兼容性问题）

2、nodeType：
   3代表文本节点
   1表示元素节点
if(xxx.nodeType==1){
xxx[i].style.background='red';
}

3、children(相当于childNode的兼容版)

4、parentNode父节点
例子：点击隐藏父节点


5、offsetParent 获取元素在页面上的位置
例子：获取当前节点的位置


DOM基础2

DOM节点2

首尾节点--有兼容性问题
1、firstChild获取第一个子节点（只能在IE下使用；火狐下的兼容性，解决办法：firstElementChild）；
例子： 
var xxx = document.getElementById("li");
var oFirst = xxx.firstChild||xxx.firstElementChild;


2、lastChild||lastElementChild 最后一个子节点


兄弟节点--有兼容性问题
3、nextSibling || nextElementSibling 下一个兄弟节点


4、previousSibling || previousElementSibling


操纵元素属性

一、元素属性操作

第一种：oDiv.style.display="block";
第二种：oDiv.style["display"]="block";
第三种：DOM方式


二、DOM方式操作元素属性

获取：getAttribute(名称)
设置：setAttribute(名称,值)
删除：removeAttribute(名称)


DOM元素灵活查找


一、用className选择元素


1、如何用className选择元素
选出所有元素   
通过className条件筛选
if(xxx.className=="box"){xxx.style.background="red";}


2、封装成函数

function getByClass(oParent,sClass)
{
var aEle = oParent.getElementsByTagName("*");//通配符*，可以选择所有类型元素；
var result=[]
var i = 0;
for (var i=0;i<aEle.length;i++){
if(aEle[i].className==sClass){
result.push(aEle[i]);
}
}
return result;
}

转载于:https://my.oschina.net/parker/blog/92118