JS学习九：DOM节点

一、DOM

DOM：文档对象模型(document object model)，DOM是访问HTML和操作HTML的标准。即document对象。

DOM分类：

Core DOM：核心DOM，针对任何结构变化文档的标准模型
XML DOM：针对XML文档的标准模型
HTML DOM：针对HTML文档的标准模型

DOM节点的分类：

文档节点
元素节点（标签节点）
属性节点
文本节点
注释节点

DOM节点层级关系--DOM树：

父节点parent node：父节点拥有任意数量的子节点。
子节点child node：子节点只能拥有一个父节点
兄弟节点sibling node：拥有相同父节点的同级节点
根节点root node：一个HTML文档一般只有一个根节点HTML，根节点没有父节点，是最上层的节点。

祖先节点：包含子节点的节点都可以叫做祖先节点。其中包括了父节点。

后代节点：一个节点内包含的所有节点，叫做后代节点。其中，包括了子节点。

JS跟页面中标签进行交互：

1.获取标签节点，修改标签属性，修改标签CSS样式
2.创建标签
3.删除标签
4.复制标签
5.插入标签

二、获取标签(元素)节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/test.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body style="height: 3000px;">
        <div id="idDiv"></div>
        <div class="classDiv"></div>
        <div class="classDiv"></div>
        <div class="classDiv"></div>
        <div class="classDiv"></div>
        <div class="classDiv"></div>
        
        <input type="text" name="inputText" />
        <input type="text" name="inputText" />
        <input type="text" name="inputText" />
        <script type="text/javascript">
            //找到要操作的标签对象,如#idDiv
            var jsDiv = document.getElementById("idDiv")
            console.log(jsDiv)
            console.log(typeof(jsDiv))
        </script>
    </body>
</html>

结果：<div id="idDiv"></div>

结果：object

示例：查找class属性值为classDiv的标签

            var jsDivs = document.getElementsByClassName("classDiv")
            console.log(jsDivs)
            console.log(typeof(jsDivs))
结果：
HTMLCollection(5) [div.classDiv, div.classDiv, div.classDiv, div.classDiv, div.classDiv]
结果：object

从上图可以看出，找到的标签对象，有众从的方法和属性。

查找name为inputTextinput标签，

        <script type="text/javascript">
            var jsDiv = document.getElementsByName("inputText")
            console.log(jsDiv)
            console.log(typeof(jsDiv))
            console.log(jsDiv[0].offsetTop)
            结果：NodeList(3) [input, input, input]
            结果：object
        </script>

查找所有DIV节点：

            var jsAllDivsArr = document.getElementsByTagName("div")
            console.log(jsAllDivsArr)
            console.log(typeof(jsAllDivsArr))

结果：HTMLCollection(6) [div#idDiv, div.classDiv, div.classDiv, div.classDiv, div.classDiv, div.classDiv, idDiv: div#idDiv]

结果：object

三、获取属性节点

方式一：元素节点.属性名称

使用以上示例的文档：

        <script type="text/javascript">
            var jsDiv = document.getElementsByName("inputText")
            var typeNode = jsDiv[0].type
            console.log(jsDiv)  // 结果：NodeList(3) [input, input, input]
            console.log(typeNode) // 结果: "text"
            console.log(typeof(typeNode))  //结果:string
            console.log(typeNode.toString()) // 结果: "text"
        </script>

    <body style="height: 3000px;">
        <input type="text" id="in" name="inputText" placeholder="请输入姓名" my="你的姓名"/>
        <script type="text/javascript">
            //先找到标签
            var jsInput = document.getElementById("in")
            //再找属性节点
            //方式一:获取官方定义的属性直接使用,元素节点.属性名,即可得到元素对应属性的属性值
            var typeNode = jsInput.type;
            console.log(typeNode);   //结果:"text"
            console.log(typeof(typeNode));  //结果:string
            var placeholderNode = jsInput.placeholder;
            console.log(placeholderNode);  //结果:”请输入姓名"
            console.log(typeof(placeholderNode)); //结果:string
        </script>
    </body>

修改属性值：

    <body style="height: 3000px;">
        <button onclick="func()">修改属性</button>
        <input type="text" id="in" name="inputText" placeholder="请输入姓名" my="你的姓名"/>
        <script type="text/javascript">
            var jsInput = document.getElementById("in")
            function func () {
                jsInput.placeholder = "哈哈";
            }
        </script>
    </body>

方式二：元素节点.getAttribute("属性名称")

        <button onclick="func()">修改属性</button>
        <input type="text" id="in" name="inputText" placeholder="请输入姓名" my="你的姓名"/>
        <script type="text/javascript">
            var jsInput = document.getElementById("in")
            //方法二: 元素节点.getAttribute("属性名")：得到元素对应属的属性值
            //该方法不仅可以获取官方定义的属性的属性值,也可以获取自定义的属性的属性值
            console.log(jsInput.my) //结果：undefined。使用方法一,不能获取到自定义属性的属性值
            console.log(jsInput.getAttribute("my")) //结果: "你的姓名"
        </script>

准确地说，上面是获取元素节点的属性。

获取元素节点的属性节点示例：

         <button onclick="func()">修改属性</button>
           <input type="text" id="in" name="inputText" placeholder="请输入姓名" my="你的姓名"/>
        <script type="text/javascript">
            //先找到标签
            var jsInput = document.getElementById("in")
            var typeNode = jsInput.getAttributeNode("type")
            console.log(typeNode);   //结果: type对象
            console.log(typeof(typeNode));  //结果:object
            var placeholderNode = jsInput.getAttributeNode("placeholder");
            console.log(placeholderNode);  //结果: placeholder对象
            console.log(typeof(placeholderNode)); //结果:object
        </script>

修改自定义属性的属性值：

    <body style="height: 3000px;">
        <button onclick="func()">修改属性</button>
        <input type="text" id="in" name="inputText" placeholder="请输入姓名" my="你的姓名"/>
        <script type="text/javascript">
            var jsInput = document.getElementById("in")
            function func () {
                jsInput.setAttribute("my", "哈哈");
                console.log(jsInput.getAttribute("my"));
            }
        </script>
    </body>

移除、新增、修改属性：

    <body style="height: 3000px;">
        <button onclick="func()">修改属性</button>
        <input type="text" id="in" name="inputText" placeholder="请输入姓名" my="你的姓名"/>
        <script type="text/javascript">
            var jsInput = document.getElementById("in")
            function func () {
                jsInput.removeAttribute("my"); //移除一个属性
                jsInput.setAttribute("myxxx", "xxx") // 修改或增加一个属性
                console.log(jsInput);  //<input type="text" id="in" name="inputText" placeholder="请输入姓名" myxxx="xxx">
            }
        </script>
    </body>

四、获取文本节点

        <button onclick="func()">修改</button>
        <div id="box">我是个盒子</div>
        <script type="text/javascript">
            //先找到标签
            var jsDiv = document.getElementById("box")
            // 使用元素节点.innerHTML，找到元素的文本,不包括标签
            console.log(jsDiv.innerHTML)  //我是个盒子
            console.log(typeof(jsDiv.innerHTML))  // string
            // 使用元素节点.outerHTML，找到元素的文本和标签,包括标签
            console.log(jsDiv.outerHTML)  //<div id="box">我是个盒子</div>
            console.log(typeof(jsDiv.outerHTML))   // string
             // 使用元素节点.outerText，找到元素的文本,不包括标签,不包括文本中可能包含的标签
            console.log(jsDiv.outerText) // 我是个盒子
            console.log(typeof(jsDiv.outerText))   // string
            function func(){
                jsDiv.innerHTML = "我是个<h1>盒子</h>"
                console.log(jsDiv.innerHTML) // 我是个<h1>盒子</h1>
                console.log(typeof(jsDiv.innerHTML))  // string
                console.log(jsDiv.outerHTML)  // <div id="box">我是个<h1>盒子</h1></div>
                console.log(typeof(jsDiv.outerHTML))  // string
                console.log(jsDiv.outerText)  //我是个盒子
                console.log(typeof(jsDiv.outerText))  // string
            }
        </script>

posted on 2018-11-18 18:44 myworldworld 阅读(122) 评论(0) 收藏举报

刷新页面返回顶部

myworldworld