DOM基础

最新推荐文章于 2024-05-03 11:47:20 发布

weixin_33709364

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量40

点赞数

文章标签： javascript ViewUI

标签 HTML

元素 css

节点 DOM

document.getElementById()
document.getElementsByTagName()

DOM：文档对象模型（Document Object Model）

区分文本节点和元素节点

    fghshash
    <span>fhuewf</span>

nodeType节点类型文本节点没有属性

nodetype==3 文本节点
nodetype==1元素节点

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>

        window.onload=function(){
            var oUl=document.getElementById('ul1');
           //ie 6-8 alert(oUl.childNodes.length);

            for(var i=0;i<oUl.childNodes.length;i++){
               // oUl.childNodes[i].style.background='red';
                //alert(oUl.childNodes[i].nodeType);
                //nodetype==3 文本节点
                //nodetype==1元素节点
                if(oUl.childNodes[i].nodeType==1){
                oUl.childNodes[i].style.background='red';
            }}}
    </script>
</head>
<body>
<ul id="ul1">
    <li></li>
    <li></li>
</ul>
</body>
</html>

childNodes获取子节点  子节点只包含第一层节点
children获取子元素

根据父节点隐藏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta 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';
                }
            }
        }
    </script>
</head>
<body>
<ul id="ul1">
    <li>drdfgrd<a href="javascript:;">隐藏</a></li>
    <li>dr秃鹰grd<a href="javascript:;">隐藏</a></li>
    <li>drSDR fgrd<a href="javascript:;">隐藏</a></li>
    <li>drdf大概grd<a href="javascript:;">隐藏</a></li>
</ul>
</body>
</html>

点击隐藏哪一行消失

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width:200px;
            height:200px;
            background: #cccccc;
            margin:100px;
            position: relative;
        }

        #div2{
            width:100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 50px;
            top: 50px;

        }
    </style>
    <script>
        window.onload=function(){
            var oDiv2=document.getElementById('div2');
            alert(oDiv2.offsetParent);
            //offsetParent获取元素在页面上的实际位置
        }
    </script>

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

    </div>
</div>
</body>
</html>

首尾子节点

firstChild firstElementChild　

lastChild lastElementChild　

兄弟节点

nextSibling nextElementSibling

previousSibling previousElementsSibling

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function () {
            var oUl=document.getElementById('ul1')
            //ie 6-8  oUl.firstChild.style.background='red';
            //高级浏览器   oUl.firstElementChild.style.background='red';
            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>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function(){
            var oTxt=document.getElementById('txt1');
            var oBtn=document.getElementById('btn1');

            oBtn.onclick=function(){
               // oTxt.value='wefjk';
                //oTxt['value']="ydgeuy";
                oTxt.setAttribute('value','suifhi' );
            }
        }
    </script>
</head>
<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="按钮" />
</body>
</html>

点击按钮出现属性值

setAttribute（‘属性名’，‘属性值’）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>

        window.onload=function(){
            var oUl=document.getElementById('ul1');
            var aLi=oUl.getElementsByTagName('li');

            for(var i=0;i<aLi.length;i++){
                if(aLi[i].className=="box"){
                    aLi[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></li>
    <li class="box"></li>


</ul>
</body>
</html>

写成函数

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


</ul>
</body>
</html>

weixin_33709364

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM基础

标签 HTML元素 css节点 DOM document.getElementById()document.getElementsByTagName() DOM：文档对象模型（Document Object Model）区分文本节点和元素节点 fghshash &lt;span&gt;fhuewf&lt;/span&gt; nodeType节点类型文本...
复制链接

扫一扫