javaScript-第三章

、认识DOM对象模型

DOM：Document Object Model（文档对象模型）

节点与节点的关系

1、访问节点，使用getElement系列方法访问指定节点

getElementById()、 getElementsByName()、

getElementsByTagName()；

2、根据层次关系访问节点：

属性名称描述

parentNode 返回节点的父节点

childNodes 返回子节点集合，childNodes[i]

firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

lastChild 返回节点的最后一个子节点

nextSibling 下一个节点

previousSibling 上一个节点

elment属性：

属性名称描述

firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

lastElementChild 返回节点的最后一个子节点

nextElementSibling 下一个节点

previousElementSibling 上一个节点

节点信息表示：

nodeName：节点名称

nodeValue：节点值

nodeType：节点类型

操作节点的属性：

getAttribute("属性名")

setAttribute("属性名","属性值")

创建和插入节点：

名称描述

createElement( tagName)创建一个标签名为tagName的新元素节点

A.appendChild( B)把B节点追加至A节点的末尾

insertBefore( A,B )把A节点插入到B节点之前

cloneNode(boolean)复制(克隆)某个指定的节点

删除和替换节点：

名称描述

removeChild( node)删除指定的节点

replaceChild( newNode, oldNode)属性attr 用其他的节点替换指定的节点

操作节点样式：

改变样式的属性

style属性

HTML元素.style.样式属性＝"值"；

className属性

HTML元素.className="样式名称"；

二、示例展示

1.轮播图示例

<!DOCTYPE html>

<head>

<title>轮播图显示</title>

</head>

<style>

* {

margin: 0;

padding: 0;

}

#outer {

width: 300px;

margin: 50px auto;

padding: 10px;

background-color: greenyellow;

text-align: center;

}

#outer>img {

width: 300px;

height: 300px;

}

</style>

window.onload = function () {

// 点击按钮切换图片

var prev = document.getElementById("prev");

var next = document.getElementById("next");

// 要切换图片就要修改img标签的src属性

var img = document.getElementsByTagName("img")[0];

var imgArr = ["img/tou01.jpg", "img/tou02.jpg", "img/tou03.jpg", "img/tou04.jpg"];

// 创建一个变量，来保存当前正在显示的图片的索引

var index = 0;

// 设置提示文字

var info=document.getElementById("info");

// 分别为两个按钮绑定单机响应函数上一张函数

prev.onclick = function () {

index--;

// 判断index是否小于0

if (index < 0) {

index=imgArr.length-1;

}

img.src = imgArr[index];

info.innerHTML="共"+imgArr.length+"张图片"+"当前是第"+(index+1)+"张";

}

// 下一张函数

next.onclick = function () {

index++;

if (index > imgArr.length - 1) {

index = 0;

}

img.src = imgArr[index];

// 当我在点击按钮以后在重新执行一遍

info.innerHTML="一共"+imgArr.length+"张图片"+"当前是第"+(index+1)+"张";

}

</script>

<body>

<p id="info">一共4张图片当前是第1张</p>

</div>

</body>

</html>

2.论坛发帖示例

<!DOCTYPE html>

<head>

<title>制作课工场论坛发贴</title>

</head>

<style>

*{margin: 0; padding: 0; font-family: "Arial", "微软雅黑";}

ul,li{list-style: none;}

.bbs{margin: 0 auto; width: 600px; position: relative;}

header{padding: 5px 0; border-bottom: 1px solid #cecece;}

header span{display:inline-block; width: 220px; height: 50px; color: #fff; background: #009966; font-size: 18px; font-weight: bold; text-align: center;line-height: 50px; border-radius: 8px; cursor: pointer;}

.post{position: absolute; background: #ffffff; border: 1px #cccccc solid; width: 500px; left: 65px; top:70px; padding: 10px; font-size: 14px; z-index: 999999; display: none;}

.post .title{width: 450px; height:30px; line-height: 30px; display: block; border: 1px #cecece solid; margin-bottom: 10px;}

.post select{width: 200px; height: 30px;}

.post .content{width: 450px; height: 200px; display: block; margin: 10px 0;border: 1px #cecece solid;}

.post .btn{width: 160px; height: 35px; color: #fff; background: #009966; border: none; font-size: 14px; font-weight: bold; text-align: center; line-height: 35px; border-radius: 8px; cursor: pointer;}

.bbs section ul li{padding: 10px 0; border-bottom: 1px #999999 dashed;

overflow: hidden;}

.bbs section ul li div{float: left; width: 60px; margin-right: 10px;}

.bbs section ul li div img{ border-radius:50%; width: 60px;}

.bbs section ul li h1{float: left; width: 520px; font-size: 16px; line-height: 35px;}

.bbs section ul li p{color: #666666; line-height: 25px; font-size: 12px; }

.bbs section ul li p span{padding-right:20px;}

</style>

<body>

</section>

<input class="title" placeholder="请输入标题（1-50个字符）" id="title">所属版块：

<option>请选择版块</option>

</select>

</div>

</body>

</html>

// 全局对象

var imgs = new Array("tou01.jpg", "tou02.jpg", "tou03.jpg", "tou04.jpg");

// 显示发帖div

function showDiv() {

document.getElementById("showSubmit").style.display = "block";

}

// 点击发布添加内容到Li

function publish() {

// 获得随机头像的数组下标

var index = Math.floor(Math.random() * 4);

// 创建li节点

var tvLi = document.createElement("li");

// 创建div节点

var tvDiv = document.createElement("div");

// 创建img图片节点

var tvImg = document.createElement("img");

// 设置图片节点src属性

tvImg.setAttribute("src", "../threeClass/img/" + imgs[index]);

// div添加图片为子节点

tvDiv.appendChild(tvImg);

// 创建h1标签节点

var tvh1 = document.createElement("h1");

// 取得发布div框里填充的标题的值填充到h1标签

var tvTitle = document.getElementById("title").value;

tvh1.innerText = tvTitle;

// 创建一个P标签节点

var tvP = document.createElement("p");

// 创建两个span标签节点

var tvSpanOne = document.createElement("span");

var tvSpanTwo = document.createElement("span");

// 第一个span标签取填充div里的下拉列表框所选的值

var tvSelect = document.getElementById("section").value;

tvSpanOne.innerText = "板块：" + tvSelect;

// 第二个span标签取当前系统时间

var date = new Date();

var str = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate() + "" + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();

tvSpanTwo.innerText = "时间是：" + str;

// 两个span标签追加到p标签节点里

tvP.appendChild(tvSpanOne);

tvP.appendChild(tvSpanTwo);

// 把div、h1、p 、标签追加到li里

tvLi.appendChild(tvDiv);

tvLi.appendChild(tvh1);

tvLi.appendChild(tvP);

// 把添加好的li在插入到ul标签节点里

var oldUL = document.getElementById("showContent");

// 把新添加的li节点插入到捞的li节点之前

oldUL.insertBefore(tvLi, oldUL.firstChild);

// 清除div里填充过的内容，如标题和内容部分

document.getElementById("title").value = "";

document.getElementById("content").value = "";

// 设置发布div隐藏

document.getElementById("showSubmit").style.display = "none";

}

效果图展示：file:///D:/ruanjian/VS/JS/threeClass/lunbotu.html

file:///D:/ruanjian/VS/JS/threeClass/lunbotu.html

乎每个孩子都问过父母这样一个问题：我是从哪里来的？父母们的回答也是五花八门、千奇百怪，有的回答会让人笑喷，而有的回答则深深地影响孩子一生。今天案例的主人公就一直被这个问题困扰了近30年，直到不久前和父亲做了亲子鉴定。

在陈庆发脑海深处有这样一个记忆碎片：他3岁的时候才来到了现在的家。可是父亲一直告诉他，他是他们亲生的孩子。从儿时的将信将疑，到青年时的半信半疑，直到成年后的疑云满腹。从开始的试探性询问，到后来的激烈争吵，最终他选择了亲子鉴定。一纸鉴定让这一切画上了句号，同时又让陈庆发有了新的困惑：我来自哪里？

为了解开这个谜，为了寻找到自己的亲生父母，陈庆发来到宝贝回家网站登记寻亲。志愿者追逐梦想接到任务后，立刻与陈庆发联系，但是由于他当时太小没什么记忆，有价值的信息依旧很少。陈庆发觉得自己是被父母遗弃的，而追逐梦想从极少的沟通中认为他被拐卖的可能性很大。本着对寻亲人负责的态度，追逐梦想陪陈庆发对信息进行了多次分析，随后帮助他在论坛发帖：

约1986年1989年从云南某地疑似被拐至云南宣威市的陈庆发寻亲254533

http://bbs.baobeihuijia.com/thread-368482-1-1.html

发帖后，追逐梦想指导陈庆发采血入库做DNA比对，但是谨小慎微的他不愿意将自己的血样寄到宝贝回家网站。为了尊重寻亲人的顾虑，追逐梦想联系了志愿者王涛，在王涛的协调下将血样寄给了资阳张英警官。不久，张英警官便传来了DNA比中云南双亲的喜讯，但是DNA只比中16个点位（至少要18个以上），需要采血补充点位进一步比对。而此时也得知，这对云南父母，也已经在宝贝回家寻子网站登记过寻子信息，跟进人是玉督查。

原来，陈庆发的父母早在2016年7月就在宝贝回家登记找他，然而寻亲的登记人却不是他的父母，是父母的邻居。陈庆发的亲生父亲叫朱少旭，体弱年迈；母亲武关翠瘫痪在床。玉督查通过登记人联系上了寻亲人，在登记人的帮助下指导他们去采血并整理了相关的信息在论坛发帖：

寻找1986年出生1988年失踪云南省昆明市官渡区东站邮局门口朱启亮205828

http://bbs.baobeihuijia.com/thread-343967-1-1.html

然而发帖后没多久，邻居的电话就停机，QQ也没有回复。玉督查多次拨打陈庆发父母的电话也没人接，有时接了也说话断断续续，再加上老人年迈和严重的地方口音，几乎没有办法沟通。情急之下玉督查求助镇雄志愿者放弃烦恼跟父母联系，同样多次联系无果，再后来电话就没人接听了。

2016年10月21日，因长期联系不上陈庆发的父母，玉督查担心母亲卧病在床，父亲无法带她去采血，遂求助云南志愿者紫彦。紫彦在宝贝回家云南群说明情况后，放弃烦恼和志愿者杰少主动请缨去实地核查，允许的话同时进行采血。放弃烦恼事先找朋友要了采血卡备用，杰少开了几十公里的车到县城接了放弃烦恼，两人一同前往塘房镇朱少旭家。由于长时间联系不上登记人和寻亲人，并不知道朱少旭家住在哪里。志愿者从塘房镇街上就开始向路人寻问，打听到当地有两个人叫朱少旭，又经过多方打听排除，最后找到了其中一位朱少旭的侄子。他把志愿者带到了家里，一再确认采血是完全免费的之后，才带志愿者到了朱少旭的家。原来朱少旭的手机坏了没有修，才导致电话一直打不通，老人听到志愿者们驱车几十公里专为他们寻亲而来，很是感动，积极配合整理资料并同意采血。两位志愿者拿出了事先准备好的酒精棉、针和采血卡，在紫彦的指导下顺利地帮助老人采血。采完血后，两位志愿者又驱车帮助复印身份证复印件和帮助朱少旭家人拍照方便比对。

在两位志愿者多次请教紫彦采血事宜的时候，江苏徐州刑警队张警官正在昆明出差，得知此事后表示可以帮助朱少旭夫妇DNA入库。两位志愿者回去后将采血卡邮寄给在昆明的紫彦，紫彦转交给张警官，带回江苏徐州刑警队入库。正是因为志愿者们对寻亲的负责和真心付出，之后陈庆发的采血才能够第一时间在DNA库中比对成功。

而追逐梦想在接到DNA复核通知后，立刻将信息转给了志愿者玉督查。玉督查联系了资阳张英警官，张英警官又联系了江苏张警官。通过张警官再次复核，确定了DNA比中的家寻朱启亮的父母就是陈庆发的亲生父母。

至此，这个谜终于解开了：陈庆发，原名朱启亮，1986年出生在云南省，父亲朱少旭，母亲武关翠。1988年父母带他到邮局寄信，父母在窗口写信封和贴邮票的时候，把他放在了身后的椅子上让他自己玩。仅仅几分钟的时间，父母办完事情后一回头，发现已找不到朱启亮，心急如焚的父母四处寻找，并叫来了亲戚朋友一同寻找，然而没有找到朱启亮任何有价值的线索，手足无措的父母当天报案，但此后再无朱启亮的下落。

经过28年的等待，在宝贝回家志愿者的努力下陈庆发（朱启亮）终于可以一家团聚了。

宝贝回家新媒体工作组芝华士

站务电话：0435-3338090（吉林通化）

宝贝回家寻子网咨询信箱：baobeihuijia@yeah.net

宝贝回家志愿者协会宝贝回家寻子网 http://www.baobeihuijia.com/

公益网站宝贝回家志愿者为寻亲者免费服务重点帮助16岁以下失踪儿童

点击阅读原文，一起玩耍

众网济南2月14日讯（记者王磊）这里不仅有民生爆料，还有贴心的生活服务、本地的兴趣圈子、公益团队……面对自媒体的冲击，2015年，大众论坛作为山东影响力最大的地方网络社区，注册用户突破500万，活跃度保持持续上升的发展势头。2016年，大众论坛（club.dzwww.com）推出“大众家园计划”，平台全新开放，与版主合作共赢，不断优化社区的用户体验，支撑各类版块发展，诚邀各地的牛人和版主团队与我们一起拓展本地的生活服务，激励用户生产出更多优质的原创内容。

共建家园，平台开放、版主团队纳新

大众论坛将开放版块申请的公开渠道，欢迎各地的兴趣俱乐部、组织或是牛人落户这个平台，无论你是一个团队或俱乐部能带活一个版块，还是一个段子手、牛人能火了自己在论坛个人空间，我们都将为你提供平台支持。3人以上组成的版主管理团队提交相应的版块用户发展计划，经论坛总部管理团队审核通过后，即可上线开通新版块，进行运营。除了版块置顶，大众论坛还将提供大众网和论坛首页、全省总置顶等宣传位置，为版块的推广和发展提供支持。

此外，论坛总部管理团队还将通过审核把关，确保论坛发布的信息安全可靠、平台稳定运行、页面美观与时俱进，协助各版主团队制定各自的发展计划。

共谋发展，服务版主、合作共赢

论坛管理团队和各个版主团队之间，将更多地成为服务与合作的关系。版主不仅是管理论坛版块秩序的维护者，也可以是借助论坛平台服务本地论坛用户生活需求，通过组织线上和线下的网友活动，为连接顾客和商家的需求搭建桥梁。

大众论坛将定期策划推出一系列全省大型联动活动，带动城市论坛、圈子和生活服务板块在本地的影响力。同时，社区编辑通过采写刊发网友活动新闻报道、大众网旗下各媒体的微信公众号矩阵，以及山东手机报等媒体平台，对论坛版块和网友活动的宣传推广。在网友体验方面，社区编辑团队将积极采纳版主和网友建议，通过技术升级，加快改善论坛适应手机WAP便捷访问等方面的体验和功能。

希望广大版主团队通过组织活动、撰写和引导网友发布优质原创内容、扩展版块用户人数，逐渐做强版块人气，并围绕版块用户需求，开展各类针对用户的生活化增值服务。

共当创客，扎根本地生活服务

论坛不仅要有爆料维权，而且要有找特价、找对象、找家政、淘二手、租房买房和家居装修等生活服务信息服务，以及拍客、骑行、驴友、文学等兴趣爱好圈子。

在生活服务版块方面，各版主团队在本地具有一定的人脉和地域优势，可以与总部合作，开展面向全省网友的“山东地理标志产品”团购等活动，推介本地名优特产，满足网友吃喝玩乐的需求。

另外，版主团队可以通过与本地大型线下实体商家机构合作，快速搭建例如“找家政”等网上信息分享和交易线上平台。丰富论坛的帖文类型，提供更多好玩有用的生活服务信息。

在圈子建设方面，拍客和骑行在稳固发展市区网友的同时，可向县域延伸，欢迎驴友、美食和亲子等俱乐部新的版主团队入驻论坛。在版块发展方式上，更加注重邀请本地俱乐部团体整体入驻的形式快速推进兴趣圈子版块。

另外，大众论坛也欢迎山东各地的高中或高校的社团、学生会等团体落户论坛版块。

共享牛帖，鼓励用户生产优质内容

希望广大版主继续带动、鼓励本地网友从自己熟悉的行业或爱好开始，分享各类工作、生活或兴趣爱好等方面的经验，即便是小到哪里的菜好吃、去哪儿的路怎么走等信息，也是原创优质内容的一个组成部分，这将让论坛不仅变得更好玩，而且很有用。

希望各地版主团队继续发展创新，论坛将在“好帖奖励”中，专门开辟一个分类，按月奖励这部分优质原创内容的作者。同时，对于优质的帖文，社区编辑也将在大众网“两微一端”等各媒体平台进行刊发推荐，不断推出大众论坛的明星网友。

如果您想加入我们，请通过以下渠道跟我们联系：

论坛：站务讨论版块（http://bbs.dzwww.com/forum-3-1.html）发帖，或与该版块的版主“社区编辑十八”私信联系

QQ：995067044

电话：0531-85196602

在线咨询

上一篇：web前端：vue源码解析，vue-cli父子组件传递模板
下一篇：添加图片HTML代码及给图片添加超链接的html代码

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

javaScript-第三章

您的项目需求