JavaScript--DOM笔记

DOM基础
- 什么是DOM
- 浏览器支持情况

DOM节点
- childNodes nodeType
  - 获取子节点
  - children
- parentNode
  - 例子：点击链接，隐藏整个li
- offsetParent
  - 例子：获取元素在页面上的实际位置

DOM节点(2)
- 首尾子节点
  - 有兼容性问题
  - firstChild、firstElementChild
  - lastChild 、lastElementChild
- 兄弟节点
  - 有兼容性问题
  - nextSibling、nextElementSibling
  - previousSibling、previousElementSibling

操纵元素属性

- 元素属性操作

- - 第一种：oDiv.style.display=“block”;
  - 第二种：oDiv.style[“display”]=“block”;
  - 第三种：Dom方式

- DOM方式操作元素属性
  - 获取：getAttribute(名称)
  - 设置：setAttribute(名称, 值)
  - 删除：removeAttribute(名称)

用className选择元素
- 如何用className选择元素
  - 选出所有元素
  - 通过className条件筛选
- 封装成函数

function getByClass(oParent, sClass)
{
    var aEle=oParent.getElementsByTagName('*');
    var aResult=[];
    var i=0;
    
    for(i=0;i<aEle.length;i++)
    {
        if(aEle[i].className==sClass)
        {
            aResult.push(aEle[i]);
        }
    }
    
    return aResult;
}

window.onload=function ()
{
    var oUl=document.getElementById('ul1');
    var aBox=getByClass(oUl, 'box');
    var i=0;
    
    for(i=0;i<aBox.length;i++)
    {
        aBox[i].style.background='yellow';
    }
}

创建DOM元素 createElement(标签名)
- 创建一个节点 appendChild(节点) 追加一个节点
- 例子：为ul插入li 插入元素

insertBefore(节点, 原有节点) 在已有元素前插入
- 例子：倒序插入li

删除DOM元素 removeChild(节点) 删除一个节点
- 例子：删除li

文档碎片
- 文档碎片可以提高DOM操作性能(理论上)
- 文档碎片原理 document.createDocumentFragment()

JavaScript--DOM笔记

推荐阅读