橘子味的心

    • 二十五岁时我们都一样愚蠢、多愁善感，喜欢故弄玄虚，可如果不那样的话，五十岁时也就不会如此明智。

    标题：JavaScript htmldom 元素

    本页教你如何查找和访问网页中的HTML元素.

    找到HTML元素

    通常，使用JavaScript，你想操作HTML元素.

    要做到这一点，你必须先找到元素。有几种方法可以做到这一点:

    • 通过id找到HTML元素
    • 通过标签名称找到HTML元素
    • 通过类名称找到HTML元素
    • 通过CSS选择器找到HTML元素
    • 通过HTML对象集合找到HTML元素

    通过id找到HTML元素

    找到DOM中的HTML元素的最简单的方法，是利用元素的id.

    这个例子使用id="intro"找到元素 :

    var myElement = document.getElementById("intro");

    让我试试

    如果找到元素，则该方法将返回元素作为对象 (赋值给myElement).

    如果元素没有被发现，myElement将是空的.

    通过标签名称找到HTML元素

    这个实例找到所有<p>元素:

    var x = document.getElementsByTagName("p");

    让我试试

    这个例子使用id="main"找到元素 , 并且在"main"里面找到所有的 <p> 元素:

    var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

    让我试试

    通过类名称找到HTML元素

    如果你想找到同一类名称的所有HTML元素，使用getElementsByClassName(). 此示例返回所有class="intro"的元素列表.

    var x = document.getElementsByClassName("intro");

    让我试试

    在Internet Explorer 8和早期版本中，按类名查找元素不起作用。

    通过CSS选择器找到HTML元素

    如果你想找到所有的HTML元素，匹配指定的CSS选择器 (id, 类名, 类型, 属性, 属性值, 等等), 使用querySelectorAll() 方法.

    此示例返回所有class="intro"的<p>元素列表.

    var x = document.querySelectorAll("p.intro");

    让我试试

    querySelectorAll() 方法在Internet Explorer 8和早期版本中不起作用。

    通过HTML对象集合找到HTML元素

    此示例查找id="frm1"的表单元素,在表单集合里,并显示所有的颜色值:

    var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

    让我试试

    下面的HTML对象（或对象的集合）也可访问:

    目录

    分类

      © 2020-2024 橘子味的心

    • 黔ICP备17008247号-2
    • 贵公网安备52022102000140