DOM

时间：2017-10-27 01:27:47 阅读：167 评论：0 收藏：0 [点我收藏+]

标签：src id3 elements ima eva 名称 var lan script

1 DOM概述

DOM：Document Object Model，文档对象模型。把HTML这样的具有嵌套关系的文档看成是一个document对象。
其中：
- Node：节点
  - Document：代表的是整个文档
  - Element：代表的是一个标签（元素）
  - Text：代表的是一个标签中的文本
  - Attribute：代表的是一个标签中的属性，有元素才有属性

2 XML DOM和HTML DOM

XML：可扩展的标签语言。相对于HTML来讲的。
- HTML：在HTML中<a>代表的是一个超链接，含义是固定的。说明HTML标签是有限的。
- XML：自定义标签，扩展性强。　　
可以把HTML当做XML来看。
- XML DOM方式解析HTML，还能解析HTML。
- HTML DOM方式解析HTML，只能解析HTML，不能解析XML。　　
如果把HTML当做XML对待，不会忽略回车空格和制表符。
HTML DOM定义了针对HTML文档的对象，可以说是一套适合用于JavaScript技术开发的API。
HTML DOM是对XML DOM的扩展。
进行JavaScript DOM开发，可以同时使用XML DOM和HTML DOM。

3 Document

常用方法：
- document.getElementById()　返回对拥有指定id的第一个对象的引用
- document.getElementsByName() 返回带有指定名称的对象集合
- document.getElementByTagName() 返回带有指定标签名的对象集合

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>docuemnt</title>
    <script type="text/javascript">
        window.onload = function () {
            var id1 = document.getElementById("id1");
            console.log(id1.value)
        }

    </script>
</head>
<body>

    <input type="text" id="id1" name="sex" value="男" />
    <input type="text" id="id2" name="sex" value="女"/>
    <input type="password" id="id3" name="password" value="123"/>


</body>
</html>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>docuemnt</title>
    <script type="text/javascript">
        window.onload = function () {
            var sex = document.getElementsByName("sex");
            for(var x =0;x<sex.length;x++){
                console.log(sex[x].value);
            }
        }


    </script>
</head>
<body>

    <input type="text" id="id1" name="sex" value="男" />
    <input type="text" id="id2" name="sex" value="女"/>
    <input type="password" id="id3" name="password" value="123"/>


</body>
</html>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>docuemnt</title>
    <script type="text/javascript">
        window.onload = function () {
            var input = document.getElementsByTagName("input");
            for(var x =0;x<input.length;x++){
                console.log(input[x].value);
            }
        }


    </script>
</head>
<body>

    <input type="text" id="id1" name="sex" value="男" />
    <input type="text" id="id2" name="sex" value="女"/>
    <input type="password" id="id3" name="password" value="123"/>


</body>
</html>

4 Node

nodeName：
- 如果节点是元素节点，nodeName返回这个元素的名称
- 如果节点是属性节点，nodeName返回这个属性的名称
- 如果节点是文本节点，nodeName返回一个内容为#text的字符串　　
nodeType：
- Node.ELEMENT_NODE 1 元素节点
- Node.ATTRIBUTE_NODE 2 属性节点
- Node.TEXT_NODE 3 文本节点
nodeValue：
- 如果给定的节点是一个元素节点，返回值是null。
- 如果给定的节点是一个属性节点，返回值是这个属性的值。
- 如果给定的节点是一个文本节点，返回值是这个文本节点的内容。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node</title>
    <script type="text/javascript">
        window.onload = function () {
            var div = document.getElementById("div");
            //元素节点的nodeName nodeType nodeValue
            console.log(div.nodeName+":"+div.nodeType+":"+div.nodeValue)
        }


    </script>
</head>
<body>

    <div id="div" style="width: 500px;height: 500px;background-color: aqua">
        牛逼的人总在默默努力，不牛逼的人总在吹牛逼
    </div>


</body>
</html>

技术分享

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node</title>
    <script type="text/javascript">
        window.onload = function () {
            var div = document.getElementById("div");
            var styleNode = div.getAttributeNode("style");//xml dom获取元素的属性节点
            console.log(styleNode.nodeName +":" +styleNode.nodeType+":"+styleNode.nodeValue)

        }

    </script>
</head>
<body>

    <div id="div" style="width: 500px;height: 500px;background-color: aqua">
        牛逼的人总在默默努力，不牛逼的人总在吹牛逼
    </div>


</body>
</html>

技术分享

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node</title>
    <script type="text/javascript">
        window.onload = function () {
            var div = document.getElementById("div");
            var textNode = div.firstChild;
            console.log(textNode.nodeName +":"+textNode.nodeType+":"+textNode.nodeValue)

        }

    </script>
</head>
<body>

    <div id="div" style="width: 500px;height: 500px;background-color: aqua">
        牛逼的人总在默默努力，不牛逼的人总在吹牛逼
    </div>


</body>
</html>

技术分享

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
       window.onload = function () {
           var edu = document.getElementById("edu");
           var child = edu.childNodes;
           for(var x =0;x<child.length;x++){
               if(child[x].nodeType ==1){
                   console.log(child[x].firstChild.nodeValue);
               }
           }
       }

    </script>


</head>
<body>
    <select id="edu" name="edu">
        <option>博士</option>
        <option>硕士</option>
        <option>本科</option>
        <option>专科</option>
        <option>高中</option>
        <option>初中</option>
        <option>小学</option>
        <option>幼儿园</option>
    </select>
</body>
</html>

技术分享

DOM

标签：src id3 elements ima eva 名称 var lan script

原文地址：http://www.cnblogs.com/xuweiweiwoaini/p/7739660.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行