zoukankan      html  css  js  c++  java
  • JavaScript Dom

    HTML DOM (文档对象模型)

    当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
    HTML DOM 模型被构造为对象的树。

    通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

    • JavaScript 能够改变页面中的所有 HTML 元素
    • JavaScript 能够改变页面中的所有 HTML 属性
    • JavaScript 能够改变页面中的所有 CSS 样式
    • JavaScript 能够对页面中的所有事件做出反应

    查找 HTML 元素

    • 通过 id 找到 HTML 元素
                在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。
                var x=document.getElementById("intro");
    
    • 通过标签名找到 HTML 元素
                 本例查找 id="main" 的元素,然后查找 "main" 中的所有''<p>''元素:
                 var x=document.getElementById("main");
                 var y=x.getElementsByTagName("p");
    
    • 通过类名找到 HTML 元素
                本例查找 class="cars" 的元素
                var z=document.getElementsByClassName("cars")
    

    改变HTML元素

    • 如需改变 HTML 元素的内容,请使用这个语法:

    document.getElementById(id).innerHTML=new HTML

    <!DOCTYPE html>
    <html>
    <body>
    
    <h1 id="header">Old Header</h1>
    
    <script>
    var element=document.getElementById("header");
    element.innerHTML="New Header";
    </script>
    
    </body>
    </html>
    
    • 本例改变了 元素的 src 属性:
    <!DOCTYPE html>
    <html>
    <body>
    
    <img id="image" src="smiley.gif">
    
    <script>
    document.getElementById("image").src="landscape.jpg";
    </script>
    
    </body>
    </html>
    

    HTML DOM Event 对象

        Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
    

    事件通常与函数结合使用,函数不会在事件发生前被执行!

  • 相关阅读:
    Codeforces 512E
    UOJ #36 -【清华集训2014】玛里苟斯(线性基+暴搜)
    Codeforces 1188E
    洛谷 P7163
    C++ Boost库 操作日期与时间
    C/C++ 搜索缝隙并插入ShellCode
    线性代数学习之正交性,标准正交矩阵和投影
    洛谷 P5851 [USACO19DEC]Greedy Pie Eaters P(区间dp)
    洛谷 [NOIP2009 普及组] 道路游戏(dp)
    洛谷 P2890 [USACO07OPEN]Cheapest Palindrome G(区间dp)
  • 原文地址:https://www.cnblogs.com/plusUltra/p/10523134.html
Copyright © 2011-2022 走看看