JavaScript——DOM基础

来源：互联网发布：intel edison linux 编辑：程序博客网时间：2024/06/04 19:36

DOM基础
DOM就是JavaScript中的document

兼容性：
高版IE能部分大部分DOM，IE8及以下只能兼容一点点
Chrome基本能兼容一半左右
FireFox大部分都能兼容
DOM节点

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><script type="text/javascript">    window.onload = function(){        var oUl = document.getElementById('ul1');        alert(oUl.childNodes.length);    }</script></head><body>    <ul id="ul1">        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>    </ul></body></html>

childNodes获取子节点
在以上函数中，一对

标签算一个节点
一个回车/空格算一个节点，所以在Firefox、chrome、以及IE9及以上的浏览器中都会弹出11，在IE6-8中显示正常为5
nodeType用于分辨节点的类型
nodeType == 3 -> 文本节点
nodeType == 1 -> 元素节点
兼容性解决方法：

    window.onload = function(){        var oUl = document.getElementById('ul1');        for (var i = 0; i < oUl.childNodes.length; i++) {            if (oUl.childNodes[i].nodeType == 1) {                oUl.childNodes[i].style.background = 'red';            };        };    }

    window.onload = function(){        var oUl = document.getElementById('ul1');        for (var i = 0; i < oUl.children.length; i++) {                oUl.children[i].style.background = 'red';        };    }

第二种方法更简便

子节点只算第一层

查找父节点

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><script type="text/javascript">    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';            }        };    }</script></head><body>    <ul id="ul1">        <li>gsifgcbweiu<a href="javascript:;">隐藏</a></li>        <li>uegvwr<a href="javascript:;">隐藏</a></li>        <li>168<a href="javascript:;">隐藏</a></li>        <li>ujuybfgcsd<a href="javascript:;">隐藏</a></li>        <li>184916<a href="javascript:;">隐藏</a></li>    </ul></body></html>

parentNode父节点
当点击‘隐藏’时，那一行所有的内容都会消失

offsetParent获取有相对定位的父级

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><style type="text/css">    #div1 {        width: 200px;        height: 200px;        background: red;        margin: 100px;        position: relative;    }    #div2 {        width: 100px;        height: 100px;        background: #CCC;        position: absolute;        left: 50px;        top: 50px;    }</style><script type="text/javascript">    window.onload = function (){        var oDiv2 = document.getElementById('div2');        alert(oDiv2.offsetParent);    }</script></head><body>    <div id="div1">        <div id="div2"></div>    </div></body></html>

根据样式不同，位置会发生变化

firstChild、firstElementChild第一个节点
lastChild、lastElementChild最后一个节点
nextSibling、nextElementSibling下一个兄弟节点
previousSibling、previousElementSibling前一个兄弟节点
在低版本IE中用firstChild等，在其他浏览器中，多数只用后一个
解决兼容性问题：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><script type="text/javascript">    window.onload = function(){        var oUl = document.getElementById('ul1');        if (oUl.firstElementChild) {            oUl.firstElementChild.style.background = 'red';        } else {            oUl.firstChild.style.background = 'red';        }    }</script></head><body>    <ul id="ul1">        <li>1</li>        <li>2</li>        <li>3</li>    </ul></body></html>

元素的属性操作

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><script type="text/javascript">window.onload = function (){    var oTxt = document.getElementById('txt1');    var oBtn = document.getElementById('btn1');    oBtn.onclick = function (){        oTxt.value = 'adffg';    }}</script></head><body>    <input id="txt1" type="text" />    <input id="btn1" type="button" value="按钮"></body></html>

当点击按钮时，text的文本框中会出现value值
oTxt.setAttribute(‘value’, ‘asdfd’);
oTxt[‘value’] = ‘asd’;
oTxt.value = ‘adffg’;
三种使用方法一样

setAttribute（’要设置的东西(名称)’,’内容’）设置元素属性
getAttribute（’要设置的东西(名称)’）获取元素属性
removeAttribute（’要设置的东西(名称)’）删除元素属性

选取元素
用 className来分拣元素

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><script type="text/javascript">    function getByClass(oParent,sClass)    {        var aEle = oParent.getElementsByTagName('*');        var aResult = [];        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';        };    }</script></head><body>    <ul id="ul1">        <li class="box"></li>        <li class="box"></li>        <li></li>        <li></li>        <li></li>        <li class="box"></li>    </ul></body></html>

第一个js函数用于分装
由此可以选出所有的class为box的元素

1 0