精通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之DOM基础

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

【我的JS第三本】JavaScript_DOM编程艺术第二版读书笔记

经过前一段时间HTML&CSS的学习,感觉视频加读书是一个比较不错的学习方法,两者相辅相成,互相补充,所以也准备看看关于JavaScript的书。       2015年12月14日,之前使用韩顺平老...
  • Creabine
  • Creabine
  • 2015年12月14日 21:12
  • 3242

精通JavaScript开发课时13-14(DOM操作应用)笔记

一、表格应用一、获取表格元素的简便写法: tBodies[] —> getElementByTagName(‘tbody’)[] tHead —> getElementByTagName(‘thead...
  • qq_24719309
  • qq_24719309
  • 2015年07月08日 16:35
  • 170

java从入门到精通学习笔记(一)——基础篇

1.Java虚拟机、Java编译器和Java解释器 JVM:JVM有自己完善的硬件架构,如处理器、堆栈(Stack)、寄存器等,还具有相应的指令系统(字节码就是一种指令格式)。 JVM屏蔽了与具体操作...
  • qq_33004293
  • qq_33004293
  • 2017年10月26日 09:11
  • 157

javascript DOM编程艺术 读后感与笔记

书评: 一开始接触前端的时候就在各个社区都听说过这本书,不愧为js最广为推荐的入门书,整本书读起来通畅易懂,对一个新手来说几乎不存在什么门槛,让人易于接受,该书通过一个个实例循序渐进,学到新的知识后...
  • m0_37506557
  • m0_37506557
  • 2017年02月25日 16:30
  • 317

什么是DOM?DOM和JavaScript的关系[web开发]

什么是DOM? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们...
  • hqf2009
  • hqf2009
  • 2015年12月18日 16:11
  • 1476

JavaScript_DOM编程艺术第二版学习笔记-第7章

动态创建标记 传统技术:document.write和innerHTML 深入剖析DOM方法:createElement、createTextNode、appendChild和insert...
  • sofia92
  • sofia92
  • 2015年12月16日 09:20
  • 768

javascript基础学习笔记

编者寄言:  本文主要为编者读书笔记,在文章里面很多话是掺杂了编者自己的见解,如果有哪里出现错误或者用词不严谨,请友善留言,编者会及时去更改。 本文很多地方只是简单说了一下应该注意的地方,具体代码部分...
  • u012967849
  • u012967849
  • 2016年07月20日 14:08
  • 1910

精通JavaScript开发课时20(JS事件基础)学习笔记

一、event对象和事件冒泡1、什么是event对象 用来获取事件的详细信息:鼠标位置、键盘按键 例如:获取鼠标位置:clientXwindow.onload=function () { ...
  • qq_24719309
  • qq_24719309
  • 2015年07月11日 17:51
  • 179

读《JavaScript dom编程艺术(第2版)》笔记 9-10

style属性是一个对象,只能返回内嵌样式。 当需要引用一个中间带减号的css属性时,DOM要求用驼峰命名法,即CSS属性font-family变为DOM属性fontFamliy:  element...
  • lloyvhe
  • lloyvhe
  • 2015年06月12日 10:46
  • 424
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:精通JavaScript开发课时11(DOM基础)笔记
举报原因:
原因补充:

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