DOM-childNodes,parentNode,className,createElement,insertBefore,removeChild

時間  2020-07-18
標籤 dom childnodes parentnode classname createelement insertbefore removechild 欄目 HTML 简体版
原文   原文鏈接

sha一、childNodes
javascript

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <script type="text/javascript">
  window.onload=function(){
   var ou=document.getElementById('ul1')
   // console.log(ou.childNodes.length)
   // childNodes包括文本節點、元素節點
   // alert(ou.childNodes.length)
   // alert(ou.children.length)  --- 經常使用   
    
   for (var i = ou.childNodes.length - 1; i >= 0; i--) {
    // nodeType==3 ->  文本節點
    // nodeType==1 ->  元素節點
    // alert(ou.childNodes[i].nodeType) 
    if(ou.childNodes[i].nodeType==1){
     ou.childNodes[i].style.background='red'
    }
   }
  }
 </script>
 <body>
  <!-- dom基礎 -->
  <ul id="ul1">
   <li>我是元素節點</li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>
  我是文本節點
 </body>
</html>

二、DOM操做元素html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        window.onload=function(){
            var ot=document.getElementById('t1')
            var ob=document.getElementById('b1')

            ob.onclick=function(){
                // ot.value='元素操做第一種方法：style'
                // ot['value']='元素操做第二種方法'
                ot.setAttribute('value','元素操做第三種方法：DOM')
            }
        }
    </script>
</head>
<body>
    <input type="text" name="" id="t1">
    <input type="button" value="按鈕" id="b1">
</body>
</html>

三、className操做元素java

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <link rel="stylesheet" href="">
        <script type="text/javascript">
            //getByClass()：經過class選取元素
            function getByClass(oParent,sClass){
                var aResult=[]
                var aElement=oParent.getElementsByTagName('*')
                for (var i = aElement.length - 1; i >= 0; i--) {
                    if(aElement[i].className=sClass){
                        aResult.push(aElement[i])
                    }
                }
                return aResult
            }
            window.onload=function(){
                var oul1=document.getElementById('ul1')
                // var ali=oul1.getElementsByTagName('li')
                // for (var i = oul1.length - 1; i >= 0; i--) {
                //     if(ali[i].className=="box"){
                //         ali[i].style.background='red'
                //     }
                // }

                var aBox=getByClass(oul1,'box')

                for (var i = aBox.length - 1; i >= 0; i--) {
                    aBox[i].style.background='red'
                }

            }
        </script>
    </head>
    <body>
        <ul id="ul1">
            <li class="box"></li>
            <li class="box"></li>
            <li></li>
            <li class="box"></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

四、DOM建立元素node

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function () {
            // body...
            var ob=document.getElementById('b1')
            var oul=document.getElementById('ul1')
            var ot=document.getElementById('t1')

            ob.onclick=function(){
                var oli=document.createElement('li')

                oli.innerHTML=ot.value
                oul.appendChild(oli)
                // 父級ou1上調用子節點oli
            }
        }
    </script>
</head>
<body>

    <input id="t1" type="text" name="" value="" >
    <input id="b1" type="button" value="createLi">

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

五、DOM插入元素app

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function () {
            // body...
            var ob=document.getElementById('b1')
            var oul=document.getElementById('ul1')
            var ot=document.getElementById('t1')

            //ali:獲取ul的全部li元素
            var ali=oul.getElementsByTagName('li')

            ob.onclick=function(){
                var oli=document.createElement('li')
                oli.innerHTML=ot.value
                if(ali.length>0){
                    oul.insertBefore(oli,ali[0])                    
                }else{
                    oul.appendChild(oli)
                }
            
            }
        }
    </script>
</head>
<body>

    <input id="t1" type="text" name="" value="" >
    <input id="b1" type="button" value="createLi">

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

六、DOM刪除元素dom

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function(){
            var oul=document.getElementById('ul1')
            var aA=oul.getElementsByTagName('a')

            for (var i = aA.length - 1; i >= 0; i--) {
                aA[i].onclick=function () {
                    oul.removeChild(this.parentNode)
                    // body...
                }
            }
        }
    </script>
</head>
<body>
    <ul id="ul1">
        <li>1<a href="javascript:;">刪除</a></li>
        <li>22<a href="javascript:;">刪除</a></li>
        <li>333<a href="javascript:;">刪除</a></li>
        <li>4444<a href="javascript:;">刪除</a></li>
        <li>55555<a href="javascript:;">刪除</a></li>
        <li>666666<a href="javascript:;">刪除</a></li>
    </ul>
</body>
</html>

七、文檔碎片，使用較少ide

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function(){
            var oul=document.getElementById('ul1')
            // var aA=oul.getElementsByTagName('a')
            var ofrag=document.createDocumentFragment()

            for (var i = 100 - 1; i >= 0; i--) {
                var oli=document.createElement('li')
                ofrag.appendChild(oli)
            }
            oul.appendChild(ofrag)
        }
    </script>
</head>
<body>
    <ul id="ul1">
        
    </ul>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程