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-第三章

您的項目需求