JS学习笔记DOM基础-字节点,父节点

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS学习笔记DOM基础-字节点,父节点相关的知识,希望对你有一定的参考价值。

一、DOM基础

(1)什么是DOM?DOM,即document,是用来操作页面上的元素,比如操作div获取,修改样式等。是JS的组成部分,还是一套规范。

(2)浏览器的支持情况

  现在主流的浏览器有3种,分别是IE,Chrome,Firefox。

  IE:在IE6-8版本中,对DOM的支持差不多是百分之十几差不多了,但是到了IE9就有了质的飞跃。

  Chrome:介于两者之间,在60%左右,对DOM支持的不是那么的好也不是那么的差。

  Firefox:对于DOM的支持几乎可以用99%来形容。

二、DOM节点

在CSS阶段,我们认为是标签;

在JS阶段,我们认为是元素;

在DOM阶段,我们认为是节点。

(1)childNodes

  

  获取子节点

特别注意,在Chrome中和IE9中,版本越高越会出现问题,它们会把空白文本也当做子节点,可是在IE6-8中却会正常运行,出现正确的子节点数,十分诡异。

文本节点,纯文本或者空白文本,比如aaaaa

元素节点,比如<span>aaaaaa</span>

  

  nodeType,节点的类型

nodeType==3——>文本节点

nodeType==1——>元素节点

 

将childNodes和nodeType配合起来使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>子节点</title>
<script>
window.onload = function()
{
    var oUl=document.getElementById(‘ul1‘);
    
    //alert(oUl.childNodes.length);/*在Chrome中,空的文本也会被当做子节点*/
    //nodeType==3——>文本节点
    //nodeType==1——>元素节点
    for(var i=0;i<oUl.childNodes.length;i++)
    {
        //alert(oUl.childNodes[i].nodeType);
        //判断子节点是不是元素节点
        if(oUl.childNodes[i].nodeType==1)
        {
            oUl.childNodes[i].style.background=‘red‘;
            }
        }
    };
</script>

</head>

<body>
<ul id="ul1">
    <li></li>
    <li></li>

</ul>

aaaaaaaa 文本节点
<span>aaaaaaaa元素节点</span>
</body>
</html>

 

  children——非常好用,它只包括元素节点却不包括文本节点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>子节点</title>
<script>
window.onload = function()
{
    var oUl=document.getElementById(‘ul1‘);
    
    //alert(oUl.childNodes.length);/*在Chrome中,空的文本也会被当做子节点*/
    //nodeType==3——>文本节点
    //nodeType==1——>元素节点
    /*for(var i=0;i<oUl.childNodes.length;i++)
    {
        //alert(oUl.childNodes[i].nodeType);
        //判断子节点是不是元素节点
        if(oUl.childNodes[i].nodeType==1)
        {
            oUl.childNodes[i].style.background=‘red‘;
            }
        }*/
    alert(oUl.children.length);
    };
</script>

</head>

<body>
<ul id="ul1">
    <li></li>
    <li></li>

</ul>

aaaaaaaa 文本节点
<span>aaaaaaaa元素节点</span>
</body>
</html>

 

 

(2)parentNode,只要是父节点不变,是不会发生变化的

  例子:点击链接,隐藏整个li

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>父节点的应用</title>
<script>
window.onload = function()
{
    var aA=document.getElementsByTagName(‘a‘);
    
    for(var i=0;i<aA.length;i++)
    {
        aA[i].onclick = function ()
        {
            this.parentNode.style.display="none";/*this指代a的父节点是<li>,则把a所在的li隐藏掉*/
            };
        }
    };
</script>

</head>

<body>
<ul id="ul1">
    <li>aaaaaaa <a href="javascript:;">隐藏</a></li>
    <li>bbbbbbb <a href="javascript:;">隐藏</a></li>
    <li>ccccccc <a href="javascript:;">隐藏</a></li>
    <li>ddddddd <a href="javascript:;">隐藏</a></li>
    <li>eeeeeee <a href="javascript:;">隐藏</a></li>
</ul>

aaaaaaaa 文本节点
<span>aaaaaaaa元素节点</span>
</body>
</html>

 

(3)offsetParent——和parentNode不同,它是获取元素用来定位的父级,不一定是前一个父节点,只能是有定位的父节点,可能是上级可能是上上级等等

  获取元素在页面上的实际位置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>offsetParent</title>
<style>
#div1{
    width:200px;
    height:200px;
    background-color:#CCC;
    margin:100px;
    position:relative;
    }
#div2{
    width:100px;
    height:100px;
    background-color:red;
    position:absolute;
    left:50px;
    top:50px;
    }
</style>
<script>
window.onload = function ()
{
    var oDiv2=document.getElementById(‘div2‘);
    
    alert(oDiv2.offsetParent);
    };
</script>
</head>

<body>
    <div id="div1">
        <div id="div2"></div>
    </div>
</body>
</html>

 



























































































































































以上是关于JS学习笔记DOM基础-字节点,父节点的主要内容,如果未能解决你的问题,请参考以下文章

react.js 学习笔记

js学习笔记33----DOM操作

js学习笔记16----父节点的操作

如鹏网学习笔记DOM

JS学习笔记DOM操作应用-创建插入和删除元素;文档碎片

学习笔记JS进阶语法一DOM基础