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()