HTML5+CSS3+JavaScript从入门到精通-20

原创

qiqi_fu

发布于 2021-12-06 16:35:55

6130

发布于 2021-12-06 16:35:55

文章被收录于专栏：CQ品势CQ品势

HTML5+CSS3+JavaScript从入门到精通

作者：王征，李晓波

第二十章 JavaScript的DOM编程

案例

20-01 HTML文档的节点属性

<!DOCTYPE html>
<!--web20-01-->
<!--
    文档对象模型(DOM)是指W3C定义的标准的文档对象模型。
    利用DOM中的对象，开发人员可对文档(如HTML)进行读取、搜索、修改、添加和删除等操作.
    DOM将整个文档展现为内存中的一棵树，每个元素、属性都是树上的一个节点。
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>HTML文档的节点属性</title>
</head>
<body>
    <table width="80%" border="1">
        <thead>
            <th>姓名</th>
            <th>年龄</th>
        </thead>
        <tr align="left">
            <td>张三</td>
            <td>25</td>
        </tr>
    </table>
    <br />
    <script type="text/javascript">
        document.write("html的根节点为" + document.childNodes[0].nodeName + "<br />");
        //document.write("根节点下面第一个子节点为" + document.childNodes[0].childNodes[0].nodeName + "<br>");//测试时，不知为何childNode[0]下的firstChild和lastChild都为null;
        //document.write("根节点下最后一个子节点为" + document.childNodes[0].lastChild.nodeName + "<br>");
        document.write("输出body节点下的第一个节点" + document.body.childNodes[0].nodeName + "<br>");//#text -- 回车字符被当做第一个子节点
        document.write("输出body节点下的第二个节点" + document.body.childNodes[1].nodeName + "<br>");//TABLE
        document.write("输出body节点下的第二个节点的类型" + document.body.childNodes[1].nodeType + "<br>");//1 - 元素节点1，属性节点2，文本节点3
    </script>
</body>
</html>

20-02 getElementsByTagName()方法

<!DOCTYPE html>
<!--web20-02-->
<!--
    getElementsByTagName: 传回指定名称的元素集合。参数为*时传回父节点的所有元素；
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>getElementsByTagName()方法</title>
</head>
<body>
    <table width="200" border="1">
        <tr><td>1</td></tr>
    </table>
    <table width="200" border="1">
        <tr><td>2</td><td>3</td></tr>
        <tr><td>4</td><td>5</td></tr>
        <tr><td>6</td><td>7</td></tr>
    </table>
    <br />
    <script type="text/javascript">
        var aa = document.getElementsByTagName("table");
        document.write("网页里所有的table集合共有：" + aa.length + "个!<br>");

        var bb = aa[1].getElementsByTagName("td");
        document.write("第二个table中含有的td集合共有：" + bb.length + "个!");
    </script>
</body>
</html>

20-03 getElementById()方法

<!DOCTYPE html>
<!--web20-03-->
<!--
    document中Id是唯一的，name可以重复
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>getElementById()方法</title>
</head>
<body>
    <p id="id1">getElementById()方法可以访问document中的某一特定元素，是通过id来取得元素，只能访问设置了id的元素</p>
    <p id="id2">在HTML中，id特性是唯一的，没有两个元素可以共享同一个id，getElementById()方法是从文档树中获取单个元素最快的方法。</p>
    <script type="text/javascript">
        document.getElementById("id1").style.backgroundColor = "yellow";
        document.getElementById("id1").style.color = "red";
        document.getElementById("id2").style.backgroundColor = "pink";
        document.getElementById("id2").style.color = "blue";
    </script>
</body>
</html>

20-04 getElementsByName()方法

<!DOCTYPE html>
<!--web20-04-->
<!--
    document中Id是唯一的，name可以重复
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>getElementsByName()方法</title>
</head>
<body>
    <img name="images1" src="g1.gif" width="100" height="100" />
    <img name="images1" src="b1.png" width="150" height="100" />
    <img name="images1" src="mp3mp4/menu.swf" width="200" height="100" /><br /><br />
    <script type="text/javascript">
        var x = document.getElementsByName("images1");
        document.write("包含" + x.length + "个images1元素<br>");
        for (var i = 0; i < x.length; i++)
        {
            document.write("images1中，第" + i + "元素的宽度为:" + x[i].width + "<br>");
        }
    </script>
</body>

</html>

20-05 appendChild()方法

<!DOCTYPE html>
<!--web20-05-->
<!--
    createElement: 创建一个元素
    createTextNode： 创建一个文本节点
    appendChild：在节点列表的末端添加一个节点
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>appendChild()方法</title>
</head>
<body>
    <script type="text/javascript">
        table = document.createElement("table");//创建一个新元素节点
        tbody = document.createElement("tbody");
        for (var j = 0; j < 3; j++)
        {
            addtr = document.createElement("tr");
            for (var i = 0; i < 3; i++)
            {
                addtd = document.createElement("td");
                celltext = document.createTextNode("单元格是第" + j + "行，第" + i + "列");
                addtd.appendChild(celltext);
                addtr.appendChild(addtd);
            }
            tbody.appendChild(addtr);
        }
        table.appendChild(tbody);
        document.body.appendChild(table);
        table.setAttribute("border", "2");
    </script>
</body>
</html>

20-06 insertBefore()方法

<!DOCTYPE html>
<!--web20-06-->
<!--
    var beforenote = fatherDocNode.insertBefore(newChild, refChild);
    将newChild插入到refChild之前，若refChild不存在于fatherDocNode中，则插入在fatherDocNode最末端节点；
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>insertBefore()方法</title>
</head>
<body>
    <img src="b1.png" width="500" height="120" id="img1" />
    <script type="text/javascript">
        var newp = document.createElement("p");
        var newText = document.createTextNode("这是一张图片");
        newp.appendChild(newText);
        var refchild = document.getElementById("img1");//拿到参照元素
        document.body.insertBefore(newp, refchild);
    </script>
</body>
</html>

20-07 insertData()方法

<!DOCTYPE html>
<!--web20-07-->
<!--
    insertData(start, string)
    在现有的文本节点中，插入一个字符串.start是一个位置
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>insertData()方法</title>
</head>
<body>
    <p id="id1">DOM将文档中的每个项目看作节点，如元素、属性、注释、处理指令、甚至构成属性的文本。一般情况支持JavaScript的所有浏览器都支持DOM。</p>
    <script type="text/javascript">
        var x = document.getElementById("id1").childNodes[0];
        x.insertData(16, "<JavaScript从入门到精通>");
    </script>
</body>

</html>

20-08 replaceChild()方法

<!DOCTYPE html>
<!--web20-08-->
<!--
    replaceChild(newChild, oldChild);
    如果newChild为null, 则旧的oldchild会被移除。
    若成功，返回替换的节点；失败返回Null
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>replaceChild()方法</title>
    <script type="text/javascript">
        function replacep()
        {
            //新建一个P元素节点
            var newp = document.createElement("p");
            var newText = document.createTextNode("替换的文字(替换后)");
            newp.appendChild(newText);
            var para = document.getElementById("id1");
            var replaced = document.body.replaceChild(newp, para);
        }
    </script>
</head>
<body>
    <p id="id1">被替换的文字（替换前）</p>
    <input name="" type="button" value="替换" onclick="replacep()" />
</body>
</html>

20-09 removeChild()方法

<!DOCTYPE html>
<!--web20-09-->
<html>
<head>
    <meta charset="utf-8" />
    <title>removeChild()方法</title>
</head>
<body>
    <table width="200" border="1">
        <tr>
            <td>第一单元格</td>
            <td>第二单元格</td>
        </tr>
        <tr>
            <td>第三单元格</td>
            <td id="id1">第四单元格</td>
        </tr>
        <tr>
            <td>第五单元格</td>
            <td>第六单元格</td>
        </tr>
    </table>
    <script type="text/javascript">
        var x = document.getElementById("id1");
        x.parentElement.removeChild(x);
    </script>
</body>

</html>

20-10 对属性进行操作

<!DOCTYPE html>
<!--web20-10-->
<!--
    createAttribute() \ setAttribute(name, value) \ getAttribute() \ removeAttribute()
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>对属性进行操作</title>
</head>
<body>
    <table width="200" border="8">
        <tr>
            <td>第一单元格</td>
            <td>第二单元格</td>
        </tr>
        <tr>
            <td>第三单元格</td>
            <td id="id1">第四单元格</td>
        </tr>
        <tr>
            <td>第五单元格</td>
            <td>第六单元格</td>
        </tr>
    </table>
    <br />
    <script type="text/javascript">
        var table1 = document.getElementsByTagName("table").item(0);//item获取里面的元素，相当于下标
        var tb = table1.getAttribute("border");
        document.write("表格起始的border属性值为：", tb);
        table1.setAttribute("border", "1");
        document.write("<br>表格现在的border属性值为：", table1.getAttribute("border"));
    </script>
</body>
</html>

20-11 事件驱动及处理

<!DOCTYPE html>
<!--web20-11-->
<!--
    如下按键过程中，只能在body范围内单击鼠标，其他地方单击鼠标并不会有事件触发；
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>事件驱动及处理</title>
    <script type="text/javascript">
        function isKeyPressed(event)
        {
            if (event.ctrlKey == 1)
                window.alert("已按下Ctrl键！");
            else
                window.alert("没有按下ctrl键！");
        }
    </script>
</head>
<body onmousedown="isKeyPressed(event)">
    <p>判断在单击鼠标左键时，是否按下ctrl键！</p>
</body>
</html>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript

登录后参与评论

0 条评论

热度

HTML5+CSS3+JavaScript从入门到精通-20

HTML5+CSS3+JavaScript从入门到精通-20

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐