js的三大核心

1、ECMAScript js的语法标准
2、DOM Document Object Mobel 文档对象模型
提供方法：让js可以操作HTML标签方法 DOM老大是document
3、BOM Browser Object Mobel 浏览器对象模型
提供方法让js可以操作浏览器 BOM 老大是window
js里最大的boss是window
document是window下的一个对象

DOM
Document Object Mobel 文档对象模型
一套规则，使JS能够操作HTML 文档的规则

JS   通过   DOM规则   操作THML 文档

DOM树

childNodes:获取所有的孩子节点

<div class="box">
        <p>明天您好</p>
        <a href="">我是a标签</a>
        阿飞
    </div>
    <script type="text/javascript">
        var oBox = document.getElementsByClassName('box')[0],
        val = oBox.childNodes; //获取所有的孩子
        console.log( val );//得到的是所有的节点
    </script>

结果

image.png

1、是一个回车算是的一个文本节点 #text
2、p标签节点
3、是一个回车算是的一个文本节点 #text
4、 a标签节点
5、 3、是一个文本节点 #text
查看浏览器

image.png

nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值，12种类型分别对应1到12的常数值

image.png

 <script type="text/javascript">
        var oBox = document.getElementsByClassName('box')[0],
        val = oBox.childNodes; //获取所有的孩子
        console.log( val[1].nodeType );//得到的是节点对象对应的数字值
    </script>

image.png

children只获取儿子节点中的所有标签元素节点

    <script type="text/javascript">
        var oBox = document.getElementsByClassName('box')[0],
        val = oBox.children; //只获取对象下儿子的所有标签节点
        //console.log( val[4].nodeValue );
        console.log( val );//得到标签元素节点
    </script>

image.png

    <script type="text/javascript">
        var oBox = document.getElementsByClassName('box')[0],
        val = oBox.children; //只获取对象下儿子的所有标签节点集合  类数组
        val[0].style.backgroundColor = 'red'; // 设置第0个的背景色
        //console.log( val[4].nodeValue );
        console.log( val );
    </script>

image.png

children只获取儿子级，如果要获取所有后代可以用

<script type="text/javascript">
        var oBox = document.getElementsByClassName('box')[0],
        all = oBox.getElementsByTagName('*'); //可以获取的所有后代标签元素
        console.log( all );
    </script>

image.png

firstChild 获取第一个子节点 obj.firstChild;
主流浏览器：获取第一个子节点
IE 6 7 8 :获取第一个标签元素子节点

<div class="box">
        <p>明天您好
            <span>您好您好</span>
        </p>
        <a href="">我是a标签</a>
        阿飞
    </div>
    <script type="text/javascript">
        var oBox = document.getElementsByClassName('box')[0],
        val = oBox.firstChild;// 获取到文本节点
        console.log( val );
    </script>

这个节点

image.png

firstElementChild 获取第一个标签元素子节点 obj.firstElementChild;
主流浏览器：获取第一个标签元素子节点
IE 6 7 8 :undefined 没有这个属性

<div class="box">
        <p>明天您好
            <span>您好您好</span>
        </p>
        <a href="">我是a标签</a>
        阿飞
    </div>
    <script type="text/javascript">
        var oBox = document.getElementsByClassName('box')[0],
        val = oBox.firstElementChild;// 获取到标签元素节点
        console.log( val );
    </script>

image.png

总结：firstElementChild 在IE 6 7 8 不存在 firstChild 在IE 6 7 8 跟主流浏览器表现不一样
做兼容用children[ 0 ];

lastChild 和lastElementChild 跟上面一样

nextSibling相邻的兄弟节点（下一个）

<body>
    <div class="box">
        <p>明天您好
            <span>您好您好</span>
        </p>
        <a href="">我是a标签</a>
        阿飞
    </div>
    <script type="text/javascript">
        var oBox = document.getElementsByClassName('box')[0],
        val = oBox.firstElementChild.nextSibling;//相邻的兄弟节点（下一个）
        console.log( val );
    </script>
</body>

image.png

nextElementSibling; 相邻的兄弟元素标签节点（下一个）

<body>
    <div class="box">
        <p>明天您好
            <span>您好您好</span>
        </p>
        <a href="">我是a标签</a>
        阿飞
    </div>
    <script type="text/javascript">
        var oBox = document.getElementsByClassName('box')[0],
        val = oBox.firstElementChild.nextElementSibling;//相邻的兄弟元素标签节点（下一个）
        console.log( val );
    </script>
</body>

这2个兼容性跟上面的一样可以用序号来做选择下一个