zoukankan      html  css  js  c++  java
  • HTML DOM学习之二

    1.HTML DOM属性:

    **innerHTML属性-获取元素内容的最简单方法是使用innerHTML属性,innerHTML属性对于获取或替换HTML元素的内容很有用

    <html>

    <body>

    <p id="intro">Hello world!</p>

    <script>

    var txt=document.getElementById("intro").innerHTML;

    document.write(txt);

    </script>

    </body>

    </html>

    2.nodeName属性规定节点的名称:

    **nodeName是只读的;

    **元素节点的nodeName与标签名相同;

    **属性节点的nodeName与属性名相同;

    **文本节点的nodeName始终是#text

    **文档节点的nodeName始终是#document

    3.nodeValue属性:

    **元素节点的nodeValue是undefine或null;

    **文本节点的nodeValue是文本本身;

    **属性节点的nodeValue是属性值;

    <html>

    <body>

    <p id="intro">Hello world!</p>

    <script type="text/javascript">

    x=document.getElementById("intro");

    document.write(x.firstChild.nodeValue);

    </script>

    </body>

    </html>

    4.访问HTML元素(节点):

    **通过使用getElementById()方法:返回带有指定ID的元素

    document.getElementById("intro");

    语法:node.getElementById("id");

    **通过使用getElementsByTagName()方法:返回带有指定标签名的所有元素

    document.getElementByTagName("p");

    document.getElementById("main").getElemetstByTagName("p");

    语法:node.getElementsByTagName("tagname");

    **通过使用getElementByClassName()方法:返回带有相同类名的所有HTML元素

    5.HTML DOM 修改:改变HTML内容,改变CSS样式,改变HTML属性,创建新的HTML元素,删除已有的HTML元素,改变事件(处理程序)

     

    **创建HTML内容:改变元素内容最简单的方法就是使用innerHTML属性

    <html>

    <body>

    <p id="p1">Hello World!</p>

    <script>

    document.getElementById("p1").innerHTML="New text!";

    </script>

    </body>

    </html>

    **改变HTML样式:通过HTML DOM,能够访问HTML元素的样式对象;

    <html>

    <body>

    <p id="p2">Hello World!</p>

    <script>

    document.getElementById("p2").style.color="blue";

    </script>

    </body>

    </html>

    **创建新的HTML元素:必须首先创建该元素(元素节点),然后把它追加到已有元素上

    <div id="d1">

    <p id="p1">This is a paragraph.</p>

    <p id="p2">This is another paragraph</p>

    </div>

    <script>

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

    var node=document.creatTextNode("This is new.");

    para.appendChild(node);

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

    element.appendChild(para);

    </script>

    6.修改HTML内容:改变元素内容的最简单的方法就是使用innerHTML属性;

    <html>

    <body>

    <p id="p1">Hello World!</p>

    <script>

    document.getElementById("p1").innerHTML="New text!";

    </script>

    </body>

    </html>

    7.改变HTML样式:通过HTML DOM,能够访问HTML对象的样式对象;

    <html>

    <body>

    <p id="p2">Hello World!</p>

    <script>

    document.getElementById("p2").style.color="blue";

    </script>

    </body>

    </html>

    8.使用事件:HTML DOM允许您在事件发生时执行代码;当HTML元素“有事件发生”时,浏览器就会生成事件:

    **在元素上点击

    **加载页面

    **改变输入字段

    <html>

    <body>

    <input type="button" onclick="document.body.style.backgroundColor='lavender';" value="Change background color"/>

    </body>

    </html>

    <html>

    <body>

    <script>

    function ChangeBackground(){

    document.body.style.backgroundColor="lavender";

    }

    </script>

    <input type="button" onclick="ChangeBackground()" value="Change background color"/>

    </body>

    </html>

  • 相关阅读:
    每日总结2021.9.14
    jar包下载mvn
    每日总结EL表达语言 JSTL标签
    每日学习总结之数据中台概述
    Server Tomcat v9.0 Server at localhost failed to start
    Server Tomcat v9.0 Server at localhost failed to start(2)
    链表 java
    MVC 中用JS跳转窗体Window.Location.href
    Oracle 关键字
    MVC 配置路由 反复走控制其中的action (int?)
  • 原文地址:https://www.cnblogs.com/hqutcy/p/5999230.html
Copyright © 2011-2022 走看看