java web之js学习二_java中的dom对象-优快云博客

本文介绍了DOM（文档对象模型）的基本概念，包括元素、属性和文本等节点类型，并详细讲解了如何利用DOM API进行网页元素的获取、创建、添加及删除等常见操作。

DOM的概述

什么是DOM？
DOM：Document Object Model，即文档对象模型。要认识JavaScript中的DOM，不可避免就要理解DOM树的概念，将一个HTML的文档加载到内存形成一个树形结构，从而操作树形结构就可以改变HTML文档的样子。用图可简略表示为：
- html页面中写的标签可叫做element
- html标签中写的属性可叫做attribute
- html标签中的文本可叫做text
以上所有的这些都可以称之为Node(节点)，只不过这些节点有不同的类型，具体可分为：
- 元素节点
- 属性节点
- 文本节点

DOM常用的操作

获得元素
document.getElementById();：通过ID获得单个的元素
document.getElementsByName();：通过name属性获得元素集合(NodeList)
document.getElementsByTagName();：通过标签名获得元素集合(NodeList)
创建元素
document.createElement();：创建元素
document.createTextNode();：创建文本
添加节点(元素)
element.appendChild();：在最后添加一个节点
element.insertBefore();：在某个元素之前插入
删除节点
element.removeChild();：删除元素，但不能直接删自己，必须先得到父节点然后再来删自己

使用DOM完成对ul中添加一个li元素的操作

直接给出代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function addElement() {
                var city = document.getElementById("city");
                // 创建一个元素
                var liEl = document.createElement("li");
                // 创建一个文本节点
                var text = document.createTextNode("深圳");
                // 添加子节点
                liEl.appendChild(text);
                city.appendChild(liEl);
            }
        </script>
    </head>
    <body>
        <input type="button" value="添加元素" onclick="addElement()" />
        <ul id="city">
            <li>北京</li>
            <li>上海</li>
        </ul>
    </body>
</html>