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

TML 教程导读- (HTML5 标准)：

HTML也叫作超文本标记语言，标准通用标记语言下的一个应用，您可以使用 HTML 来建立自己的 WEB 站点。通过学习本教程，您将可以使用 HTML 来创建站点。HTML 是非常容易学习的！相信您能很快学会它！

HTML发展史：

HTML没有1.0，因为关于它的初版存在争议，1995年HTML 2.0面世，1997年由国际官方组织W3C推出了HTML 3.2以及HTML 4.0标准，后面W3C(万维网联盟)也渐渐变成Web技术领域的权威，经过漫长的演变，2014年，HTML 5标准最终面世。

HTML 2.0——1995年11月，RFC 1866发布

HTML 3.2——1997年1月14日，W3C发布推荐标准

HTML 4.0——1997年12月18日，W3C发布推荐标准

HTML 4.01——1999年12月24日，W3C发布推荐标准

HTML 5——2014年10月28日，W3C发布推荐标准

HTML 实例：

在本教程中的每个章节中都会提供一定量的实例，使用编辑器，运行并修改这些实例，您可以深入掌握 HTML！

实例：

<!DOCTYPE html>

<html>

<head>

<title>test00-html课程导读实例</title>

</head>

<body>

<h1>这是一个标题</h1>

<p>这是一个段落。</p>

</body>

</html>

使用HBuilderX创建一个项目：

我是一名前端开发程序员，自己整理了一份2019最全面前端学习资料，从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理，送给每一位前端小伙伴，这里是小白聚集地，欢迎初学和进阶中的小伙伴
前端资料获取方式：
1.在你手机的右上角有【关注】选项，点击关注！
2.关注后，手机客户端点击我的主页面，右上角有私信，请私信回复：【学习】
电脑已经设置好了关键词自动回复，所以回复的时候请注意关键词哟~

建HTML网页时，可以采用多种布局和设计风格。以下是一些常见的网页形态名称，可用于不同的网站设计和功能需求：

1. **门户网站** - 集成了新闻、天气预报、邮箱等服务的网站。

2. **企业网站** - 用于展示公司信息、产品和服务。

3. **电子商务网站** - 用于在线销售商品。

4. **博客** - 用于个人或公司发布文章和日志。

5. **社交媒体网站** - 如Facebook和Twitter，用于社交互动。

6. **论坛** - 用户可以发帖和回帖讨论特定主题。

7. **新闻网站** - 提供新闻文章和更新。

8. **教育网站** - 用于在线课程和学术资源。

9. **政府网站** - 提供政府服务和信息。

10. **非营利组织网站** - 用于宣传和筹款。

11. **个人作品集** - 展示个人作品，如设计师和艺术家。

12. **在线百科全书** - 如维基百科，提供大量信息。

13. **食谱网站** - 提供食谱和烹饪技巧。

14. **健康与健身网站** - 提供健康和健身相关内容。

15. **旅行网站** - 提供旅行信息和预订服务。

16. **房地产网站** - 展示房产信息和经纪人。

17. **汽车网站** - 提供汽车信息和销售服务。

18. **科技新闻网站** - 关注最新科技发展和产品。

19. **音乐网站** - 提供音乐播放和下载。

20. **视频分享网站** - 如YouTube，用户可以上传和分享视频。

21. **电影数据库** - 如IMDb，提供电影信息和评论。

22. **体育网站** - 提供体育新闻和赛事信息。

23. **财经网站** - 提供股票市场和财经新闻。

24. **摄影网站** - 展示和分享摄影作品。

25. **时尚网站** - 提供时尚新闻和趋势。

26. **宠物网站** - 提供宠物护理和相关信息。

27. **美食博客** - 分享美食制作和餐厅评论。

28. **儿童网站** - 提供儿童教育和娱乐内容。

29. **DIY网站** - 提供手工制作和DIY项目。

30. **游戏网站** - 提供在线游戏和游戏新闻。

31. **星座占卜网站** - 提供星座运势和占卜。

32. **招聘网站** - 提供职位信息和求职服务。

33. **个人博客** - 个人分享生活和观点的博客。

34. **科技博客** - 关注科技产品和公司动态。

35. **书评网站** - 提供书籍评论和推荐。

36. **旅游博客** - 分享旅行经历和攻略。

37. **艺术画廊网站** - 展示和销售艺术品。

38. **在线市场** - 如Etsy，提供手工艺品和独特商品。

39. **在线课程平台** - 提供各种在线课程和培训。

40. **语言学习网站** - 提供语言学习和练习工具。

41. **健康咨询网站** - 提供健康和医疗建议。

42. **心理健康网站** - 提供心理健康信息和资源。

43. **个人财务网站** - 提供个人理财建议和工具。

44. **投资网站** - 提供投资策略和市场分析。

45. **环境与自然网站** - 关注环境保护和自然话题。

46. **历史与文化网站** - 提供历史和文化知识。

47. **宗教与灵性网站** - 提供宗教和灵性内容。

48. **政治评论网站** - 提供政治新闻和评论。

49. **在线论坛** - 用户可以讨论各种主题。

50. **慈善网站** - 用于宣传和筹集慈善捐款。

这些形态的名称代表了不同的网站类型和功能，可以根据您的需求和目标受众选择合适的网站形态。

在线咨询

上一篇：python 发邮件
下一篇：本地部署ComfyUI实现AI绘图自由

您的项目需求

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

整合营销服务商

javaScript-第三章

您的项目需求