10、DOM（文档对象模型）

1、认识DOM

html 骨架
css 装修
javascript 物业

==DOM 打破上述三者的通道。==

【注】script标签一般情况下要写在head标签。

<div id = "div1">div文本</div>

==1、标签元素节点对象==

<div></div>

==2、id = "div1" 属性节点对象==
==3、div文本文本节点对象==

【注】元素节点对象应该如何在js中被找到。

==window.onload==
当页面加载完成以后，去执行的函数。

document.getElementById();

            window.onload = function(){
                var oDiv = document.getElementById("div1");
                alert(oDiv);
            }

2、node.getElementsByTagName()

document.getElementsByTagName()
==格式：node.getElementsByTagName()==
++功能：从node这个节点开始，找node子节点中符合标签名的所有元素++。
参数：标签名字
返回值：查找到所有符合这个标签名的所有元素节点。使用的时候，类似于数组。

        <script>
            window.onload = function(){
                /*var aDivs = document.getElementsByTagName("div");

                //aDivs使用起来和数组类似。

                alert(aDivs.length);*/


                /*var aBtns = document.getElementsByTagName("button");
                for(var i = 0; i < aBtns.length; i++){
                    aBtns[i].onclick = function(){
                        alert(123);
                    }
                }*/

                /*
                    找到div1，找到div1下的button
                */
                var oDiv = document.getElementById("div1");
                var aBtns = oDiv.getElementsByTagName("button");
                for(var i = 0; i < aBtns.length; i++){
                    aBtns[i].onclick = function(){
                        alert(123);
                    }
                }
            }
        </script>

    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <div id = "div1">
            <button>按钮4</button>
            <button>按钮5</button>
        </div>
    </body>

3、node.getElementsByClassName()

==【注】IE8以下不兼容。==
==node.getElementsByClassName()==
参数：class的名字
返回值：找到从node节点开始，node子节点中，所有符合条件的元素。
document 代表 <html></html>

        <style>
            .red{
                background-color: red;
            }
            div{
                width: 100px;
                height: 100px;
                margin: 30px;
                background-color: black;
            }
        </style>
        <script>
            /*
            【注】IE8以下不兼容。
                node.getElementsByClassName()
                参数：class的名字
                返回值：找到从node节点开始，node子节点中，所有符合条件的元素。

                document 代表 <html></html>
            */

            window.onload = function(){
                // var nodes = document.getElementsByClassName("red");

                var oDiv = document.getElementById("div1");
                var nodes = oDiv.getElementsByClassName("red");
                // alert(nodes.length);
                for(var i = 0; i < nodes.length; i++){
                    nodes[i].style.backgroundColor = "blue";
                }
            }
        </script>
    <body>
        <div></div>
        <div class = "red"></div>
        <div></div>
        <div class = "red"></div>
        <div></div>
        <div id = "div1">
            <span class = "red">文本</span>
            <button class = "red">按钮</button>
        </div>
    </body>

4、document.getElementsByName(name)

document.getElementsByName();
1、==只能从document开始去查==
2、参数：name的值，
3、返回值：通过name的值查找到的所有符合条件的元素。

【注】name属性一般情况，使用在form表单元素中，其他标签就不要去用了。

获取元素节点的方法
1、document.getElementById(id)
2、node.getElementsByTagName(tagName)
3、node.getElementsByClassName(className)
IE8以下不兼容
4、document.getElementsByName(name)

        <script>
            window.onload = function(){
                /*
                    
                */
                var nodes = document.getElementsByName("hello");
                alert(nodes.length);

                
            }
            
        </script>
    </head>
    <body>
        <div name = "hello"></div>
        <span name = "hello"></span>
        <input type="text" name = "hello">
        <textarea name="hello" id="" cols="30" rows="10"></textarea>
    </body>

5、元素节点的属性

元素节点 === 标签
==1、tagName 当前元素节点的标签名
2、innerHTML 标签间的内容==

            window.onload = function(){
                var oDiv = document.getElementById("div1");
                // alert(oDiv.tagName);

                //获取
                // alert(oDiv.innerHTML);

                //设置 innerHTML中如果有标签，会解析
                oDiv.innerHTML = "<strong>粗体文本</strong>"
            }

访问属性

//alert(oDiv.id);
//alert(oDiv.title);
//alert(oDiv.className);

// alert(oDiv.style); //返回的是一个css样式对象
// alert(oDiv.style.width);
// alert(oDiv.style.height);

++对于带-的样式，要将-去掉，然后后续单词的首字母大写。++
//++alert(oDiv.style.backgroundColor);++
oDiv.title = "world";
oDiv.className = "box2";
oDiv.style.backgroundColor = "blue";

6、随机颜色

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #div1{
                width: 200px;
                height: 200px;
                background-color: red
            }
        </style>
        <script>
            /*
                rgba(255, 255, 255,1);

                1位十六进制 == 四位二进制
                红 两位  == 8位

                parseInt(Math.random() * 256)   [0,1)
            */
            function randomColor(){
                var str = "rgba(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ",1)";
                return str;
            }

            window.onload = function(){
                var oDiv = document.getElementById("div1");

                var i = 15;

                setInterval(function(){
                    oDiv.style.backgroundColor = randomColor();
                    oDiv.style.fontSize = i++ + "px";
                }, 100);
            }
        </script>


    <body>
        <div id = "div1">
            清醒吧
        </div>
    </body>

7、自定义获取元素节点

        <script>
            function elementsByClassName(node, className){
                var nodes = node.getElementsByTagName("*");
                var nodeArr = [];
                //2、通过循环，找出class = box的节点
                for(var i = 0; i < nodes.length; i++){
                    if(nodes[i].className == className){
                        nodeArr.push(nodes[i]);
                    }
                }
                return nodeArr;
            }


            window.onload = function(){
                var oDiv = document.getElementById("div1");
                
                var nodes = elementsByClassName(oDiv, "box");

                alert(nodes.length);
                alert(nodes[1].tagName);
            }
        </script>
    <body> 
        <div id = "div1">
            <span class = "box">span</span>
            <button class = "box">button1</button>
            <button>button2</button>
        </div>
        <div class = "box">div</div>
    </body>

8、练习

写一个定时器,每个一秒修改一次div内文本颜色和文字大小.
最开始这个文字是默认大小,大小开始增大,当增大了6次以后,
文字大小开始缩小,缩小6次,文字再开始增大。


<script>
            window.onload = function(){
                var oDiv = document.getElementById("div1");

                var i = 1; //代表一共变化了多少次字体大小。
                var speed = 10; //字体大小变化的速度。



                setInterval(function(){
                    //颜色随机方法在上面
                    oDiv.style.color = randomColor();
                    //1、获取当前的字体大小
                    var currentFontSize = parseInt(oDiv.style.fontSize);
                    //2、累加
                    oDiv.style.fontSize = currentFontSize + speed + "px";
                    if(i % 6 == 0){
                        speed *= -1;
                    }
                    i++;
                }, 100);
            }
        </script>
    </head>
    <body>
        
        <div id = "div1" style = "font-size: 18px">
            我是要变化的文本
        </div>
    </body>

9、总结，获取元素

        <style>
            /*选择器*/
            #div1{
                width: 100px;
                height: 100px;
            }
            .box{
                background-color: red
            }
            div{
                border: 1px solid black;
            }
        </style>
        <script>
            /*
                document.getElementById();
                node.getElementsByTagName();
                node.getElementsByClassName();
                document.getElementsByName();
            */

            /*
                封装函数
                #id     通过id获取元素
                .class  通过class获取元素
                tagName 通过tagName获取元素
                name=xxx通过name获取元素
            */
            function $(vArg){
                switch(vArg[0]){
                    case "#"://id
                        return document.getElementById(vArg.substring(1));
                        break;
                    case "."://class
                        return elementsByClassName(document, vArg.substring(1));
                        break;
                    default:
                        var subStr = vArg.substring(0, 5);
                        if(subStr == "name="){
                            //name
                            return document.getElementsByName(vArg.substring(5));
                        }else{
                            //tagName
                            return document.getElementsByTagName(vArg);
                        }
                        break;
                }
            }

            function elementsByClassName(node, className){
                var nodes = node.getElementsByTagName("*");
                var nodeArr = [];
                //2、通过循环，找出class = box的节点
                for(var i = 0; i < nodes.length; i++){
                    if(nodes[i].className == className){
                        nodeArr.push(nodes[i]);
                    }
                }
                return nodeArr;
            }

            window.onload = function(){
                //id = div1
                // alert($("#div1").id);

                //class = "box"
                // alert($(".box").length);
                // alert($(".box")[2].tagName);

                //name='hello'
                // alert($("name=hello").length);

                //tagName
                alert($("li").length);
            }

        </script>


    <body>
        <div id = "div1" class = "box"></div>
        <span class = "box">span</span>
        <ul>
            <li>1</li>
            <li>2</li>
            <li class = "box">3</li>
        </ul>
        <input type="text" name = "hello" />
        <textarea name="hello" id="" cols="30" rows="10"></textarea>
    </body>

10、Attribute

设置属性
setAttribute()
格式：==元素节点.setAttribute(key, value);==

获取属性
getAttribute();
==格式：元素节点.getAttribute(key)==

删除属性
removeAttribute();
格式：==元素节点.removeAttribute(key)==

        <script>
        
            window.onload = function(){
                var oDiv = document.getElementById("div1");
                //获取属性
                // alert(oDiv.title);
                // alert(oDiv.getAttribute("title"));

                // oDiv.title = "world";
                // oDiv.setAttibute("title", "world");

                /*
                    1、class
                */
                /*alert(oDiv.className);
                oDiv.className = "box2";*/

                /*alert(oDiv.getAttribute("class"));
                oDiv.setAttribute("class", "xxx");*/

                /*
                    2、自定义属性
                */
                // alert(oDiv.xxx);
                // alert(oDiv.getAttribute("xxx"));

                // oDiv.xxx = "yyy";
                //oDiv.setAttribute("xxx", "yyy");


                /*
                    3、removeAttribute()
                */
                // oDiv.className = "";
                oDiv.removeAttribute("class");
            }
        </script>
    
    <body>
        <div id = "div1" title = "hello" class = "box"></div>
    </body>

11、节点属性

三种：
++1、元素节点++

<div></div>

++2、属性节点 id = "div1"
3、文本节点 div文本通过元素节点的子节点找到的。++

元素节点的属性：
==childNodes
firstChild
lastChild==

【注】只获取子节点中的元素节点
==children
firstElementChild
lastElementChild==

==parentNode== 当前节点的父节点
==previousSibling== 找出当前节点的兄弟节点中上一个节点
==nextSibling== 找出当前节点的兄弟节点中下一个节点

            window.onload = function(){
                var oDiv = document.getElementById("div1");
                // alert(oDiv.childNodes.length);
                /*alert(oDiv.childNodes[0]);
                alert(oDiv.childNodes[1]);*/

                alert(oDiv.firstChild);
                alert(oDiv.lastChild);
            }

            window.onload = function(){
                var oDiv = document.getElementById("div1");
                // alert(oDiv.childNodes.length); //5
                // alert(oDiv.childNodes[0]);
                
                // alert(oDiv.children.length);
                /*alert(oDiv.children[0]);
                alert(oDiv.children[1]);*/
                /*alert(oDiv.firstElementChild.tagName);
                alert(oDiv.lastElementChild.tagName);*/


                // alert(oDiv.parentNode.tagName);

                // alert(oDiv.previousSibling);
                alert(oDiv.nextSibling)
            }

            /*
                如何忽略空白节点
            */
        </script>

    <body>
        <strong>strong2</strong>
        <div id = "div1">
            <strong>strong</strong>
            div文本
            <span>span</span>
            xxxx
        </div>
        <h1>h1</h1>
    </body>

12、节点属性

++元素节点
文本节点
属性节点++ 都有:
==nodeName nodeType nodeValue==

节点属性

            window.onload = function(){
                var oDiv = document.getElementById("div1");
                /*alert(oDiv.nodeName);
                alert(oDiv.nodeType);
                alert(oDiv.nodeValue);*/

                alert(oDiv.firstChild.nodeName);  //#text
                alert(oDiv.firstChild.nodeType);  //3
                alert(oDiv.firstChild.nodeValue); //
            }

13、忽略空白节点方法

        <script>
            window.onload = function(){
                var oDiv = document.getElementById("div1");
                /*
                文本节点
                    nodeName  #text
                    nodeType  3
                    nodeValue 文本的值
                */

                alert(oDiv.childNodes.length);
                // alert("|" + oDiv.firstChild.nodeValue + "|");


                //字符串中的\n代表换行  \r进纸字符
                /*var str = "   \n    ";
                var res = /^\s+$/.test(str);
                alert(res);*/

                filterSpaceNode(oDiv);
                alert(oDiv.childNodes.length);
                alert(oDiv.childNodes[0].tagName);
                alert(oDiv.childNodes[1].nodeValue);
            }

            /*
                匹配纯空白字符串(包含空格，回车，tab，换行)
                正则表达式
                /^\s+$/.test()  是纯空白，返回true，否则，返回false
            */
            function filterSpaceNode(node){
                var nodes = node.childNodes;
                //通过循环找到所有的空白节点
                for(var i = 0; i < nodes.length; i++){
                    if(nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){
                        //肯定是空白
                        //将这个空白节点删除。
                        node.removeChild(nodes[i]);
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id = "div1">
            <strong>strong</strong>
            文本
            <h1>h1</h1>
        </div>
    </body>

14、属性节点

==元素节点==
==文本节点== : 元素节点的子节点
==属性节点==

节点属性

        <script>
            /*
                元素节点
                文本节点  元素节点的子节点
                属性节点
            */

            window.onload = function(){
                /*
                    attributes 获取当前元素节点所有属性节点
                */
                var oDiv = document.getElementById("div1");
                // alert(oDiv.attributes.length);

                //oDiv.attributes.getNamedItem(key)

                //object Attr
                /*
                    nodeName   该属性节点的属性名
                    nodeType   2
                    nodeValue  该属性节点的值
                */
getNamedItem() 方法返回节点列表中指定属性名的值。

                // alert(oDiv.attributes.getNamedItem("id"));

                /*alert(oDiv.attributes.getNamedItem("id").nodeName);
                alert(oDiv.attributes.getNamedItem("id").nodeType);
                alert(oDiv.attributes.getNamedItem("id").nodeValue);*/


                /*alert(oDiv.attributes["id"].nodeName);
                alert(oDiv.attributes["id"].nodeType);
                alert(oDiv.attributes["id"].nodeValue);*/

                


                //object NamedNodeMap  集合
                /*
                    集合：
                    1、不重复
                    2、无序
                */
            }
        </script>
    </head>
    <body>
        <div  class = "box" title = "hello" name = "world" id = "div1"></div>
    </body>

15、createElement

document.write在写入内容的时候，会将原有的内容覆盖掉
==document.createElement(标签名);==
++返回值：创建好的该标签对象++

==document.createTextNode()==
==功能：创建文本节点==

DOM节点操作

<script>
            function btnClick(){
                //有一个span节点
                //创建一个span节点
                /*
                document.createElement(标签名);     
                返回值：创建好的该标签对象   
                */
                var oDiv = document.getElementById("div1");
                var oSpan = document.createElement("span");
                //给span节点填充文本
                /*
                    document.createTextNode()
                    功能：创建文本节点
                */
                /*var oTxt = document.createTextNode("span的内容");
                oSpan.appendChild(oTxt);*/

                oSpan.innerHTML = "span的内容";


                /*
                    node1.appendChild(node2)
                    功能：将node2插入到node1的子节点内，并且，是子节点的末尾。
                */
                oDiv.appendChild(oSpan);
            }
        </script>
    </head>
    <body>
        <button onclick = "btnClick();">按钮</button>
        <div id = "div1">
            <strong>strong</strong>
            <h1>h1</h1>
        </div>
    </body>

16、insertBefore

        <script>
            function btnClick(){
                /*
                    insertBefore()
                    格式：父节点.insertBefore(node1, node2)
                    功能：将node1节点插入到node2节点的前面
                */

                var oStrong = document.createElement("strong");
                var oDiv2 = document.getElementById("div2");
                var oDiv1 = document.getElementById("div1")
                // oDiv2.parentNode.insertBefore(oStrong, oDiv2);

                oDiv2.appendChild(oStrong);

                setTimeout(function(){
                    oDiv1.appendChild(oStrong);
                }, 4000);

            }

            //node1插入到node2的后面
            function insertAfter(node1, node2){
                //1、node2后面还有别的元素
                //2、node2已经是最后一个了，直接插入到
                if(node2 == node2.parentNode.lastChild){
                    node2.parentNode.appendChild(node1);
                }else{
                    node2.parentNode.insertBefore(node1, node2.nextSibling);
                }
            }
        </script>
    </head>
    <body>
        <button onclick = "btnClick();">按钮</button>
        <div id = "div2"></div>
        <div id = "div1"></div>
    </body>

17、节点操作

        <script>
            function btnClick(){
                /*
                    replaceChild()
                    格式：父节点.replaceChild(node1, node2);
                    功能：用node1替换node2
                */

                /*var oSpan = document.createElement("span");
                var oDiv = document.getElementById("div1");
                oDiv.parentNode.replaceChild(oSpan, oDiv);*/

                /*
                    cloneNode()
                    参数：true/false 如果true，将该标签和标签间内容，全部克隆
                    返回值：新克隆好的元素节点
                */
                /*var oDiv = document.getElementById("div1")
                var newNode = oDiv.cloneNode(true);
                document.body.appendChild(newNode);*/

                /*
                    removeChild()
                    格式：parentNode.removeChild(node)
                    功能：删除node这个节点
                */
                var oDiv = document.getElementById("div1")
                oDiv.parentNode.removeChild(oDiv);
            }

        </script>
    </head>
    <body>
        <button onclick = "btnClick();">按钮</button>
        <div id = "div1">div1</div>
    </body>