DOM 对象

简单了解下DOM

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
</head>
<body>
  <h2 id="con">I love JavaScript</H2>
  <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
  <script type="text/javascript">
   let con = document.getElementById('con');
    con.style.color = 'red';
    con.style.backgroundColor = '#CCC';
    con.style.display = 'none';
  </script>
</body>
</html>

getElementsByName()方法

返回带有指定名称的节点对象的集合。

语法

document.getElementsByName(name)

与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。

注意:

因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

<!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript">
        function getnum() {
            var mynode = document.getElementsByName('myt');
            alert(mynode.length);
        }
    </script>
</head>
<body>
    <input name="myt" type="text" value="1">
    <input name="myt" type="text" value="2">
    <input name="myt" type="text" value="3">
    <br />
    <input type="button" onclick="getnum()" value="看看有几项？" />
</body>
</html>

getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

语法:

document.getElementsByTagName(Tagname)

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>JavaScript</title>
</head>
<body>
    <form name="Input">
        <table align="center" width="500px" height="50%" border="1">
            <tr>
                <td align="center" width="100px">
                    学号:
                </td>
                <td align="center" width="300px">
                    <input type="text" id=userid name="user" onblur="validate();">
                    <div id=usermsg></div>
                </td>
            </tr>
            <tr>
                <td align="center" width="100px">
                    姓名:
                </td>
                <td align="center">
                    <input type="text" name="name">
                </td>
            </tr>
            <tr>
                <td align="center" width="%45">
                    性别:
                </td>
                <td align="center">
                    <input type="radio" name="sex" value="男">
                    男
                    <input type="radio" name="sex" value="女">
                    女
                </td>
            </tr>
            <tr>
                <td align="center" width="30%">
                    年龄:
                </td>
                <td align="center" width="300px">
                    <input type="text" name="age">
                </td>
            </tr>
            <tr>
                <td align="center" width="100px">
                    地址:
                </td>
                <td align="center" width="300px">
                    <input type="text" name="addr">
                </td>
            </tr>
        </table>
    </form>
    <h1 id="myHead" onclick="getValue()">
        看看三种获取节点的方法?
    </h1>
    <p>
        点击标题弹出它的值。
    </p>
    <input type="button" onclick="getElements()" value="看看name为sex的节点有几个?" />
    <Br>
    <input type="button" onclick="getTagElements()" value="看看标签名为input的节点有几个?" />
    <script type="text/javascript">
        function getValue() {
            let myH = document.getElementById('myHead');
            alert(myH.innerHTML)
        }
        function getElements() {
            let myS = document.getElementsByName('sex');
            alert(myS.length);
        }
        function getTagElements() {
            let myI = document.getElementsByTagName('input');
            alert(myI.length);
        }
    </script>
</body>
</html>

练习实例, 体会不同DOM对象获取方式的不同效果

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>全选/全不选</title>
</head>
<body>
    <form>
        请选择你爱好:<br>
        <input type="checkbox" name="hobby" id="hobby1"> 音乐
        <input type="checkbox" name="hobby" id="hobby2"> 登山
        <input type="checkbox" name="hobby" id="hobby3"> 游泳
        <input type="checkbox" name="hobby" id="hobby4"> 阅读
        <input type="checkbox" name="hobby" id="hobby5"> 打球
        <input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
        <input type="button" value="全选" onclick="checkall();">
        <input type="button" value="全不选" onclick="clearall();">
        <p>请输入您要选择爱好的序号，序号为1-6:</p>
        <input id="wb" name="wb" type="text">
        <input name="ok" type="button" value="确定" onclick="checkone();">
    </form>
    <script type="text/javascript">
        function checkall() {
            var hobby = document.getElementsByTagName("input");
            for(i=0;i<hobby.length;i++){
                if(hobby[i].getAttribute('name') == 'hobby'){ // 获取属性
                    hobby[i].setAttribute('checked','checked'); // 添加属性
                }
            }
        }
        function clearall() {
            var hobby = document.getElementsByName("hobby");
            for(i=0;i<hobby.length;i++){
                if(hobby[i].getAttribute('name') == 'hobby'){
                    hobby[i].removeAttribute('checked'); // 移除属性
                }
            }
        }
        function checkone() {
            var j = document.getElementById("wb").value; // 获取要选中的元素
            var hobby = document.getElementsByTagName('input'); // 获取所有元素
            var jid = "hobby"+j; // 拼接元素ID
            for(i=0;i<hobby.length;i++){ // 遍历所有元素
                if(hobby[i].getAttribute('id') == jid){ // 查询指定元素
                    hobby[i].setAttribute('checked','checked'); // 添加属性
                }
            }
        }
    </script>
</body>
</html>

getAttribute()方法

通过元素节点的属性名称获取属性的值。

语法：

elementNode.getAttribute(name)

说明:

elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
name：要想查询的元素节点的属性名字

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>getAttribute()</title>
</head>
<body>
    <p id="intro">课程列表</p>
    <ul>
        <li title="第1个li">HTML</li>
        <li>CSS</li>
        <li title="第3个li">JavaScript</li>
        <li title="第4个li">Jquery</li>
        <li>Html5</li>
    </ul>
    <p>以下为获取的不为空的li标签title值:</p>
    <script type="text/javascript">
        var con = document.getElementsByTagName("li");
        for (var i = 0; i < con.length; i++) {
            var text = con[i].getAttribute('title');
            if (text != null) {
                document.write(text + "<br>");
            }
        } 
    </script>
</body>
</html>

setAttribute()方法

setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

语法：

elementNode.setAttribute(name,value)

说明：

1.name: 要设置的属性名。

2.value: 要设置的属性值。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
</head>
<body>
    <p id="intro">我的课程</p>
    <ul>
        <li title="JS">JavaScript</li>
        <li title="JQ">JQuery</li>
        <li title="">HTML/CSS</li>
        <li title="JAVA">JAVA</li>
        <li title="">PHP</li>
    </ul>
    <h1>以下为li列表title的值,当title为空时，新设置值为"WEB前端技术":</h1>
    <script type="text/javascript">
        var Lists = document.getElementsByTagName("li");
        for (var i = 0; i < Lists.length; i++) {
            var text = Lists[i].getAttribute('title');
            if (text == "") {
                Lists[i].setAttribute('title','WEB前端技术');
                document.write(Lists[i].getAttribute("title") + "<br>");
            }else{
                document.write(text + "<br>");
            }
        }
    </script>
</body>
</html>

节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：

nodeName : 节点的名称
nodeValue ：节点的值
nodeType ：节点的类型

一、nodeName 属性: 节点的名称，是只读的。

元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

二、nodeValue 属性： 节点的值

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型	节点类型
元素	1
属性	2
文本	3
注释	8
文档	9

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>节点属性</title>
</head>
<body>
    <ul>
        <li>javascript</li>
        <li>HTML/CSS</li>
        <li>jQuery</li>
    </ul>
    <script type="text/javascript">
        let lis = document.getElementsByTagName('li');
        for(let i=0;i<lis.length;i++){
            document.write("节点名称为: ") + document.write(lis[i].nodeName) + document.write("  节点值为: ") + document.write(lis[i].innerText) + document.write("  节点类型为: ") + document.write(lis[i].nodeType) + document.write("<br>"); 
        }
    </script>
</body>
</html>

访问子节点childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。

语法：

elementNode.childNodes

注意：

如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
</head>
<body>
    <div>
        javascriptsss
        <p>javascript</p>
        <div>jQuery</div>
        <h5>PHP</h5>
    </div>
    <script type="text/javascript">
        let divs = document.getElementsByTagName('div');
        let firstDiv = divs[0].childNodes;
        for (let i = 0; i < firstDiv.length; i++) {
            if (firstDiv[i].nodeType == 1) {
                document.write(firstDiv[i].innerText + "<br>");
            }
        }
    </script>
</body>
</html>

访问兄弟节点

nextSibling / nextElementSibling

previousSibling / previousElementSibling

nextSibling / nextElementSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。

语法:

nodeObject.nextSibling

说明：如果无此节点，则该属性返回 null。

previousSibling / previousElementSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。

语法：

nodeObject.previousSibling

说明：如果无此节点，则该属性返回 null。

两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。

解决问题方法:

判断节点nodeType是否为1, 如是为元素节点，跳过。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>nextSibling</title>
</head>
<body>
    <ul id="u1">
        <li id="a">javascript</li>
        <li id="b">jquery</li>
        <li id="c">html</li>
    </ul>
    <ul id="u2">
        <li id="d">css3</li>
        <li id="e">php</li>
        <li id="f">java</li>
    </ul>
    <script type="text/javascript">
        function get_nextSibling(n) {
            var x = n.nextSibling;
            while (x && x.nodeType != 1) {
                x = x.nextSibling;
            }
            return x;
        }
        var x = document.getElementsByTagName("li")[0];
        document.write(x.nodeName);
        document.write(" = ");
        document.write(x.innerHTML);
        var y = get_nextSibling(x);
        if (y != null) {
            document.write("<br />nextsibling: ");
            document.write(y.nodeName);
            document.write(" = ");
            document.write(y.innerHTML + "<br>");
        } else {
            document.write("<br>已经是最后一个节点");
        }
        function get_previousSibling(n) {
            // 这里还有一个参数, previousSibling.
            // 但是后面x.nodeType = 3. 注意一下. 
            var x = n.previousElementSibling;
            while (x && x.nodeType != 1) {
                x = x.get_previousSibling;
            }
            return x;
        }
        var a = document.getElementsByTagName("li")[5];
        document.write(a.nodeName);
        document.write(" = ");
        document.write(a.innerHTML);
        var b = get_previousSibling(a);
        if (b != null) {
            document.write("<br />previousSbling: ");
            document.write(b.nodeName);
            document.write(" = ");
            document.write(b.innerHTML);
        } else {
            document.write("<br>已经是第一个节点");
        }
    </script>
</body>
</html>

插入节点

appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点

语法

appendChild(newnode)

参数

newnode: 指定追加的节点.

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
</head>
<body>
    <ul id="test">
        <li>JavaScript</li>
        <li>HTML</li>
    </ul>
    <script type="text/javascript">
        var otest = document.getElementById("test");
        // 创建元素
        var newnode = document.createElement("li"); // 元素类型
        newnode.innerText = "newElement PHP";
        otest.appendChild(newnode);
    </script>
</body>
</html>

insertBefore()

insertBefore() 方法可在已有的子节点前插入一个新的子节点

语法

node.insertBefore(newNode,node);

参数

newNode 要插入的新节点

node 指定此节点前插入新节点

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>insertBefore() 节点前插入新节点</title>
</head>
<body>
    <ul id="test">
        <li>JavaScript</li>
        <li>HTML</li>
    </ul>
    <script type="text/javascript">
        var otest = document.getElementById("test");
        var nd = document.getElementsByTagName("li")[1];
        // 创建新节点 
        var newNode = document.createElement("li");
        newNode.innerHTML = "insertBefore HTML";
        // 指定节点前插入节点.
        otest.insertBefore(newNode,nd);
    </script>
</body>
</html>

removeChild() 删除节点

removeChild() 方法从子节点列表中删除某个节点. 如果删除成功, 此方法可返回被删除的节点. 如果失败, 则返回NULL

语法

nodeObject.removeChild(node)

参数

node 必须, 指定需要删除的节点.

注意: 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。如果要完全删除对象，给 x 赋 null 值

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>清除节点内容</title>
</head>
<body>
    <div id="content">
        <h1>html</h1>
        <h1>php</h1>
        <h1>javascript</h1>
        <h1>jquery</h1>
        <h1>java</h1>
    </div>
    <script type="text/javascript">
        function clearText() {
            var content = document.getElementById("content");
            var nodeArr = new Array;
            var len = 0;
            for (var i = 0; i < content.childNodes.length; i++) {
                if (content.childNodes[i].nodeType == 1) {
                    console.log(content.childNodes[i]);
                    var x = content.removeChild(content.childNodes[i]);
                    document.write("<br>清除的节点内容为: " + x.innerText + "<br>")
                }
            }
        }
    </script>
    <button onclick="clearText()">清除节点内容</button>
</body>
</html>

replaceChild() 替换元素节点

replaceChild 实现子节点(对象)的替换. 返回被替换对象的引用.

语法

node.replaceChild(newnode, oldnew)

参数

newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。

注意:

当 oldnode 被替换时，所有与之相关的属性内容都将被移除。
newnode 必须先被建立。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>替换节点内容</title>
</head>
<body>
    <div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>
    <a href="javascript:replaceMessage()"> 将加粗改为斜体</a>
    <script type="text/javascript">
        function replaceMessage() {
            // 创建标签
            var newnode = document.createElement('i');
            // 创建文本, 这里可以通过ID 获取到 oldnode 中的 innerText
            var newnodeText = document.createTextNode(document.getElementById('oldnode').innerText);
            // 等同于 var newnodeText = document.createTextNode('javaScript');
            // 拼接. 把文本放置在i标签中
            newnode.appendChild(newnodeText);
            // 获取旧节点
            var oldnode = document.getElementById('oldnode');
            // 替换node节点
            oldnode.parentElement.replaceChild(newnode,oldnode);
        }
    </script>
</body>
</html>

createElement 创建元素节点

createElement()方法可创建元素节点. 此方法可返回一个Element对象.

语法:

document.createElement(tagName)

参数:

tagName 字符串值, 这个字符串用来指明创建元素的类型.

注意: 要与appendChild() 或 insertBefore() 方法联合使用, 将元素显示在页面中 .

创建一个按钮:

<script type="text/javascript">
    var body = document.body;
    var input = document.createElement("input");
    input.type = "button";
    input.value = "创建一个按钮";
    body.appendChild(input);  
</script>

效果：在HTML文档中，创建一个按钮。

我们也可以使用setAttribute来设置属性，代码如下：

<script type="text/javascript">
    var body = document.body;
    var btn = document.createElement("input");
    btn.setAttribute("type", "text");
    btn.setAttribute("name", "q");
    btn.setAttribute("value", "使用setAttribute");
    btn.setAttribute("onclick", "javascript:alert('This is a text!');");
    body.appendChild(btn);  
</script>

效果：在HTML文档中，创建一个文本框，使用setAttribute设置属性值。当点击这个文本框时，会弹出对话框“This is a text!”。

DOM 对象

DOM 对象

简单了解下DOM

getElementsByName()方法

getElementsByTagName()方法

getAttribute()方法

setAttribute()方法

节点属性

访问子节点childNodes

访问兄弟节点

nextSibling / nextElementSibling

previousSibling / previousElementSibling

插入节点

appendChild()

insertBefore()

removeChild() 删除节点

replaceChild() 替换元素节点

createElement 创建元素节点

相关文章