HTML DOM 方法详解-优快云博客

本文链接：https://blog.youkuaiyun.com/xqing0101/article/details/51202079

本文介绍了 HTML DOM 中常用的方法，如 getElementById(), getElementsByTagName(), getElementsByClassName() 等，并通过实例展示了如何使用这些方法来获取、添加、修改 HTML 元素。

HTML DOM 方法是可以在HTML元素节点上执行的动作（获取、添加、修改元素）。

常用DOM 对象方法：

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttibute()	返回指定的属性值。
setAttibute()	把指定属性设置或修改为指定的值。

查找元素

getElementById() ：接受一个参数，获取元素的 ID，如果找到相应的元素则返回该元素的 element 对象，如果不存在，则返回 null 。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>JavaScript DOM 测试</title>
    <script type="text/javascript">
        window.onload = function(){
            //获取 id 为 sz 的那个节点,在编写 HTML 文档时, 需确保 id 属性值是唯一的，该方法为 document 对象的方法
            var szNode = document.getElementById("sz");
            alert(szNode);
            alert(szNode.tagName);  //获取元素节点的标签名
            alert(szNode.innerHTML);    //获取元素节点里的内容，非 W3C DOM 规范
            alert(szNode.id);   //元素节点的 id 名称
            alert(szNode.title);    //元素节点的 title 属性值
            alert(szNode.style);    // CSS 内联样式属性值
            alert(szNode.style.color);
            alert(szNode.className);    // CSS 元素的类
        }
    </script>
</head>
<body>
    <p>你喜欢哪个城市？</p>
    <ul id="city">
        <li id="sz" title="标题" class="szcity" style="color:red;">深圳</li>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
    </ul>
</body>
</html>

getElementsByTagName() ：返回一个对象数组HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>JavaScript DOM 测试</title>
    <script type="text/javascript">
        window.onload = function(){
            //获取所有的 li 节点，使用标签名获取指定节点的集合，该方法为 Node 接口的方法, 即任何一个节点都有这个方法。
            var liNodes = document.getElementsByTagName("li");
            alert(liNodes.length);  //获取所有 li 元素的数目
            alert(liNodes[0]);  //获取第一个 li 元素，HTMLLIElement
            alert(liNodes.item(0)); //获取第一个 li 元素，HTMLLIElement

            //根据 document.getElementById() 获取 city 节点， getElementsByTagName() 获取 li 节点集合
            var cityNode = document.getElementById("city");
            var cityLiNodes = cityNode.getElementsByTagName("li");
            alert(cityLiNodes.length);
        }
    </script>
</head>
<body>

    <p>你喜欢哪个城市？</p>
    <ul id="city">
        <li id="sz" title="标题" class="szcity" style="color:red;">深圳</li>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
    </ul>

</body>
</html>

getElementsByName()：根据 HTML 文档元素的 name 属性名来获取指定的节点的集合。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>JavaScript DOM 测试</title>
    <script type="text/javascript">
        window.onload = function(){
            //根据 HTML 文档元素的 name 属性名来获取指定的节点的集合. 
            var genderNodes = document.getElementsByName("gender");
            alert(genderNodes.length);  //获取集合长度
            alert(genderNodes[0].value);    //获取集合第一个元素的值
        }
    </script>
</head>
<body>
    <p>
        性别：
        <input type="radio" name="gender" value="male" checked="checked"></input>
        <input type="radio" name="gender" value="female"></input>
    </p>
</body>
</html>