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教程