DOM基础

Donner_

于 2020-07-09 23:16:20 发布

阅读量73

点赞数

分类专栏： jsxuexi 文章标签： js

本文链接：https://blog.csdn.net/weixin_47700237/article/details/107217386

版权

jsxuexi 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

DOM基础

DOM：document
兼容 IE 10% （IE9以下）
chrome 60%
Firefox 99%

DOM节点

子节点

<script>
        window.onload=function(){
            var oUl=document.getElementById('ul1');
            //IE6-8节点数为2  其他为5
            //alert(oUl.childNodes.length);
            //for(var i=0;i<oUl.childNodes.length;i++){
                //oUl.childNodes[i].style.background='red';  无法修改
                //nodeType==3 -->文本节点
                //nodeType==1 -->元素节点
                // alert(oUl.childNodes[i].nodeType)
                // if(oUl.childNodes[i].nodeType==1){
                //     oUl.childNodes[i].style.background='red';
                // }
            //}
                    //children 只算元素节点只算第一层
                    for(var i=0;i<oUl.children.length;i++){
                        oUl.children[i].style.background='red';
                    }
        }
        
    </script>

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

父节点

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';
                }
            }
        }
 <ul id="ul1">
        <li>hahdb <a href="javascript:;">隐藏</a></li>
        <li>hasefa <a href="javascript:;">隐藏</a></li>
        <li>sdhth <a href="javascript:;">隐藏</a></li>
        <li>dhedhbd <a href="javascript:;">隐藏</a></li>
        <li>srhbeg <a href="javascript:;">隐藏</a></li>

offsetParent 寻找某一个语素用来定位的父级

<style>
        #div1{
            width: 200px;
            height: 200px;
            background: gray;
            margin: 100px;
            /*position: relative;*/  /*有div2根据div1进行定位
                                     没有根据body进行定位*/

        }
        #div2{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>
    <script>
window.onload=function(){
            //offsetParent  寻找某一个语素用来定位的父级
            var oDiv2=document.getElementById('div2');
            alert(oDiv2.offsetParent)
        }
        
    </script>
    <body>
    <div id="div1">
        <div id="div2"></div>
    </div>
</body>

首尾子节点
存在兼容问题

<script>
        window.onload=function(){
            var oUl1=document.getElementById('ul1');
            //IE6-8
            //oUl1.firstChild.style.background='red';

            //高级浏览器
            //oUl1.firstElementChild.style.background='red';

            //处理兼容问题
            if(oUl1.firstElementChild){
                oUl1.firstElementChild.style.background='red';
            }
            else{
                oUl1.firstChild.style.background='red';
            }
        }
    </script>

<body>
    <ul id="ul1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

操纵元素的属性

<script>
        window.onload=function(){
            var oTxt=document.getElementById('txt1');
            var oBtn=document.getElementById('btn1');

            oBtn.onclick=function(){
                //oTxt.value='afadad';
                //oTxt['value']='afadad';
                oTxt.setAttribute('value','hghchh');
                // getAttribute(名称)        --->获取
                // setAttribute(名称，值)    --->设置
                // removeAttribute(名称)     --->删除
            }
        }
    </script>
</head>
<body>
    <input id="txt1" type="text">
    <input id="btn1" type="button" value="按钮">
</body>

DOM元素灵活查找

用className选择元素
如何用className选择元素
选出所有元素
通过className条件筛选
封装成函数

<script>
        //封装函数
        function getByClass(oParent,sClass){
            var aResult=[];
            var aEle=oParent.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';
            }
            
            
            //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 class="box"></li>
        <li></li>
    </ul>
</body>

Donner_

关注

0
点赞
踩
0

收藏

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

DOM基础DOM：document兼容 IE 10% （IE9以下）chrome 60%Firefox 99%DOM节点子节点<script> window.onload=function(){ var oUl=document.getElementById('ul1'); //IE6-8节点数为2 其他为5 //alert(oUl.childNodes.le
复制链接

扫一扫