首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >HTML5+CSS3+JavaScript从入门到精通-20

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

原创
作者头像
qiqi_fu
发布于 2021-12-06 08:35:55
发布于 2021-12-06 08:35:55
72300
代码可运行
举报
文章被收录于专栏:CQ品势CQ品势
运行总次数:0
代码可运行

HTML5+CSS3+JavaScript从入门到精通

作者:王征,李晓波

第二十章 JavaScript的DOM编程

案例

20-01 HTML文档的节点属性

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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()方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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()方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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()方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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()方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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()方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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()方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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()方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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()方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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 对属性进行操作

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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 事件驱动及处理

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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 删除。

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

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

评论
登录后参与评论
暂无评论
推荐阅读
腾讯云CDN如何配置使用
何为CDN呢?为什么的网站需要它呢?网站全国各地可能因为延迟访问慢,而CDN是帮助一个网站能够加速打开。CDN全称内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
用户1094633
2022/02/14
18.3K0
我的个人博客迁移到Docker啦
网站架构 数据流向 网站架构 容器化简单步骤 直接启动NGINX容器 其他容器化方式 Dockerfile 封装镜像 简单容器编排工具-docker compose 查看状态和日志 我的个人博客 - https://www.EWhisper.cn 正式运行在docker里边了! 🎉🎉🎉 我把相关的源码, Docker镜像分别上传到了GitHub和Docker Hub. 地址如下: GitHub: https://github.com/east
东风微鸣
2022/04/21
4080
我的个人博客迁移到Docker啦
CDN系列学习文章(十)——业务接入CDN,需要注意什么
这个系列学习也要收尾了,先简单做一个小结。这个系列初衷让小伙伴更好的理解CDN业务逻辑,对其知其然,知其所以然。这个系列涵盖CDN常见原理、功能和常见问题。如果小伙伴对一下内容有些生疏,可以回顾之前章节。
开元
2019/06/27
9.3K0
CDN系列学习文章(十)——业务接入CDN,需要注意什么
CDN的那些事
前段时间,群友的cdn被刷爆了,这就引起了我的恐慌,我大概接入了3个域名和一个cos,要刷的话,可能会倾家荡产,国内的cdn比较便宜但是没有防护,国外的就比较贵,节点少,开了等于没开,但是他们是有防护的,盗刷应该不会这么严重,腾讯云其实也有一个类似的功能产品,scdn,有个问题,太贵啦,当时年少不懂事,测试给我花了30块,应该可以想象价格的高昂了吧。这次针对cdn的某些设置进行了一点点的优化,至少在你的网站被cc或者ddos时,自动关闭cdn,避免高昂的费用。
wresource
2023/01/31
3.4K1
公有云降本增效最佳实践
最近看到了几个事情,一个是某保险系统,为了快速上线,全量上云,结果生产正式运行后每月账单高达几十万。相关业务总扛不住这个支出,又劳师动众,让下面的项目经理、开发、运维、架构师花了3个月把业务全量从公有云迁移下来。相关人员被折磨的半死不活,而且大大拖慢了系统的迭代速度。
东风微鸣
2022/04/22
2.6K0
低成本搭建高质量 WordPress 博客实践指南
近期,作者发现之前撰写的文章,在外网被各种途径转载,很难进行版权保护。因此,萌生了搭建个人博客网站的想法。
rileycai
2022/07/13
3.2K1
低成本搭建高质量 WordPress 博客实践指南
如何快速实现内容分发网络切换到腾讯云CDN
内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免网络拥堵、地域、运营商等因素带来的访问延迟问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
Charlie Huston
2020/05/14
7.3K0
如何快速实现内容分发网络切换到腾讯云CDN
CDN的那些事
前段时间,群友的cdn被刷爆了,这就引起了我的恐慌,我大概接入了3个域名和一个cos,要刷的话,可能会倾家荡产,国内的cdn比较便宜但是没有防护,国外的就比较贵,节点少,开了等于没开,但是他们是有防护的,盗刷应该不会这么严重,腾讯云其实也有一个类似的功能产品,scdn,有个问题,太贵啦,当时年少不懂事,测试给我花了30块,应该可以想象价格的高昂了吧。这次针对cdn的某些设置进行了一点点的优化,至少在你的网站被cc或者ddos时,自动关闭cdn,避免高昂的费用。
wresource
2023/01/22
3K1
CDN的那些事
CDN原理以及如何部署 CDN 网络
内容分发网络(Content Delivery Network),是在现有 Internet 中增加的一层新的网络架构,由遍布全国的高性能加速节点构成。这些高性能的服务节点都会按照一定的缓存策略存储您的业务内容,当您的用户向您的某一业务内容发起请求时,请求会被调度至最接近用户的服务节点,直接由服务节点快速响应,有效降低用户访问延迟,提升可用性。虽然距离并不是绝对因素,但这么做可以尽可能提高性能,用户将会觉得比较顺畅。这使得一些比较高带宽的应用(传输高清画质的视频)更容易推动。内容分发网络另外一个好处在于有异地备援。当某个服务器故障时,系统将会调用其他邻近地区的服务器服务,进而提供接近100%的可靠度。
聚优云惠
2019/10/18
10.1K0
【CDN】使用腾讯云CDN加快网站访问速度并防御恶意攻击
在CDN流量包购买界面根据具体需求选购流量包(图1-1)。选择“有效期规格”、“流量规格”和“适合区域”,点击“立即购买”即可完成购买操作。
xiaoeyv
2022/06/18
7.6K0
如何部署 CDN 网络
内容分发网络(Content Delivery Network),是在现有 Internet 中增加的一层新的网络架构,由遍布全国的高性能加速节点构成。这些高性能的服务节点都会按照一定的缓存策略存储您的业务内容,当您的用户向您的某一业务内容发起请求时,请求会被调度至最接近用户的服务节点,直接由服务节点快速响应,有效降低用户访问延迟,提升可用性。虽然距离并不是绝对因素,但这么做可以尽可能提高性能,用户将会觉得比较顺畅。这使得一些比较高带宽的应用(传输高清画质的视频)更容易推动。内容分发网络另外一个好处在于有异地备援。当某个服务器故障时,系统将会调用其他邻近地区的服务器服务,进而提供接近100%的可靠度。
百鬼夜行
2018/10/25
16.4K3
如何部署 CDN 网络
分享一个支持https的CDN及启用SSL后续问题汇总
之前张戈博客全站启用了 https,并分享了相关经验心得。用了一段时间,问题还是不少,所以继续整上一篇文章,汇总一下网站启用 https 之后出现的问题以及解决办法。 在分享这些问题之前,我先分享一个国内支持 https 的 CDN,让个人博客也能无忧启用 https,而不暴露真实 IP。 我现在用的是腾讯云内测的支持 https 的 CDN,其他人也就暂时用不了。本以为国内基本就没有其他支持 https 的 CDN 了,结果晓庄等几个博主留言分享了一个支持 https 的 CDN——VeryCloud。
张戈
2018/03/21
9.7K0
分享一个支持https的CDN及启用SSL后续问题汇总
什么是CDN?它解决了什么难题?5分钟让你明明白白!
CDN这个词在我们技术圈中经常听到,什么CDN节点呀、CDN加速呀,当同事跟你谈到这些话题的时候,是不是大家都只顾着点头呢? CDN其实作用很大,我们每天都在享受CDN带来的福利,只是你感受不到。比如
网络技术联盟站
2021/01/25
74.4K1
腾讯云CDN接入教程
开通CDN服务 开通路径,顶部导航条—基础–CDN与加速 开通步骤根据提示一步一来就行了,不做过多介绍。 添加接入域名 点击确定,自动跳到接入界面,如果没有,可以点击 下图中的 添加域名 按钮。
主机优惠教程
2019/05/27
16.3K0
腾讯云CDN接入教程
作为一名程序员,你真正了解CDN技术吗?
将时光倒回到几年前,在那时候我的老家县城里,如果你从京东APP上购物下单,起码需要等上个几天时间,才能将商品送到你的手中。
Bug开发工程师
2019/11/18
1.3K0
CDN配置方式(以腾讯云为例)
CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。
何叶
2021/08/20
2.3K0
CDN配置方式(以腾讯云为例)
网站如何配置CDN加速?网站域名接入CDN加速的步骤(附CDN防御常用配置方式)(cdn加速服务器 吃核心还是吃主频)
什么是CDN?CDN的全称是Content Delivery Network,即内容分发网络CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。
雾海梦曦
2022/11/24
48.2K0
网站如何配置CDN加速?网站域名接入CDN加速的步骤(附CDN防御常用配置方式)(cdn加速服务器 吃核心还是吃主频)
TAPD SaaS产品静态资源接入腾讯云CDN——动静结合场景下的实践经验分享
为了优化对外服务时前端页面加载性能,TAPD SaaS产品打算将静态资源文件接入腾讯云CDN进行访问加速。
用户9506991
2022/06/30
3.2K3
腾讯云CDN接入教程
【数字生态,钜惠来袭】云服务器限时秒杀,首购1核1G 99元/年 http://cloud.tencent.com/act/pro/voucherslist 开通CDN服务 开通路径,顶部导航条—基础
勤劳的小蜜蜂
2019/06/27
10.7K0
一文带你快速认识腾讯云下一代CDN—EdgeOne&简单体验
CDN是内容分发网络(Content Delivery Network)的缩写。它是一种网络架构,旨在将网站的静态资源(如图片、视频、脚本文件等)分布到全球各地的服务器上,以提高用户访问这些资源的速度和性能。这些服务器被称为边缘节点,它们位于世界各地的数据中心,用户可以从距离更近的边缘节点获取所需的内容,从而减少了网络延迟和加载时间。
一个风轻云淡
2024/04/11
1.2K1
相关推荐
腾讯云CDN如何配置使用
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档