zoukankan      html  css  js  c++  java
  • 感觉又学到了不少,在这里写下来,但也有一个问题,不知道是为甚吗?

    今天具体学习了如何去访问和修改HTML元素的内容与样式,也就是DOM中的节点

    在这里有三种方法:

    • 通过使用 getElementById() 方法
    • 通过使用 getElementsByTagName() 方法
    • 通过使用 getElementsByClassName() 方法

     •  getElementById()方法:返回带有指定Id的元素

    示例如下:

    <!DOCTYPE html>
    <html>
    <body>

    <p id="intro">Hello World!</p>
    <p>本例演示 <b>getElementById</b> 方法!</p>

    <script>
    x=document.getElementById("intro");
    document.write("<p>来自 intro 段落的文本:" + x.innerHTML + "</p>");
    </script>

    </body>
    </html>

     •  getElementsByTagName() 方法:返回带有指定标签名的所有元素。

    示例如下:

    <!DOCTYPE html>
    <html>
    <body>

    <p>Hello World!</p>
    <p>DOM 很有用!</p>
    <p>本例演示 <b>getElementsByTagName</b> 方法。</p>

    <script>
    x=document.getElementsByTagName("p");
    document.write("第一段的文本: " + x[0].innerHTML);
    </script>

    </body>
    </html>

     •  getElementsByClassName() 方法:如果您希望查找带有相同类名的所有 HTML 元素,请使用这个方法:

    示例如下:

    <!DOCTYPE html>
    <html>
    <body>
    <p class="p">Hello World!</p>
    <p class="p">DOM 很有用!</p>
    <p>这个标签中的内容将不会出现</p>
    <script>
    x=document.getElementsByClassName("p");
    alert(x.innerHTML);
    </script>
    </body>
    </html>

    我运行出来没有错误,但就是不显示我想要的内容,为什么?

    注释:getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。



    我感觉这些方法很方便,比如我们想要改变或替换一篇文章中所有标签的内容或者样式,就可以使用它们了.

       •  简单的替换例子:

    <!DOCTYPE html>
    <html>
    <body>
    <p id="d1"><strong>勒布朗詹姆斯</strong></p>
    <p><strong>凯文杜兰特</strong></p>
    <script>
    function change(){
    document.getElementById("d1").innerHTML="科比布莱恩特";
    }
    </script>
    <input type="button" value="替换" onclick="change()" />
    <p>点击这个按钮,我们将勒布朗詹姆斯替换为科比布莱恩特</p>
    </body>
    </html>

    水到渠成,相信积累的力量!
  • 相关阅读:
    VS2008编写MFC程序--使用opencv2.4()
    November 02nd, 2017 Week 44th Thursday
    November 01st, 2017 Week 44th Wednesday
    October 31st, 2017 Week 44th Tuesday
    October 30th, 2017 Week 44th Monday
    October 29th, 2017 Week 44th Sunday
    October 28th, 2017 Week 43rd Saturday
    October 27th, 2017 Week 43rd Friday
    October 26th, 2017 Week 43rd Thursday
    October 25th, 2017 Week 43rd Wednesday
  • 原文地址:https://www.cnblogs.com/popstar8866/p/4008329.html
Copyright © 2011-2022 走看看