zoukankan      html  css  js  c++  java
  • web自动化:DOM对象

    一. 什么是DOM对象

    • 定义:DOM(Document Object Mode,文档对象模型)是一套web标准,定义了访问HTML文档的一套属性、方法和事件

    • 本质:网页与脚本语言沟通的桥梁。脚本语言通过DOM对象来访问html页面,从而改变文档的结构、样式和内容

    • 当浏览器载入HTML文档,它就会成为doument 对象

    • HTML DOM独立于平台和编程语言,它可被任何编程语言,如Java、JavaScript和VBScript使用

    二. DOM对象

    1. 在HTML DOM中:

    • 文档对象:整个HTML文档

    • 节点对象:所有的HTML元素是元素节点

    • 属性对象:依附于元素节点,所有节点的属性都是节点

    • 文本对象:HTML元素内的文本是文本节点

    2. 两个顶级节点:

    • Window:表示当前打开的浏览器窗口

    • Document:表示窗口中显示的当前html页面(文档)

      当浏览器载入 HTML 文档, 它就会成为 Document 对象

      Document 对象是HTML文档的根节点与所有其他节点(元素节点,文本节点,属性节点, 注释节点)

      Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问

      提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问

    三. HTML DOM 节点树

    HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树:

    通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改,也可以创建或删除节点

    四. 节点的父、子、同胞关系

    节点树中的节点彼此拥有层级关系,常用父(parent)、子(child)、同胞(sibling)等术语来描述这些关系:父节点拥有子节点,同级的子节点被称为同胞

    • 在节点树中,顶端节点被称为根(root)

    • 每个节点都有父节点、除了根(它没有父节点)

    • 一个节点可拥有任意数量的子节点

    • 同胞是拥有相同父节点的节点

    这些关系如下图所示:

    五. Document 对象属性和方法

    document对象的属性和方法:

    属性/方法 描述
    document.title 返回当前文档的标题
    document.URL 返回当前文档完整的URL
    document.forms 返回对文档中所有Form对象引用
    document.getElementsByClassName() 返回文档中所有指定类名的元素集合,作为NodeList对象
    document.getElementById() 返回对拥有指定id的第一个对象的引用
    document.getElementsByName() 返回带有指定名称的对象集合
    document.getElementsByTagName() 返回带有指定标签名的对象结合
    document.images 返回对文档中所有image对象引用
    document.querySelector() 返回文档中匹配指定的CSS选择器的第一元素
    document.querySelectorAll() document.querySelectorAll()是HTML5中引入的新方法,返回文档中匹配的CSS选择器的所有元素节点列表

    实例1:document.title

    <!DOCTYPE html>
    <html>
    <head>
        <title>My title</title>
    </head>
    <body>
        The title of the document is:
        <script type="text/javascript">
        document.write(document.title)
        </script>
    </body>
    </html>

    结果:

    实例2:document.URL

    <!DOCTYPE html>
    <html>
    <head>
        <title>My title</title>
    </head>
    <body>
        The URL of the document is:
        <script type="text/javascript">
        document.write(document.URL)
        </script>
    </body>
    </html>

    结果:

    实例3:document.forms

    <!DOCTYPE html>
    <html>
    <head>
        <title>My title</title>
    </head>
    <body>
        <form name="Form1"></form>
        <form name="Form2"></form>
        <form name="Form3"></form>
        
        <script type="text/javascript">
        document.write("This document contains: ")
        document.write(document.forms.length + " forms.")
        </script>
    </body>
    </html>

    结果:

    实例4:document.getElementsByClassName()

    <!DOCTYPE html>
    <html>
    <head>
        <title>My title</title>
    </head>
    <body>
        请输入你的名字: <input type="text" class="name" />
        <br>
        请输入他的名字: <input type="text" class="name" />
        <br>
        <button onclick="myFunction()">点我</button>
        <script type="text/javascript">
        function myFunction(){
            var i
            var x = document.getElementsByClassName("name")
            for (i=0; i<x.length; i++) {
                x[i].style.backgroundColor = "blue";
            }
        }
        </script>
    </body>
    </html>

    结果:

    实例5:document.getElementById()

    <!DOCTYPE html>
    <html>
    <head>
        <script type="text/javascript">
            function getValue(){
                var x = document.getElementById("myHeader");
                alert(x.innerHTML);
            }
        </script>
    </head>
    <body>
        <h1 id="myHeader" onclick="getValue()">This is a header</h1>
        <p>Click on the header to alert its value</p>
    </body>
    </html>

    结果:

    实例6:document.getElementsByName()

    <!DOCTYPE html>
    <html>
    <head>
        <script type="text/javascript">
            function getElements(){
                var x = document.getElementsByName("myInput");
                alert(x.length);
            }
        </script>
    </head>
    <body>
        <input name="myInput" type="text" size="20" /><br/>
        <input name="myInput" type="text" size="20" /><br/>
        <input name="myInput" type="text" size="20" /><br/>
        <br/>
        <input type="button" onclick="getElements()" value="How many elements named 'myInput'?" />
    </body>
    </html>

    结果:

    实例7:document.getElementsByTagName()

    <!DOCTYPE html>
    <html>
    <head>
        <script type="text/javascript">
            function getElements(){
                var x = document.getElementsByTagName("input");
                alert(x.length);
            }
        </script>
    </head>
    <body>
        <input name="myInput" type="text" size="20" /><br/>
        <input name="myInput" type="text" size="20" /><br/>
        <input name="myInput" type="text" size="20" /><br/>
        <br/>
        <input type="button" onclick="getElements()" value="How many input elements?" />
    </body>
    </html>

    结果:

    实例8:document.getElementsByTagName()

    <!DOCTYPE html>
    <html>
    <head>
        <script type="text/javascript">
            function getElements(){
                var x = document.getElementsByTagName("input");
                alert(x.length);
            }
        </script>
    </head>
    <body>
        <input name="myInput" type="text" size="20" /><br/>
        <input name="myInput" type="text" size="20" /><br/>
        <input name="myInput" type="text" size="20" /><br/>
        <br/>
        <input type="button" onclick="getElements()" value="How many input elements?" />
    </body>
    </html>

    结果:

    六. Element 对象

    在HTML DOM中,元素对象:一个HTML元素,即一个HTML标签对

    元素对象:

    • 可以有子节点、父节点

    • 可以有属性

    • 有节点名称、节点类型、节点值

    . Element 对象的属性和方法:

    属性/方法 描述
    element.attributes 返回一个元素的属性数组
    element.childNodes 返回元素的一个子节点的数组
    element.ClassName 设置或返回元素的class属性
    element.getAttribute() 返回指定元素的属性值
    element.getAttributeNode() 返回指定属性节点
    element.getElementsByTagName() 返回指定标签名的所有子元素集合
    element.getElementsByClassName() 返回文档中所有指定类名的元素集合,作为NodelList对象
    element.nodeName 返回元素的标记名(大写)
    element.nodeType 返回元素的节点类型,元素节点的nodeType属性值是1,属性节点的属性值是2,文本节点的属性值是3
    element.nodeValue 返回元素的节点值

    实例1:element.attributes

    <!DOCTYPE html>
    <html>
    <body>
        <p>点击按钮来查看 button 元素拥有多少属性</p>    
        <button id="myBtn" onclick="myFunc()">试一下</button>
        <p id="demo"></p>
        <script>
            function myFunc() {
                var x = document.getElementById("myBtn").attributes.length;
                document.getElementById("demo").innerHTML = x;
            }
        </script>
    </body>
    </html>

    结果:

    实例2:element.childNodes, 注意:元素中的空格被视为文本,而文本被视为节点

    <html>
    <body>
        <p id="demo">请点击按钮来获得 body 元素子节点的相关信息</p>
        <button onclick="myFunc()">试一下</button>
        <script>
        function myFunc() {
            var txt = "";
            var c = document.body.childNodes;
            for (i=0; i<c.length; i++) {
                txt = txt + c[i].nodeName + "<br>";
            };
            var x = document.getElementById("demo");
            x.innerHTML = txt;
        }
        </script>
    </body>
    </html>

    结果:

    实例3:element.className

    <!DOCTYPE html>
    <html>
    <body id="myid" class="mystyle">
        <script>
            var x = document.getElementsByTagName("body")[0];
            document.write("Body class name is: " + x.className);
        </script>
    </body>
    </html>

     结果:

    实例4:element.getAttribute()

    <!DOCTYPE html>
    <html>
    <body>
        请阅读 <a href="http://www.baidu.com" target="_blank">百度一下</a>
        <p id="demo">请点击按钮来显示上面这个链接的 target 属性值</p>
        <button onclick="myFunc()">试一下</button>
        <script>
            function myFunc() {
                var a = document.getElementsByTagName("a")[0];
                document.getElementById("demo").innerHTML = a.getAttribute("target");
            }
        </script>
    
    </body>
    </html>

    结果:

    实例5:element.getAttributeNode()

    <!DOCTYPE html>
    <html>
    <body>
        请阅读 <a href="http://www.baidu.com" target="_blank">百度一下</a>
        <p id="demo">请点击按钮来显示上面这个链接的 target 属性值</p>
        <button onclick="myFunc()">试一下</button>
        <script>
            function myFunc() {
                var a = document.getElementsByTagName("a")[0];
                var x = document.getElementById("demo");
                x.innerHTML = a.getAttributeNode("target").value;
            }
        </script>
    </body>
    </html>

    结果:

    实例6:element.getElementsByTagName()

    <!DOCTYPE html>
    <html>
    <body>
        <ul>
            <li>Coffee</li>
            <li>Tea</li>
        </ul>
        <p id="demo">请点击按钮来改变某个列表项的文本</p>
        <button onclick="myFunc()">试一下</button>
        <script>
        function myFunc() {    
            var list = document.getElementsByTagName("UL")[0];
            list.getElementsByTagName("LI")[0].innerHTML = "Milk";
        }
        </script>
    </body>
    </html>

    结果:

    实例7:element.getElementsByClassName()

    <!DOCTYPE html>
    <html>
    <body>
        <ul>
            <li class="drink">Coffee</li>
            <li>Tea</li>
        </ul>
        <p id="demo">请点击按钮来改变某个列表项的文本</p>
        <button onclick="myFunc()">试一下</button>
        <script>
        function myFunc() {    
            var list = document.getElementsByClassName("drink")
            alert(list[0].innerHTML)
        }
        </script>
    </body>
    </html>

    结果:

    实例8:element.nodeName   得到的元素节点名是大写

    <!DOCTYPE html>
    <html>
    <body>
        <p id="demo">请点击按钮来获得 body 元素子节点的节点名</p>
        <button onclick="myFunc()">试一下</button>
        <script>
            function myFunc() {
                var txt = "";
                var c = document.body.childNodes;
                for (i=0; i<c.length; i++) {
                    txt = txt + c[i].nodeName + "<br>";
                };
                var x = document.getElementById("demo");
                x.innerHTML = txt;
            }
        </script>
    </body>
    </html>

    结果:

    实例9:element.nodeType

    <!DOCTYPE html>
    <html>
    <body>
        <p id="demo">请点击按钮来获得 body 元素子节点的节点类型</p>
        <button onclick="myFunc()">试一下</button>
        <script>
            function myFunc() {
                var txt = "";
                var c = document.body.childNodes;
                for (i=0; i<c.length; i++) {
                    txt = txt + c[i].nodeType + "<br>";
                };
                var x = document.getElementById("demo");
                x.innerHTML = txt;
            }
        </script>
    </body>
    </html>

    结果:

    实例10:element.nodeValue

    <!DOCTYPE html>
    <html>
    <body>
        <p id="demo">请点击按钮来获得 button 元素的节点值</p>
        <button onclick="myFunc()">试一下</button>
        <script>
            function myFunc() {
                var c = document.getElementsByTagName("button")[0];
                var x = document.getElementById("demo");
                x.innerHTML = c.childNodes[0].nodeValue;
            }
        </script>
    </body>
    </html>

    结果:

    八. DOM事件

    1. 我们可以再事件发生时执行Javascript,比如当用户在 HTML 元素上点击时

    如需在用户点击某个元素时执行代码,请向一个HTML事件属性添加 Javascript 代码:

    onclick = action...
    
    一般等号后面是js的函数名,比如onclick = "myFunc()"

    2. DOM事件分类

    • 键盘事件

    • 鼠标事件

    • 框架/对象   (Frame/Object)事件

    • 表单事件

    • 拖动事件

    3. HTML 事件的例子:

    • 当用户点击鼠标时

    • 当网页已加载时

    • 当图像已加载时

    • 当鼠标移动到元素上时

    • 当输入字段被改变时

    • 当提交 HTML 表单时

    • 当用户触发按键时

    4. 常用事件

    • onclick:点击事件

    • onload:加载事件

    • onmousemove:鼠标被移动

    • onmousedown:鼠标按钮被按下

    • onmouseup:鼠标按钮被松开

    • onmouseout:鼠标从某元素移开

    • onmouseover:鼠标移到某元素上

    • onsubmit:确认按钮被点击

    参考文章

    http://www.w3school.com.cn/h.asp

    http://www.runoob.com/html/html-tutorial.html

  • 相关阅读:
    在京东云擎上搭建自己的网站
    在新浪SAE上搭建自己的网站!
    GitHub在windows上代码管理教程
    mongodb在windows下安装教程
    nodejs在windows平台下搭建部署环境教程
    Windows下搭建PHP开发环境,整合Apache+PHP+MySQL(举例软件为32位)
    IIS7发布 EF MVC项目提示404.0页面错误解决方案
    “VS无法连接远程数据库”解决方案
    easyui的 getSelections 与 getSelected 对比区别
    Linq中int转String(解决LINQ to Entities 不识别方法"System.String ToString()",因此该方法无法转换为存储表达式.)
  • 原文地址:https://www.cnblogs.com/my_captain/p/9156489.html
Copyright © 2011-2022 走看看