Js学习---妙味课堂2-2 （说一些DOM的基础知识）

DOM基础（1）

　　DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点

DOM

很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。

DOM基础：

• 什么是DOM：帮助浏览器操作浏览器
• 浏览器支持情况

DOM结点：

• childNodes(有兼容性问题： ff下将空行文本结点也计算在内)  用  nodeType  解决

　　　　--- 获取子节点

　　　　--- children  ---   兼容版的 childNodes --- 一般取第一层的子节点，直接使用children即可

• parentNode（获取结构上的父级） --- 没有兼容性问题   this.parentNode....改变属性
• offsetParent （获取该元素用来定位的父级。）

DOM结点（2）

• 首尾子节点：

firstChild --- 也存在兼容性问题 ff下不行，可以使用：  firstElementChild (但这个在IE下不行) --- 只能通过if  else 判断兼容，

或者： var oFirst= oUl.firstElementChild || oUl.firstChild ; oFirst.style.background='red';

lastChild

• 兄弟结点： 也存在兼容性问题

nextSibling   /   nextElementSibling

previousSibling   /   previousElementSibling （前面的IE支持，后面的FF支持）

 

操纵元素属性：

以前的方式:

oDiv.style....

DOM方式：  

• 获取：getAttrbute(名称);
• 设置：setAttribute('属性','值');
• 删除：removeAttrbute(名称);

 

DOM元素灵活查找：（以前的两种通过id以及标签名称获取元素方式有局限性，现在希望通过class来进行选取元素(注意这里用 className )）

• 如何用className选择元素

1. 选出所有元素
2. 通过className条件筛选

方法：　　　

　　基于之前的两种方式，最后使用一个循环进行判断:  if(aLi[i].className=='类名'){操作}

优化：（将上述操作封装成一个函数）

function getByClass(oParent,sClass){
    var aEle=oParent.getElementByTagName('*');//代表选中所有的标签
    var aResult=[];//数组
    var i=0;var j=0;
    for(i=0;i<aEle.length;i++)
    {
        if(aEle[i].className==sClass){
            aResult.push(aEle[i]); //数组push
        }
    }
    return aResult;
}//之后直接使用 getByClass()，加上参数即可；