zoukankan      html  css  js  c++  java
  • js 操作html dom

    author:冯永贤(Tony Feng,鸡鸣星),文章整合:internet

    《HTML DOM》

    一:js能够改变HTML DOM 里面的什么内容

    • JavaScript 能够改变页面中的所有 HTML 元素
    • JavaScript 能够改变页面中的所有 HTML 属性
    • JavaScript 能够改变页面中的所有 CSS 样式
    • JavaScript 能够对页面中的所有事件做出反

    二:但js要对html的内容进行修改时,必须得找到该内容的标识,

    那么这个标识是什么呢?

    • 通过 id 找到 HTML 元素
    • 通过标签名找到 HTML 元素
    • 通过类名找到 HTML 元素

    <1>通过 id 查找 HTML 元素

    如:x=document.getElementById("id name");

    调试链接:http://www.runoob.com/try/try.php?filename=try_dom_getelementbyid

    <2>通过标签名查找 HTML 元素

    如下代码:

    <body>

    <p>你好世界!</p>
    <div id="main">
    <p> DOM 是非常有用的。</p>
    <p>该实例展示了 <b>getElementsByTagName</b> 方法</p>
    </div>
    <script>
    var x=document.getElementById("main");(将id=“main”的标识值付给x)
    var y=x.getElementsByTagName("p");(在x下面的p标签里
    document.write('id="main"元素中的第一个段落为:' + y[0].innerHTML);
    </script>

    </body>

    <3>通过类名找到 HTML 元素

    与通过id找html元素一样,把ById改为ByClassName即可

    如:var x=document.getElementById("intro");

    三:那么怎么操作呢?

    • 如何改变 HTML 元素的内容 (innerHTML)
    • 如何对 HTML DOM 事件对做出反应
    • 如何添加或删除 HTML 元素

    1.改变 HTML 输出流(document.write() 可用于直接向 HTML 输出流写内容。

    例子调试链接:http://www.runoob.com/try/try.php?filename=trydhtml_date

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

    例子调试链接:http://www.runoob.com/try/try.php?filename=tryjs_change_innerhtml

    3.改变 HTML 属性(

    如需改变 HTML 元素的属性,请使用这个语法:

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

    例子调试链接:http://www.runoob.com/try/try.php?filename=trydhtml_dom_image

    注:

    • 上面的 HTML 文档含有 id="image" 的 <img> 元素
    • 我们使用 HTML DOM 来获得 id="image" 的元素
    • JavaScript 更改此元素的属性(把 "smiley.gif" 改为 "landscape.jpg")
  • 相关阅读:
    如何动态调用WebServices
    Cache及(HttpRuntime.Cache与HttpContext.Current.Cache)
    SQL创建索引(转)
    TSQL用法四:OpenDataSource, OpenRowSet
    AppDomain动态加载程序集
    hdu 2544 最短路
    hdu 1151 Air Raid
    hdu3790 最短路径问题
    hdu 1548 A strange lift
    对于 前K短路径问题 和 A*算法 的一些小小总结
  • 原文地址:https://www.cnblogs.com/fengyongxian/p/6417391.html
Copyright © 2011-2022 走看看