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>

  • 相关阅读:
    uni-app实现下拉效果
    求点到已知直线的距离和点到直线的垂点坐标
    Mybatis 自定义SqlSessionFactoryBean扫描通配符typeAliasesPackage
    前端string类型的日期 -后端实体类属性为Date
    如何更新npm为最新版本
    简述ThreadPoolExecutor的运行机制
    list在遍历过程中的add/remove
    Linux下安装mysql
    Linux下安装activeMQ并设置开机启动
    solr集群环境搭建
  • 原文地址:https://www.cnblogs.com/hqutcy/p/5999230.html
Copyright © 2011-2022 走看看