精通JavaScript开发课时11(DOM基础)笔记

原创 2015年07月08日 12:09:55

一、DOM基础

1、什么是DOM
Document Object Model定义了访问和处理 HTML 文档的标准方法


节点树

2、浏览器支持情况
IE 10%
Chrome/Safari 60%
FireFox 99%

二、DOM节点

1、childNodes & nodeType

childNodes在IE6-8下正常,只算元素节点,不算文本节点

  • 文本节点(nodeType==3)
  • 元素节点(nodeType==1)
var oUl=document.getElementById('ul1');

for(var i=0;i<oUl.childNodes.length;i++)
{
    //nodeType==3   ->  文本节点
    //nodeType==1   ->  元素节点

    if(oUl.childNodes[i].nodeType==1)
    {
        oUl.childNodes[i].style.background='red';
    }
}

另外:

  1. children只包括元素节点,可以用来代替childNodes,更方便
  2. 子节点只算第一层,不算子节点的子节点

2、parentNode
例:点击链接,隐藏整个li

var aA=document.getElementsByTagName('a');

for(var i=0;i<aA.length;i++)
{
    aA[i].onclick=function ()
    {
        this.parentNode.style.display='none';
    };
}

3、offsetParent
只读 属性 离当前元素最近的一个有定位属性的父节点:

  • 如果没有定位父级,默认是body
  • ie7以下,如果当前元素没有定位默认是body,如果有定位则是html
  • ie7以下,如果当前元素的某个父级触发了layout,那么offsetParent就会被指向到这个触发了layout特性的父节点上(如zoom:1;)

4、首尾子节点
有上面提到的兼容性问题

  • firstChild、firstElementChild
  • lastChild、lastElementChild

例如:

var oUl=document.getElementById('ul1');

//IE6-8
//oUl.firstChild.style.background='red';

//高级浏览器
//oUl.firstElementChild.style.background='red';

if(oUl.firstElementChild)
{
    oUl.firstElementChild.style.background='red';
}
else
{
    oUl.firstChild.style.background='red';
}

5、兄弟节点
有上面提到的兼容性问题

  • nextSibling、nextElementSibling
  • previousSibling、previousElementSibling

三、元素属性操作

  • 第一种:oDiv.style.display=“block”;
  • 第二种:oDiv.style[“display”]=“block”;
  • 第三种:DOM方式
var oTxt=document.getElementById('txt1');
var oBtn=document.getElementById('btn1');

oBtn.onclick=function ()
{
    //oTxt.value='asdfasd';
    //oTxt['value']='xczcvb';

    oTxt.setAttribute('value', 'erwertwert');
};
  • 获取:getAttribute(名称)
  • 设置:setAttribute(名称, 值)
  • 删除:removeAttribute(名称)

四、DOM元素灵活查找

1、用className选择元素

var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');

for(var i=0;i<aLi.length;i++)
{
    if(aLi[i].className=='box')
    {
        aLi[i].style.background='red';
    }
}

将以上封装成一个函数:

function getByClass(oParent, sClass)
{
    var aResult=[];
    var aEle=oParent.getElementsByTagName('*');

    for(var 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');

    for(var i=0;i<aBox.length;i++)
    {
        aBox[i].style.background='red';
    }
};

相关文章推荐

智能社JavaScript学习笔记——11 - DOM基础

DOM (Document Object Model, 文档对象模型)标签——CSS 元素——JS 节点——DOM元素属性操作方式: 1. oDiv.style.display = ‘b...
  • namei33
  • namei33
  • 2015年05月27日 17:23
  • 732

第14课时 DOM基础概念、操作

DOM:Document object Model 文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义 为了能够让程序(js)去操作页面中打个元素。 DOM会把文档看做是一棵树...

[学习笔记]JavaScript之DOM基础

DOM概述 DOM定义 DOM(文档对象模型,Document Object Model)是W3C组织开发的一套便于操作XML和HTML的JavaScript方法,其将XML和HTML抽象成文...
  • jacobvv
  • jacobvv
  • 2015年01月18日 22:20
  • 1058

javaScript笔记(十五)DOM基础

DOM基础 DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口)。DOM描绘了一个层次化的节点树,运行开发人员添加、移除和修改页面的某一...
  • sliujin
  • sliujin
  • 2016年08月11日 22:06
  • 71

蓝鸥Unity开发教程之课时11 Time和Mathf类

蓝鸥Unity开发教程之课时11 Time和Mathf类

javascript 学习笔记 基础篇(2) HTML DOM

===================================================   2011-07-31  周日   javascript 文档对象基础 =========...

蓝鸥Unity开发教程之课时4 3D开发基础

蓝鸥Unity开发教程之课时4 3D开发基础

JavaScript_DOM_编程艺术读书笔记

  • 2012年05月18日 22:10
  • 117KB
  • 下载

javaScript DOM编程艺术2版学习笔记

  • 2015年10月23日 19:36
  • 2.46MB
  • 下载

11.JavaScript外部对象-DOM

document对象DOM概述DOM概述、DOM节点树、DOM操作读取、修改节点信息、元素节点的内容、节点属性、元素节点的样式查询查询节点、根据元素的id查询节点、根据层次查询节点、根据标签名查询节点...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:精通JavaScript开发课时11(DOM基础)笔记
举报原因:
原因补充:

(最多只允许输入30个字)