DoM
浏览器支持：
IE： 10%
FF： 99%
Chrome： 60%
  • childNotes不兼容
在Chrome和IE9中会将文本节点也算作childNotes,而在IE6-8中childNotes只算元素节点，而不算文本节点。

<ul>
    <li></li>

    <li></li>
    <li></li>
    <li></li>
</ul>
在IE9和Chrome中ul的childNotes个数为9个，而在IE6-8中为4个。

  • noteType

显示节点的类型信息（浏览器兼容）：

文本节点：noteType值为3
元素节点：noteType值为1
如果要对ul中的li的样式进行操作，并且还要对不同版本的浏览器具有一定的兼容性，可以使用noteType实现。
for(var i=0; i<oUl.childNodes.length; i++){
    if(1 == oUl.childNodes[i].nodeType)//说明是元素节点

    {
    oUl.childNodes[i].style.background='red';

    }
}

  • children
只包含元素节点，不包多文本节点（也是兼容的）。
for(var i=0; i<oUl.children.length; i++){
    oUl.children [i].style.background='red';
}


  • parentNote
某个元素的父节点。

<ul>
    <li>12<a href="javascript:;">隐藏</a></li>

    <li>23<a href="javascript:;">隐藏</a></li>
    <li>34<a href="javascript:;">隐藏</a></li>
    <li>45<a href="javascript:;">隐藏</a></li>
</ul>


var aA = document.getElementsByTag("a");
for(var i=0; i<aA.length; i++){
    aA[i].onclick=function(){
        this.parentNode.style.display = "none";

        //this指向的应该是节点aA[i]，而他的parentNode应该是li，然后实现隐藏

    }

}

  • offsetParent
css:绝对定位和相对定位？绝对定位的元素，根据谁定位？

css中绝对定位的元素是根据已定位的父级元素来进行定位的，如果他的第一父级元素没有绝对定位，那么就会寻找他父级的父级元素，直到找到一个已定位的元素为止（最外层就根据body来进行定位。）
绝对定位和相对定位的区别：绝对定位的参照物是已被定为的父级元素；而相对定位的参照物是自身原来的位置，准确的说是未设置left和top值的位置。
<div id="div1">
    <div id="div2"></div>

</div>
设置样式1：父级元素div1没有被定位，所以改变div1的位置，div2不会跟着移动，因为div2绝对定位的参照物是div1的父级body。
<style>
#div1 {width: 200px; height:200px; background: red; margin:20px;}
#div2 {width: 100px; height:100px; background: yellow; position: absolute; left:40px; top: 23px;}
</style>

设置样式2：父级元素div1已被定位，div2的参照物就是div1的位置，所以该变div1的位置，div2也会跟着移动。
<style>
#div1 {width: 200px; height:200px; background: red; margin:20px; position:relative; left: 0px; top: 20px;}
#div2 {width: 100px; height:100px; background: yellow; position: absolute; left:40px; top: 23px;}
</style>

offsetParent可以用来获取一个元素用来定位的父级，它指向的是一个对象。
<script>
    var oDiv = document.getElementById("div2");

    alert( oDiv.offsetParent);

</script>


  • firstChild和firstElementChild
获取子元素中第一个元素。
<body>
    <ul id="ul1">

      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
</body>

<script>
    var oUl = document.getElementById("ul1");
    if( oUl.firstElementChild){//低版本的IE6-8不能识别标记firstElementChild，但可以识别firstChild
        oUi.firstElementChild.style.background="red";

    }else{//高版本的浏览器能识别的标记firstElementChild，而不能识别firstChild
        oUi.firstChild.style.background="red";
    }
</script>
获取尾节点：lastChild、lastElementChild
获取兄弟节点：nextSibling、nextElementSibling以及previousSibling、previousElementSibling
与此类似，但均有兼容性问题。

  • DOM对元素的操作
元素属性操作
第一种：oDiv.style.display=“block”;
第二种：oDiv.style[“display”]=“block”;
第三种：Dom方式

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


  • DOM元素的灵活查找
通过元素的className，选出自己想要的元素。
<body>
    <ul id="ul1">

        <li class="box"></li>

        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="box"></li>
        <li class="box"></li>
    </ul>

</body>

<script>
    function getByClass(oParent, ClassName){
    var oElem = oParent.getElementsByTag("*");

    var aResult=[];
    for(var i=0; i<oElem.length; i++){
        if(oElem[i].className == "box"){
           aResult.push( oElem[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";  
      }

    }

</script>


js笔记-DOM基础的更多相关文章

  1. 原生js操作DOM基础-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...

  2. js入门——Dom基础

    DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...

  3. Javascript DOM 编程艺术（第二版）读书笔记——DOM基础

    1.DOM是什么 D=document(文档) O=object(对象) M=Model(模型) DOM又称节点树 一些术语: parent(父)   child(子)   sibling(兄弟)   ...

  4. JavaScript笔记:DOM基础

    一.什么是DOM DOM全称是document object model(文档对象模型).在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM.通俗的说D ...

  5. js学习笔记--dom部分(一)

    js 学习整理之Dom部分 前面我总结了我最近学习js基础部分,当时提到过js分了三大部分,第一部分ECMA基础也就是第一次写的基础部分, 第二部分也就是DOM部分,也就是这里要写的内容的,然后第三部 ...

  6. 深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记

    来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...

  7. JavaScript基础15——js的DOM对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Javaweb学习笔记——（三）——————JavaScript基础&DOM基础

    day031.js的String对象 **创建String对象 ***var str = "abc"; **方法和属性(文档) ***属性 lenth:字符串的长度 ***方法 ( ...

  9. python学习笔记十三 JS，Dom（进阶篇）

    JS介绍 JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用:JavaScript 是因特网上最流 ...

随机推荐

  1. 【转】Python中执行cmd的三种方式

    原文链接:http://blog.csdn.net/menglei8625/article/details/7494094 目前我使用到的python中执行cmd的方式有三种: 1. 使用os.sys ...

  2. 05-0. 求序列前N项和(15)

    本题要求编写程序,计算序列 2/1+3/2+5/3+8/5+... 的前N项之和.注意该序列从第2项起,每一项的分子是前一项分子与分母的和,分母是前一项的分子. 输入格式: 输入在一行中给出一个正整数 ...

  3. linux查看系统的日志的一些实用操作

    last -a 把从何处登入系统的主机名称或ip地址,显示在最后一行. -d 指定记录文件.指定记录文件.将IP地址转换成主机名称. -f <记录文件> 指定记录文件. -n <显示 ...

  4. [转]Hibernate中property-ref的应用,常用来解决遗留数据库One To Many关系

    [转]Hibernate中property-ref的使用,常用来解决遗留数据库One To Many关系 1.如表Class(ClassID,Class_No,ClassName)与Student(S ...

  5. CSS随记

    在CSS中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:float属性不具有继承特性,就是说子元素 ...

  6. docker 容器管理常用命令

    Docker 容器管理: docker create -it centos //这样可以创建一个容器,但该容器并没有启动: create Create a new container 创建一个容器: ...

  7. Div布局案例

    通常看到这个页面,会想到它是有几块组成的. 第一块,分销佣金. 第二块,包括代言.商品.二维码 其中代言又是左右结构. 于是乎基本的div结构就出来了. <div class="row ...

  8. 普林斯顿大学算法课 Algorithm Part I Week 3 重复元素排序 - 三路快排 Duplicate Keys

    很多时候排序是为了对数据进行归类,这种排序重复值特别多 通过年龄统计人口 删除邮件列表里的重复邮件 通过大学对求职者进行排序 若使用普通的快排对重复数据进行排序,会造成N^2复杂度,但是归并排序和三路 ...

  9. centos6.4 ceph安装部署之ceph block device

    1,prelight/preface ceph storage clusterceph block deviceceph filesystemceph object storage 此篇记录ceph ...

  10. linux 学习之九、Linux 磁盘与文件系统管理（1）

    原文地址:http://vbird.dic.ksu.edu.tw/linux_basic/0230filesystem.php#filesys 查看文件系统参数命令 dumpe2fs 盘符地址 例: ...