JS DOM創建節點

document.write() 可以向文檔中添加節點

但是有個致命問題，會把文檔原有的節點全部清空

因此不推薦使用

1、create系列方法：

document.createElement  創建元素節點

document.createTextNode 創建文本節點

document.createComment 創建註釋節點

document.createDocumentFragment 創建文檔片段節點

.appendChild() 追加子元素

document.body.insertBefore(要插入的節點，插入的位置);  在指定位置前插入節點

.firstChild  第一個子元素節點

 <ul id="list"></ul>

 <script>        
    myReady(function(){
      var comment=document.createComment("這是註釋呀");
      var ul=document.getElementById("list");
      var li=null;
      var fragment=document.createDocumentFragment();
      for(var i=0;i<3;i++){
        li=document.createElement("li");
        li.appendChild(document.createTextNode("item"+(i+1)));
        fragment.appendChild(li);
      }
      ul.appendChild(fragment);
      document.body.insertBefore(comment,ul);
    });
</script>

2、在IE6-8中，createElement可以用來創建文檔中本不存在的元素

可以用來做html5shiv，用於低版本IE兼容html標籤元素

document.createElement()創建的HTML5標籤是可以兼容IE8以下的瀏覽器，並在頁面中正常顯示該標籤所設置的樣式

<head>
  <style>
     article{color:orange;}
  </style>
</head>
<body>
  <article>直接添加html5元素在IE8以下無法識別</article>
  <script>
    var article=document.createElement("article");
    article.innerHTML="這是document.createElement創建的HTML5元素";
    document.body.appendChild(article);
  </script>
</body>

3、.split() 字符串轉數組

IE條件編譯語句 /*@cc_on @*/ 裏面的內容只有IE會執行，其餘瀏覽器會按照註釋來處理，不會執行，可以用於區別是否是IE瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        article{
            font-size:14px;
            color:orange;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){
            (function(){
                if(!/*@cc_on!@*/0) return;
                //所有html5新增元素
                var elements="abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(", ");
                //獲取長度
                var len=elements.length;
                //循環添加這些元素
                while(len--){
                    document.createElement(elements[i]);
                }
            })();//匿名函數自執行，可以避免污染全局

        });
    </script>
</head>
<body>
    
<article>這是html5元素</article>

</body>
</html>

以上是錯誤的，html5shiv代碼不能寫在domReady中，因爲創建元素需要在dom樹加載之前完成

以下是正確寫法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        article{
            font-size:14px;
            color:orange;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        (function(){
            if(!/*@cc_on!@*/0) return;
            //所有html5新增元素
            var elements="abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(", ");
            //獲取長度
            var len=elements.length;
            //循環添加這些元素
            while(len--){
                document.createElement(elements[len]);
            }
        })();//匿名函數自執行，可以避免污染全局

    </script>
</head>
<body>
    
<article>這是html5元素</article>

</body>
</html>

4、高效創建節點的方法

innerHTML

outerHTML

innerText

outerText

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
</head>
<body>
    
    <ul id="list"></ul>
    <script>
        var ul=document.getElementById("list");
        var str="<li>item1</li>"+
                "<li>item2</li>"+
                "<li>item3</li>";
        ul.innerHTML=str;

    </script>
</body>
</html>

使用innerHTML的限制：

IE6~8中，要求字符串的最左邊不能出現空格，否則會被移除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        div{
            border:2px solid pink;
            background:#abcdef;
        }
    </style>
    <script src="DomReady.js"></script>
</head>
<body>
    
    <div id="box"></div>
    <script>
        var box=document.getElementById("box");
        var str="  這是一句話哦~";
        box.innerHTML=str;

    </script>
</body>
</html>

大多數瀏覽器來說，使用該方法添加的script腳本是無效的，不會執行

script屬於無作用域元素，使用innerHTML添加時會被要求刪除

因此要求script必須在有作用域的元素之後，首選<input type="hidden">

並且需要給script添加defer屬性

這種做法在IE6-8是有效的，在IE高版本以及其他瀏覽器中依舊無效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        div{
            border:2px solid pink;
            background:#abcdef;
        }
    </style>
    <script src="DomReady.js"></script>
</head>
<body>
    
    <div id="box"></div>
    <script>
        var box=document.getElementById("box");
        var str="<input type='hidden'><script defer>alert('hello~');<\/script>";
        box.innerHTML=str;

    </script>
</body>
</html>

不能單獨創建style meta link等元素

除非也是放置在有作用域的元素之後，如<input type="hidden">

並且只在IE6-8中有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
</head>
<body>
    <div id="box"></div>
    <script>
        var box=document.getElementById("box");
        var str="<input type='hidden'><style>body{background:#abcdef;}<\/style>";
        box.innerHTML=str;

    </script>
</body>
</html>

innerHTML和outerHTML的區別：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
</head>
<body>
    <div id="box"><b>喵喵喵</b></div>
    <script>
        console.log(box.innerHTML);//<b>喵喵喵</b>
        console.log(box.outerHTML);//<div id="box"><b>喵喵喵</b></div>

    </script>
</body>
</html>

innerText 提取元素中所有的文本節點

只有文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
</head>
<body>
    <div id="box">開始~<b>喵喵喵~</b>結束~</div>
    <br>
    <div id="new1"></div>
    <div id="new2"></div>
    <script>
        console.log(box.innerText);//開始~喵喵喵~結束~
        console.log(box.innerHTML);//開始~<b>喵喵喵~</b>結束~

        var new1=document.getElementById("new1");
        new1.innerHTML="<b>通過innerHTML添加的</b>";
        var new2=document.getElementById("new2");
        new2.innerText="<b>通過innerText添加的</b>";
    </script>
</body>
</html>

低版本firefox不支持innerText

使用：textContent 兼容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
</head>
<body>
    <div id="box">開始~<b>喵喵喵~</b>結束~</div>
    
    <script>
        //獲取innerText
        function getInnerText(ele){
            return (typeof ele.textContent=="string")?ele.textContent:ele.innerText;
        }
        //設置innerText
        function setInnerText(ele,text){
            if(typeof ele.textContent=="string"){
                ele.textContent=text;
            }else{
                ele.innerText=text;
            }
        }
        
        console.log(getInnerText(box));
        setInnerText(box,"這是通過setInnerText設置的文本哦")
    </script>
</body>
</html>

outerText在獲取時和innerText相同

在設置時會替換掉本身的元素，因此不建議使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script src="DomReady.js"></script>
</head>
<body>
    <div id="box">開始~<b>喵喵喵~</b>結束~</div>
    
    <script>    
        console.log(box.outerText);
        box.outerText="這是通過outerText設置的文本哦";
    </script>
</body>
</html>

JS DOM創建節點

DAPPER 事務 TRANSACTION

Java中線程的創建方式

VUE實現商城系統

VUE搭建課程首頁

TP5 專題、分類、商品詳情接口編寫

TP5 + 小程序全棧準備工作

網頁開發基礎--Vue

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結