Blogger Information

Blog 5

fans 0

comment 0

visits 3919

Special Recommendation

More>

Related recommendations

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!”。

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

JavaScript 基础

2020-06-10 15:09:03

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

DOM 对象

简单了解下DOM

getElementsByName()方法

getElementsByTagName()方法

getAttribute()方法

setAttribute()方法

节点属性

访问子节点childNodes

访问兄弟节点

nextSibling / nextElementSibling

previousSibling / previousElementSibling

插入节点

appendChild()

insertBefore()

removeChild() 删除节点

replaceChild() 替换元素节点

createElement 创建元素节点