三十：javaScript之DOM对象

作者: rtrhhthth | 来源:发表于2018-06-27 21:21 被阅读0次

1.DOM对象简介

DOM，全称“Document Object Model（文档对象模型）”，它是由W3C组织定义的一个标准。
在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素、删除元素的操作就是通过DOM来实现的。

2.DOM结构
DOM采用树形结构作为分层结构，以树节点形式表示页面中各种元素或内容。
举例：

<html>
<head>
    <title><title>
<body>
    <h1>我要自学网</h1>
    <p>我要自学网成立于……</p>
</body>
</html.>

上面这个HTML文档使用DOM树形结构解析为：

22.png

在DOM中，每一个元素看成一个节点，而每一个节点就是一个“对象”。也就是我们在操作元素时，把每一个元素节点看成一个对象，然后使用这个对象的属性和方法进行相关操作。

下面我们介绍几个关于节点的概念。
1、根节点
在HTML文档中，html就是根节点。

2、父节点
一个节点之上的节点就是该节点的父节点，例如h1的父节点就是body，body的父节点就是html。

3、子节点
一个节点之下的节点就是该节点的子节点，例如h1就是body的子节点。

4、兄弟节点
如果多个节点在同一层次，并拥有相同的父节点，那么这几个节点就是兄弟节点。
例如h1和p就是兄弟节点，因为他们拥有相同的父节点body

DOM对象节点属性;

parentNode 获取当前节点的父节点
childNodes 获取当前节点的子节点集合
firstChild 获取当前节点的第一个子节点
lastChild 获取当前节点的最后一个子节点
previousSibling 获取当前节点的前一个兄弟节点
nextSibling 获取当前节点的后一个兄弟节点
attributes 元素的属性列表

其实除了上表列举的属性之外，还有nodeName、nodeValue和nodeType等几个比较重要的属性。

DOM节点操作简介:
在DOM学习中，对于节点的操作是核心内容，也是整个JavaScript入门教程中最核心技术之一。大家一定要花心思去认真掌握。在一般的前端工作面试中，这些操作是最基本的

关于DOM节点常用操作如下：
（1）创建节点；
（2）插入节点；
（3）删除节点；
（4）复制节点；
（5）替换节点；

获取DOM中指定元素:
在[CSS入门教程]的学习中，我们知道：如果想要对某个元素进行样式操作，就必须先通过一种方式来选中该元素（也就是[CSS选择器]，然后才能进行相关样式的操作。在JavaScript中，如果想要对节点进行创建、删除等操作，同样也要通过一种方式来选中该节点。只有你获取了该元素节点，才能进行各种操作，很容易理解吧。
在JavaScript中，可以通过以下2种方式来选中指定元素：
（1）getElementById()；
（2）getElementsByName()
一、getElementById()
在JavaScript中，如果想通过id来选中元素，我们可以使用document对象的getElementById()方法。
getElementById()方法类似于CSS中的id选择器。
语法：
document.getElementById("元素id");
举例：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="lvye">绿叶学习网JavaScript入门教程</div>
    <script type="text/javascript">
        var e = document.getElementById("lvye");
        e.style.color = "red";
    </script>
</body>
</html>

在浏览器预览效果如下：

13-4-1.png

分析：
这里使用document.getElementById()的方法获取id为lvye的div元素，然后把这个DOM对象赋值给变量e，然后使用DOM对象的style对象来设置div元素颜色为红色。我们在“JavaScript操作CSS样式”这一节会详细给大家介绍这种方法。

二、getElementsByName()
在JavaScript中，如果想通过name来选中元素，我们可以使用document对象的getElementsByName()方法。
语法：
document.getElementsByName("表单元素name值");

说明：
getElementsByName()方法都是用于获取表单元素。
与getElementById()方法不同的是，使用该方法的返回值是一个数组，而不是一个元素。因此，我们想要获取具体的某一个表单元素，就必须通过数组下标来获取。
举例：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <input name="web" id="radio1" type="radio" value="HTML"/>
    <input name="web" id="radio2" type="radio" value="CSS"/>
    <input name="web" id="radio3" type="radio" value="JavaScript"/>
    <input name="web" id="radio4" type="radio" value="jQuery"/>
    <script type="text/javascript">
        alert(document.getElementsByName("web")[0].value);
    </script>
</body>
</html>

在浏览器预览效果如下：

13-4-2.png

其实可以这样说， getElementById()和getElementsByName()这两种方法是“JavaScript选择器”。

创建节点:
在JavaScript中，创建新节点都是先用document对象中的createElement()和createTextNode()这2种方法创建一个元素节点，然后再通过appendChild()、insertBefore()等方法把新元素节点插入现有的元素节点中去。

语法：
var e = document.createElement("元素名"); //创建元素节点
var t = document.createTextNode("元素内容"); //创建文本节点
e.appendChild(t); //把元素内容插入元素中去

举例1：创建简单节点

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        var e = document.createElement("h1");
        var txt = document.createTextNode("绿叶学习网");
        e.appendChild(txt);    //把元素内容插入元素中去
        document.body.appendChild(e);
    </script>
</body>
</html>

在浏览器预览效果如下：

13-5-1.png

举例2：创建复杂节点

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        var e = document.createElement("input");
        e.id = "submit";
        e.type = "button";
        e.value = "提交";
        document.body.appendChild(e);
    </script>
</body>
</html>

在浏览器预览效果如下：

13-5-2.png

插入节点:

在JavaScript中，插入节点有2种方法：
（1）appendChild();
（2）insertBefore();

1、appendChild()
在JavaScript中，我们可以使用appenChild()方法把新的节点插入到当前节点的“内部”。
语法：
obj.appendChild(new)

说明：
obj表示当前节点，new表示新节点。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        function insert() {
            var e = document.createElement("li");
            var str = document.getElementById("txt").value; //获取文本框的值
            var txt = document.createTextNode(str);
            e.appendChild(txt);
            var list = document.getElementById("list");
            list.appendChild(e);
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>     
    列项文本：<input id="txt" type="text"/><br />
    <input type="button" value="插入新项" onclick="insert()" />
</body>
</html>

在浏览器预览效果如下：

13-6-1.png

分析：
我们在文本框中输入列表项文本“jQuery”，然后点击“插入新项”按钮，浏览器预览效果如下：

13-6-2.png

2.nsertBefore()
在JavaScript中，我们可以使用insertBefore()方法将新的子节点添加到当前节点的“末尾”。
语法：
obj.insertBefore(new,ref)
说明：
obj表示父节点；
new表示新的子节点；
ref指定一个节点，在这个节点前插入新的节点。
举例：

<!DOCTYPE html>
<html >
<head>
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        function insert() {
            var e = document.createElement("li");
            var str = document.getElementById("txt").value; //获取文本框的值
            var txt = document.createTextNode(str);
            e.appendChild(txt);
            var list = document.getElementById("list");
            list.insertBefore(e,list.firstChild);
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ul>     
    列项文本：<input id="txt" type="text"/><br />
    <input type="button" value="插入新项" onclick="insert()"/>
</body>
</html>

在浏览器预览效果如下：

13-6-3.png

分析：
我们在文本框中输入列表项文本“jQuery”，然后点击“插入新项”按钮，浏览器预览效果如下：

13-6-2.png

删除节点

语法：
obj.removeChild(oldChild);
举例1：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        //定义删除函数
        function del() {
            var e = document.getElementById("list");
            //判断元素节点e是否有子节点
            if (e.hasChildNodes) {
                e.removeChild(e.lastChild);    //删除e元素的最后一个子节点
            }
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>ASP.NET</li>
    </ul>
    <input type="button" value="删除" onclick="del()"/></div>
</body>
</html>

在浏览器预览效果如下：

13-7-1.png

复制节点
语法：
obj.cloneNode(bool)
说明：
参数obj表示被复制的节点，而参数bool是一个布尔值，取值如下：
（1）1或true：表示复制节点本身以及复制该节点下的所有子节点；
（2）0或false：表示仅仅复制节点本身，不复制该节点下的子节点；
举例：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        function add() {
            var e = document.getElementById("list");
            document.body.appendChild(e.cloneNode(1));
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>ASP.NET</li>
    </ul>
    <input type="button" value="添加" onclick="add()" />
</body>
</html>

在浏览器预览效果如下：

13-8-1.png

替换节点
语法：
obj.replaceChild(new,old)

说明：
obj，表示被替换节点的父节点；
new，表示替换后的新节点；
old，需要被替换的旧节点。
举例：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        function replace() {
            //获取两个文本框的值
            var tag = document.getElementById("tag").value;
            var txt = document.getElementById("txt").value;
            //获取p元素
            var lvye = document.getElementById("lvye");
            //根据两个文本框的值创建新节点
            var e = document.createElement(tag);
            var t = document.createTextNode(txt);
            e.appendChild(t);
            document.body.replaceChild(e,lvye);
        }
    </script>
</head>
<body>
    <p id="lvye">绿叶学习网</p>
    <hr />
    输入标签：<input id="tag" type="text"/><br />
    输入文本：<input id="txt" type="text"/><br />
    <input type="button" value="替换" onclick="replace()" />
</body>
</html>

在浏览器预览效果如下：

13-9-1.png

三十：javaScript之DOM对象

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程