首页 > 代码库 > DOM基础

DOM基础

2024-08-19 20:51:04   220人阅读

标签  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>

技术分享

点击隐藏哪一行消失

 

 

DOM基础


联系
我们