• DOM 修改与DOM元素


    ㈠HTML DOM - 修改

    修改 HTML = 改变元素、属性、样式和事件。

     

    ①创建 HTML 内容

    改变元素内容的最简单的方法是使用 innerHTML 属性。

    下面的例子改变一个 <p> 元素的 HTML 内容:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    
    <p id="p1">Hello World!</p>
    
    <script>
    document.getElementById("p1").innerHTML="新文本!";
    </script>
    
    <p>段落通过脚本来修改内容。</p>
    
    </body>
    </html>

     

    效果图:

     

    ②改变 HTML 样式

    通过 HTML DOM,能够访问 HTML 元素的样式对象。

    下面的例子改变一个段落的 HTML 样式:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    
    <p id="p1">Hello world!</p>
    <p id="p2">Hello world!</p>
    
    <script>
    document.getElementById("p2").style.color="skyblue";
    document.getElementById("p2").style.fontFamily="Arial";
    document.getElementById("p2").style.fontSize="larger";
    </script>
    
    </body>
    </html>

     

    效果图

     

    ③创建新的 HTML 元素

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    
    <div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
    </div>
    <script>
    var para=document.createElement("p");
    var node=document.createTextNode("这是一个新段落。");
    para.appendChild(node);
    var element=document.getElementById("div1");
    element.appendChild(para);
    </script>
    
    </body>
    </html>

     

    效果图

     

    ㈡HTML DOM - 修改 HTML 内容

    通过 HTML DOM,JavaScript 能够访问 HTML 文档中的每个元素。

     

    ⑴改变 HTML 内容

    改变元素内容的最简单的方法是使用 innerHTML 属性。

    下面的例子更改 <p> 元素的 HTML 内容:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    
    <p id="p1">Hello World!</p>
    
    <script>
    document.getElementById("p1").innerHTML="新文本!";
    </script>
    
    <p>段落通过脚本来修改内容。</p>
    
    </body>
    </html>

     

    效果图

     

    ⑵使用事件

    HTML DOM 允许您在事件发生时执行代码。

    当 HTML 元素"有事情发生"时,浏览器就会生成事件:

    ▪ 在元素上点击

    ▪ 加载页面

    ▪ 改变输入字段

     

    ★下面两个例子在按钮被点击时改变 <body> 元素的背景色:

    示例1:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    
    <input type="button"
    onclick="document.body.style.backgroundColor='lavender';"
    value="修改背景颜色">
    
    </body>
    </html>

     

    效果图:

     

     示例2:在本例中,由函数执行相同的代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    
    <script>
    function ChangeBackground()
    {
        document.body.style.backgroundColor="lavender";
    }
    </script>
    
    <input type="button" onclick="ChangeBackground()" value="修改背景颜色" />
    
    </body>
    </html>

     

    效果图:

     

     ★示例:下面的例子在按钮被点击时改变 <p> 元素的文本:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    
    <p id="p1">Hello world!</p>
    
    <script>
    function ChangeText()
    {
        document.getElementById("p1").innerHTML="Hello Runoob!";
    }
    </script>
    
    <input type="button" onclick="ChangeText()" value="修改文本" />
    
    </body>
    </html>

     

    效果图

     由:     变:

     

     

    ㈢HTML DOM - 元素

    添加、删除和替换 HTML 元素。

     

    创建新的 HTML 元素 - createElement()

    如需向 HTML DOM 添加新元素,您首先必须创建该元素,然后把它追加到已有的元素上。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    
    <div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
    </div>
    <script>
    var para=document.createElement("p");
    var node=document.createTextNode("这是一个新段落。");
    para.appendChild(node);
    var element=document.getElementById("div1");
    element.appendChild(para);
    </script>
    
    </body>
    </html>

     

    效果图:

     

    上面的实例解析:

    ▪ 这段代码创建了一个新的 <p> 元素:

    var para=document.createElement("p");

    ▪ 如需向 <p> 元素添加文本,您首先必须创建文本节点。这段代码创建文本节点:

    var node=document.createTextNode("这是一个新段落。");

    ▪ 然后您必须向 <p> 元素追加文本节点:

    para.appendChild(node);

    ▪ 最后,您必须向已有元素追加这个新元素。

    这段代码查找到一个已有的元素:

    var element=document.getElementById("div1");

    ▪ 这段代码向这个已存在的元素追加新元素:

    element.appendChild(para);

     

    ⑵创建新的 HTML 元素 - insertBefore()

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    
    <div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另外一个段落。</p>
    </div>
    
    <script>
    var para=document.createElement("p");
    var node=document.createTextNode("这是一个新段落。");
    para.appendChild(node);
    
    var element=document.getElementById("div1");
    var child=document.getElementById("p1");
    element.insertBefore(para,child);
    </script>
    
    </body>
    </html>

     

    效果图:

     

    ⑶删除已有的 HTML 元素

    示例:如需删除 HTML 元素,必须清楚该元素的父元素:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    
    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另一个段落。</p>
    </div>
    <script>
    var parent=document.getElementById("div1");
    var child=document.getElementById("p1");
    parent.removeChild(child);
    </script>
    
    </body>
    </html>

     

    效果图

     

    上面实例解析

    ▪ 这个 HTML 文档包含一个带有两个子节点(两个 <p> 元素)的 <div> 元素:

    <div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
    </div>

    ▪ 查找 id="div1" 的元素:

    var parent=document.getElementById("div1");

    ▪ 查找 id="p1" 的 <p> 元素:

    var child=document.getElementById("p1");

    ▪ 从父元素中删除子元素:

    parent.removeChild(child);

    ▪ 这里提供一个常用的解决方法:找到您需要删除的子元素,然后使用 parentNode 属性来查找其父元素:

     var child=document.getElementById("p1"); child.parentNode.removeChild(child); 

     

    ⑷替换 HTML 元素

    示例:需替换 HTML DOM 中的元素,使用 replaceChild() 方法:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    
    <div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另外一个段落。</p>
    </div>
    
    <script>
    var parent=document.getElementById("div1");
    var child=document.getElementById("p1");
    var para=document.createElement("p");
    var node=document.createTextNode("这是一个新的段落。");
    para.appendChild(node);
    parent.replaceChild(para,child);
    </script>
    
    </body>
    </html>

    效果图:

    参考:https://www.runoob.com

  • 相关阅读:
    Windows Messenger 5.1 [Download from Microsoft]
    Building Web Parts for SPS读书笔记(2)
    Resources for KM & SharePoint Portal
    Microsoft.SharePoint.Menu Web Part [Free]
    忽略PNG透明区域的事件(AS/Flash)
    android webView 使用方法
    Android开发之Android开发规范(初)
    Android 下使用 JSON 实现 HTTP 请求
    html5 canvas 简单画板实现代码
    设定麦克风的声音品质
  • 原文地址:https://www.cnblogs.com/shihaiying/p/11426245.html
Copyright © 2020-2023  润新知