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

您的項目需求