美文网首页我爱编程
JavaScript HTML DOM(9/2)

JavaScript HTML DOM(9/2)

作者: BaibaiWang | 来源:发表于2017-09-03 10:45 被阅读0次
    HTML DOM (文档对象模型)

    当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)
    即,将HTML内的节点定义成基本统一的对象数据可以供程序语言(如javaScript)控制


    HTML DOM 模型被构造为树形对象
    • JavaScript 能够改变页面中的所有 HTML 元素
    • JavaScript 能够改变页面中的所有 HTML 属性
    • JavaScript 能够改变页面中的所有 CSS 样式
    • JavaScript 能够对页面中的所有事件做出反应
    查找 HTML 元素
    1. 通过 id 查找 HTML 元素
    <p id="intro">你好世界!</p>
    <p>该实例展示了 <b>getElementById</b> 方法!</p>
    <script>
    x=document.getElementById("intro");
    document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
    </script>
    
    1. 通过标签名查找 HTML 元素
    <p>你好世界!</p>
    <div id="main">
    <p> DOM 是非常有用的。</p>
    <p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
    </div>
    <script>
    var x=document.getElementById("main");
    var y=x.getElementsByTagName("p");
    document.write('id="main"元素中的第一个段落为:' + y[0].innerHTML);
    </script>
    
    1. 通过类名找到 HTML 元素
    <p class="intro">你好世界!</p>
    <p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
    <script>
    x=document.getElementsByClassName("intro");
    document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
    </script>
    
    改变 HTML 输出流

    在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容
    document.write(Date());

    改变 HTML 内容

    修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

    document.getElementById(id).innerHTML=新的 HTML

    下例改变了 <p>元素的内容:

    <p id="p1">Hello World!</p>
    <script>
    document.getElementById("p1").innerHTML="新文本!";
    </script>
    <p>以上段落通过脚本修改文本。</p>
    
    
    改变 HTML 属性

    document.getElementById(id).attribute=新属性值

    JavaScript HTML DOM 事件

    对事件做出反应
    我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。
    如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加

    onclick=JavaScript

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    
    <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
    
    </body>
    </html>
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <head>
    <script>
    function changetext(id){
        id.innerHTML="Ooops!";
    }
    </script>
    </head>
    <body>
    
    <h1 onclick="changetext(this)">点击文本!</h1>
    
    </body>
    </html>
    
    HTML 事件属性

    如需向 HTML 元素分配 事件,可以使用事件属性,
    下例像button元素分配onclick事件:

    <button onclick="displayDate()">点这里</button>
    
    使用 HTML DOM 来分配事件
    <p>点击按钮执行 <em>displayDate()</em> 函数.</p>
    <button id="myBtn">点这里</button>
    <script>
    document.getElementById("myBtn").onclick=function(){displayDate()};
    function displayDate(){
        document.getElementById("demo").innerHTML=Date();
    }
    </script>
    <p id="demo"></p>
    
    onload 和 onunload 事件

    onload 和 onunload 事件会在用户进入或离开页面时被触发。
    onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
    onload 和 onunload 事件可用于处理 cookie

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body onload="checkCookies()">
    
    <script>
    function checkCookies(){
        if (navigator.cookieEnabled==true){
            alert("Cookies 可用")
        }
        else{
            alert("Cookies 不可用")
        }
    }
    </script>
    <p>弹窗-提示浏览器 cookie 是否可用。</p>
        
    </body>
    </html>
    

    navigator.cookieEnabled returns a Boolean value that indicates whether cookies are enabled or not. The property is read-only.

    onchange 事件

    onchange 事件常结合对输入字段的验证来使用。
    下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <head>
    <script>
    function myFunction(){
        var x=document.getElementById("fname");
        x.value=x.value.toUpperCase();
    }
    </script>
    </head>
    <body>
    
    输入你的名字: <input type="text" id="fname" onchange="myFunction()">
    <p>当你离开输入框后,函数将被触发,将小写字母转为大写字母。</p>
    
    </body>
    </html>
    
    onfocus事件
    <head>
    <script>
    function myFunction(x){
        x.style.background="yellow";
    }
    </script>
    </head>
    <body>
    
    输入你的名字: <input type="text" onfocus="myFunction(this)">
    <p>当输入框获取焦点时,修改背景色(background-color属性) 将被触发。</p>
    
    </body>
    
    onmouseover 和 onmouseout 事件

    onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    
    <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
    <script>
    function mOver(obj){
        obj.innerHTML="Thank You"
    }
    function mOut(obj){
        obj.innerHTML="Mouse Over Me"
    }
    </script>
    
    </body>
    </html>
    
    onmousedown、onmouseup 以及 onclick 事件

    onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分
    当点击鼠标按钮时,会触发 onmousedown 事件
    当释放鼠标按钮时,会触发 onmouseup 事件
    当完成鼠标点击时,会触发 onclick 事件

    onmousedown、onmouseup 例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <head>
    <script>
    function lighton(){
        document.getElementById('myimage').src="bulbon.gif";
    }
    function lightoff(){
        document.getElementById('myimage').src="bulboff.gif";
    }
    </script>
    </head>
    
    <body>
    ![](bulboff.gif)
    <p>点击不释放鼠标灯将一直亮着!</p>
    </body>
    </html>
    

    相关文章

      网友评论

        本文标题:JavaScript HTML DOM(9/2)

        本文链接:https://www.haomeiwen.com/subject/fmydjxtx.html