你好javascript day10

1）DOM

window BOM的根元素

document DOM的根元素

window.document document属于window属性

BOM

window.location

window.history

window.navigator

window.document

window.screen

nodeName节点名

所有的文本节点名都是#text

所有的注释的nodeName是#comment

childNodes 子节点

children 子元素

parentNode 父节点

parentElement 父元素

firstChild 第一个子节点

firstElementChild 第一个子元素

lastChild 最后一个子节点

lastElementChild 最后一个子元素

nextSibling 下一个兄弟节点

nextElementSibling 下一个兄弟元素

previousSibling 上一个兄弟节点

previousElementSibling 上一个兄弟元素

nodeValue 节点值

》如果是文本就显示文本内容

》如果是标签元素nodeValue是null

》如果是注释，nodeValue就是注释内容

nodeType 节点类型

document.getElementById（）；根据id获取标签元素

document.getElementsByTagName（）；根据标签名获取标签列表不可以通过父元素获取

document.getElementsByClassName（）；根据className获取标签列表

document.querySelector（）；根据选择器获取到第一个找到的元素

document.querySelectorAll（）；根据选择器获取到所有的元素

2）元素操作

innerHTML

document.write

textContent 文本内容

document.createElement(标签名) 根据标签名创建标签元素

父容器.appendChild(子元素); 将子元素插入在父容器的尾部

        // 给ul创建若干子元素
         var ul=document.querySelector("ul");
        for(var i=0;i<10;i++){
            var li=document.createElement("li");
            li.textContent=i;
            ul.appendChild(li);
        } 


        // 创建超链接列表
        var arr=[
            {site:"网易",url:"http://www.163.com"},
            {site:"腾讯",url:"http://www.qq.com"},
            {site:"百度",url:"http://www.baidu.com"},
            {site:"京东",url:"http://www.jd.com"},
            {site:"谷歌",url:"http://www.google.com"},
            {site:"淘宝",url:"http://www.taobao.com"},
        ];

        // var ul=document.querySelector("ul");
        // 使用DOM解决
         for(var i=0;i<arr.length;i++){
            var li=document.createElement("li");
            var a=document.createElement("a");
            a.href=arr[i].url;
            a.textContent=arr[i].site;
            li.appendChild(a);
            ul.appendChild(li);
        } 
        // 使用InnerHTML解决
         var str="";
        for(var i=0;i<arr.length;i++){
            str+="<li>";
            str+="<a href='"+arr[i].url+"'>"
            str+=arr[i].site;
            str+="</a>";
            str+="</li>"
        }
        ul.innerHTML=str; 

        
         var div=document.createElement("div");
        document.body.appendChild(div);

        var img=document.createElement("img");
        img.src="1.png";
        document.body.appendChild(img);

父容器.insertBefore(要插入的元素，插入在谁的前面)；

创建文本节点 document.createTextNode("文本");

元素.cloneNode(深度布尔值)

》false 浅复制仅复制元素，不复制内容和子元素

》true 深复制可以将元素和元素里面的内容及子元素都复制进去

》不管是浅复制或者深复制都会将标签的属性全部复制，因此id可能会产生问题

》所有有id的标签都需要重新设置id

元素.remove(); 元素自身删除

父容器.removeChild(子元素); 父容器删除子元素

父容器.replaceChild(新的元素，要替换的元素);

点击添加元素

<body>
    <button>按钮</button>
   <!--  <div id="div0">
       
    </div> -->
  <!--   <script>
        var bn=document.querySelector("button");
        var div=document.getElementById("div0");
        var str=""
        bn.onclick=function(){
            var num=Math.floor(Math.random()*80+20);
            str+="<div style=";
            str+=""+num+"px;";
            str+="height:"+num+"px;";
            str+="background-color:"+randomColor()
            str+="></div>"
            console.log(div.innerHTML+str)
            // 将原来的覆盖掉
            div.innerHTML=div.innerHTML+str;
        }
//随机颜色函数
        function randomColor(){
            var col="#";
            for(var i=0;i<6;i++){
                col+=Math.floor(Math.random()*16).toString(16);
            }
            return col;
        }
    </script> -->


    <script>

        init();

        function init(){
            var bn=document.querySelector("button");
            bn.onclick=clickHandler;
        }

        function clickHandler(){
            var div=document.createElement("div");
            div.style.width=div.style.height=Math.floor(Math.random()*80+20)+"px";
            div.style.backgroundColor=randomColor();
            div.style.position="absolute";
            div.style.left=Math.floor(Math.random()*1000)+"px";
            div.style.top=Math.floor(Math.random()*600)+"px";
            document.body.appendChild(div);
        }


        function randomColor(){
            var col="#";
            for(var i=0;i<6;i++){
                col+=Math.floor(Math.random()*16).toString(16);
            }
            return col;
        }
    </script>
</body>