2016年5月26日下午（妙味课堂js基础-2笔记一（DOM））-CSDN博客

主要内容：

1. DOM简介、DOM标准、DOM节点

2. 获取元素的子节点：childNodes、兼容性问题
3. 节点类型：nodeType、文本节点、元素节点
4. children的使用
5. 获取元素父节点parentNode
6. 获取定位元素的父节点offsetParent
7. 获取首尾子元素：firstChild、firstElementChild、lastChild、lastElementChild
8. 获取兄弟节点：nextSibling、nextElemnetSibling、previousSibling、previousElementSibling
9. 元素属性操作：“.”与“[]”回顾、setAttribute、getAttribute、removeAttribute
10. 通过className获取元素、封装getByClass函数

一、DOM基础

　　（1）什么是DOM？

（2）浏览器支持情况

二、DOM节点　

　　（1）childNodes

　　　　——获取子节点

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <script type="text/javascript">
        window.onload=function ()
        {
            var oUl=document.getElementById('ul1');
            //alert(oUl.childNodes.length);　　　　　　　　　　//这里弹出来7
            oUl.childNodes[1].style.background='red';　　　　//注意这里写的是childNodes[1]
        }
    </script>
</head>
<body>
    <ul id="ul1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</body>
</html>

显示结果为：

　　基于上面的结论我们现在来说一下：

<body><ul id="ul1"><li>111</li><li>222</li><li>333</li></ul></body>

　　当我们把代码改为这样时，就是不一样的显示结果了；

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
        window.onload=function ()
        {
            var oUl=document.getElementById('ul1');
            //alert(oUl.childNodes.length);　　　　　　　　　　//这里弹出来3
            oUl.childNodes[1].style.background='red';　　　　//注意这里写的是childNodes[1]
        }
    </script>
</head>
<body>
<ul id="ul1"><li>111</li><li>222</li><li>333</li></ul>
</body>

显示结果为：

这是因为它把空行算作为子节点了；把它叫做文本节点（空的文本节点）；选择我们就要引入nodeType（节点类型）了；

<script type="text/javascript">
        window.onload=function ()
        {
            alert(document.body.childNodes[1].nodeType);　　　　//当为childNodes[1]时弹出3(元素节点)；当为[0]时弹出1（文本节点）

} </script> </head> <body> aaafsa <span>fff</span> </body>

　　　注意这里是给元素加样式：（要用if进行判断！）

<script type="text/javascript">
window.onload=function ()
{
    var oUl=document.getElementById('ul1');
    var i=0;
    for(i=0;i<oUl.childNodes.length;i++)
    {
        if(oUl.childNodes[i].nodeType==1)
        {
            oUl.childNodes[i].style.background='red';
        }
    }
}
</script>
</head>
<body>
<ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>

　　　　——children（兼容版的childNodes）（现在好像不支持了！！！）

　　（2）parentNode（获取的是结构上的父级）

　　　　——例子：点击链接，隐藏整个li

    <script type="text/javascript">
        window.onload=function ()
        {
            var aA=document.getElementsByTagName('a');
            var i=0;

            for(i=0;i<aA.length;i++)
            {
                aA[i].onclick=function ()
                {
                    this.style.display='none';　　　　　　　　
                }
            }
        }
    </script>
</head>
<body>
    <ul>
        <li>aass <a href="javascript:;">隐藏</a></li>
        <li>5453 <a href="javascript:;">隐藏</a></li>
        <li>cvxc <a href="javascript:;">隐藏</a></li>
        <li>ertert <a href="javascript:;">隐藏</a></li>
    </ul>
</body>

注意：这个没有加parentNode的显示效果为点击隐藏的话只有该隐藏消失；

parentNode的显示效果为点击隐藏的话都消失；

    <script type="text/javascript">
        window.onload=function ()
        {
            var aA=document.getElementsByTagName('a');
            var i=0;

            for(i=0;i<aA.length;i++)
            {
                aA[i].onclick=function ()
                {
                    this.parentNode.style.display='none';
                }
            }
        }
    </script>
</head>
<body>
    <ul>
        <li>aass <a href="javascript:;">隐藏</a></li>
        <li>5453 <a href="javascript:;">隐藏</a></li>
        <li>cvxc <a href="javascript:;">隐藏</a></li>
        <li>ertert <a href="javascript:;">隐藏</a></li>
    </ul>
</body>

　　（3）offsetParent（offsetParent() 方法返回最近的祖先定位元素。）

　　　　——例子：获取元素在页面上的实际位置

　　　　　　定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素。

　　　　可以通过 jQuery 设置 position，或者通过 CSS 的 position 属性。

<div id="div1" style="width:100px; height:100px; background:red;margin:100px;position:relative;">
    <div  id="div2" οnclick="alert(this.offsetParent.id)"  style="width:100px; height:100px; background:yellow;
 position:absolute;left:100px;top:100px;"></div>
</div>

如果是在上面的代码的情况下，弹出来的是div；

<div id="div1" style="width:100px; height:100px; background:red;margin:100px;">
    <div  id="div2" οnclick="alert(this.offsetParent.tagName)"  style="width:100px; height:100px; background:yellow; 
position:absolute;left:100px;top:100px;"></div>
</div>

而上述代码弹出来的是body；（因为div1上面没有加定位；）

转载于:https://www.cnblogs.com/zzjeny/p/5532262.html