zoukankan      html  css  js  c++  java
  • dom入门

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

    //显示,改变html内容
    document.getElementById("p1").innerHTML="New text!";
    
    //显示,改变html属性
    document.getElementById("image").src="landscape.jpg";
    
    //显示,改变html CSS
    document.getElementById("p2").style.color="blue";
    
    //使用 HTML DOM 来分配事件
    document.getElementById("myBtn").onclick=function(){displayDate()};
    <!--
    增加HTML元素
    首先添加元素,然后添加文本节点,随后在之前的元素上追加文本节点,
    最后在已有的元素上追加之前创建的DOM元素
    -->
    
    <!DOCTYPE html>
    <html>
    <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元素
    先找出该元素的父元素,然后再找出该元素,
    在父元素的基础上删除
    -->
    
    <!DOCTYPE html>
    <html>
    <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);
    /*
    或这么写,不用找父元素
    var child=document.getElementById("p1");
    child.parentNode.removeChild(child);
    */
    </script>
    
    </body>
    </html>
  • 相关阅读:
    XML介绍
    JavaScript基础
    pygame模块参数汇总(python游戏编程)
    CSS3
    CSS( Cascading Style Sheets )简书
    HTML5
    用python进行应用程序自动化测试(uiautomation)
    HTML入门
    Selenium2 (python)
    C#快速入门
  • 原文地址:https://www.cnblogs.com/rhythm2014/p/3715996.html
Copyright © 2011-2022 走看看