整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
、認識DOM對象模型
DOM：Document Object Model（文檔對象模型）
節(jié)點與節(jié)點的關(guān)系
1、訪問節(jié)點，使用getElement系列方法訪問指定節(jié)點
getElementById()、 getElementsByName()、
getElementsByTagName()；
2、根據(jù)層次關(guān)系訪問節(jié)點：
屬性名稱 描述
parentNode 返回節(jié)點的父節(jié)點
childNodes 返回子節(jié)點集合，childNodes[i]
firstChild 返回節(jié)點的第一個子節(jié)點，最普遍的用法是訪問該元素的文本節(jié)點
lastChild 返回節(jié)點的最后一個子節(jié)點
nextSibling 下一個節(jié)點
previousSibling 上一個節(jié)點
elment屬性：
屬性名稱 描述
firstElementChild 返回節(jié)點的第一個子節(jié)點，最普遍的用法是訪問該元素的文本節(jié)點
lastElementChild 返回節(jié)點的最后一個子節(jié)點
nextElementSibling 下一個節(jié)點
previousElementSibling 上一個節(jié)點
節(jié)點信息表示：
nodeName：節(jié)點名稱
nodeValue：節(jié)點值
nodeType：節(jié)點類型
操作節(jié)點的屬性：
getAttribute("屬性名")
setAttribute("屬性名","屬性值")
創(chuàng)建和插入節(jié)點：
名稱 描述
createElement( tagName)創(chuàng)建一個標簽名為tagName的新元素節(jié)點
A.appendChild( B)把B節(jié)點追加至A節(jié)點的末尾
insertBefore( A,B )把A節(jié)點插入到B節(jié)點之前
cloneNode(boolean)復(fù)制(克隆)某個指定的節(jié)點
刪除和替換節(jié)點：
名稱描述
removeChild( node)刪除指定的節(jié)點
replaceChild( newNode, oldNode)屬性attr 用其他的節(jié)點替換指定的節(jié)點
操作節(jié)點樣式：
改變樣式的屬性
style屬性
HTML元素.style.樣式屬性＝"值"；
className屬性
HTML元素.className="樣式名稱"；
二、示例展示
1.輪播圖示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<script>
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"];
// 創(chuàng)建一個變量，來保存當前正在顯示的圖片的索引
var index=0;
// 設(shè)置提示文字
var info=document.getElementById("info");
// 分別為兩個按鈕綁定單機響應(yīng)函數(shù) 上一張函數(shù)
prev.onclick=function () {
index--;
// 判斷index是否小于0
if (index < 0) {
index=imgArr.length-1;
}
img.src=imgArr[index];
info.innerHTML="共"+imgArr.length+"張圖片"+"當前是第"+(index+1)+"張";
}
// 下一張函數(shù)
next.onclick=function () {
index++;
if (index > imgArr.length - 1) {
index=0;
}
img.src=imgArr[index];
// 當我在點擊按鈕以后在重新執(zhí)行一遍
info.innerHTML="一共"+imgArr.length+"張圖片"+"當前是第"+(index+1)+"張";
}
}
</script>
<body>
<div id="outer">
<p id="info">一共4張圖片當前是第1張</p>
<img src="img/tou01.jpg" alt="" />
<button id="prev"><上一張</button>
<button id="next">下一張></button>
</div>
</body>
</html>
2.論壇發(fā)帖示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>制作課工場論壇發(fā)貼</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>
<div class="bbs">
<header><span onclick="showDiv();">我要發(fā)帖</span></header>
<section>
<ul id="showContent"></ul>
</section>
<div class="post" id="showSubmit">
<input class="title" placeholder="請輸入標題（1-50個字符）" id="title">所屬版塊：
<select id="section">
<option>請選擇版塊</option>
<option value="電子書籍">電子書籍</option>
<option value="新課來了">新課來了</option>
<option value="新手報到">新手報到</option>
<option value="職業(yè)規(guī)劃">職業(yè)規(guī)劃</option>
</select>
<textarea class="content" id="content"></textarea>
<input class="btn" value="發(fā)布" onclick="publish();">
</div>
</div>
</body>
<script src="js/bbs.js"></script>
</html>
// 全局對象
var imgs=new Array("tou01.jpg", "tou02.jpg", "tou03.jpg", "tou04.jpg");
// 顯示發(fā)帖div
function showDiv() {
document.getElementById("showSubmit").style.display="block";
}
// 點擊發(fā)布添加內(nèi)容到Li
function publish() {
// 獲得隨機頭像的數(shù)組下標
var index=Math.floor(Math.random() * 4);
// 創(chuàng)建li節(jié)點
var tvLi=document.createElement("li");
// 創(chuàng)建div節(jié)點
var tvDiv=document.createElement("div");
// 創(chuàng)建img圖片節(jié)點
var tvImg=document.createElement("img");
// 設(shè)置圖片節(jié)點src屬性
tvImg.setAttribute("src", "../threeClass/img/" + imgs[index]);
// div添加圖片為子節(jié)點
tvDiv.appendChild(tvImg);
// 創(chuàng)建h1標簽節(jié)點
var tvh1=document.createElement("h1");
// 取得發(fā)布div框里填充的標題的值填充到h1標簽
var tvTitle=document.getElementById("title").value;
tvh1.innerText=tvTitle;
// 創(chuàng)建一個P標簽節(jié)點
var tvP=document.createElement("p");
// 創(chuàng)建兩個span標簽節(jié)點
var tvSpanOne=document.createElement("span");
var tvSpanTwo=document.createElement("span");
// 第一個span標簽取填充div里的下拉列表框所選的值
var tvSelect=document.getElementById("section").value;
tvSpanOne.innerText="板塊：" + tvSelect;
// 第二個span標簽取當前系統(tǒng)時間
var date=new Date();
var str=date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate() + "" + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
tvSpanTwo.innerText="時間是：" + str;
// 兩個span標簽追加到p標簽節(jié)點里
tvP.appendChild(tvSpanOne);
tvP.appendChild(tvSpanTwo);
// 把div、h1、p 、標簽追加到li里
tvLi.appendChild(tvDiv);
tvLi.appendChild(tvh1);
tvLi.appendChild(tvP);
// 把添加好的li在插入到ul標簽節(jié)點里
var oldUL=document.getElementById("showContent");
// 把新添加的li節(jié)點插入到撈的li節(jié)點之前
oldUL.insertBefore(tvLi, oldUL.firstChild);
// 清除div里填充過的內(nèi)容，如標題和內(nèi)容部分
document.getElementById("title").value="";
document.getElementById("content").value="";
// 設(shè)置發(fā)布div隱藏
document.getElementById("showSubmit").style.display="none";
}
效果圖展示：file:///D:/ruanjian/VS/JS/threeClass/lunbotu.html
file:///D:/ruanjian/VS/JS/threeClass/lunbotu.html
TML 教程導(dǎo)讀- (HTML5 標準)：
HTML也叫作超文本標記語言，標準通用標記語言下的一個應(yīng)用，您可以使用 HTML 來建立自己的 WEB 站點。通過學(xué)習(xí)本教程，您將可以使用 HTML 來創(chuàng)建站點。HTML 是非常容易學(xué)習(xí)的！相信您能很快學(xué)會它！
HTML發(fā)展史：
HTML沒有1.0，因為關(guān)于它的初版存在爭議，1995年HTML 2.0面世，1997年由國際官方組織W3C推出了HTML 3.2以及HTML 4.0標準，后面W3C(萬維網(wǎng)聯(lián)盟)也漸漸變成Web技術(shù)領(lǐng)域的權(quán)威，經(jīng)過漫長的演變，2014年，HTML 5標準最終面世。
HTML 2.0——1995年11月，RFC 1866發(fā)布
HTML 3.2——1997年1月14日，W3C發(fā)布推薦標準
HTML 4.0——1997年12月18日，W3C發(fā)布推薦標準
HTML 4.01——1999年12月24日，W3C發(fā)布推薦標準
HTML 5——2014年10月28日，W3C發(fā)布推薦標準
HTML 實例：
在本教程中的每個章節(jié)中都會提供一定量的實例，使用編輯器，運行并修改這些實例，您可以深入掌握 HTML！
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test00-html課程導(dǎo)讀實例</title>
</head>
<body>
<h1>這是一個標題</h1>
<p>這是一個段落。</p>
</body>
</html>
使用HBuilderX創(chuàng)建一個項目：
我是一名前端開發(fā)程序員，自己整理了一份2019最全面前端學(xué)習(xí)資料，從最基礎(chǔ)的HTML+CSS+JS到移動端HTML5到各種框架都有整理，送給每一位前端小伙伴，這里是小白聚集地，歡迎初學(xué)和進階中的小伙伴
前端資料獲取方式：
1.在你手機的右上角有【關(guān)注】選項，點擊關(guān)注！
2.關(guān)注后，手機客戶端點擊我的主頁面，右上角有私信，請私信回復(fù)：【學(xué)習(xí)】
電腦已經(jīng)設(shè)置好了關(guān)鍵詞自動回復(fù)，所以回復(fù)的時候請注意關(guān)鍵詞喲~
建HTML網(wǎng)頁時，可以采用多種布局和設(shè)計風格。以下是一些常見的網(wǎng)頁形態(tài)名稱，可用于不同的網(wǎng)站設(shè)計和功能需求：
1. **門戶網(wǎng)站** - 集成了新聞、天氣預(yù)報、郵箱等服務(wù)的網(wǎng)站。
2. **企業(yè)網(wǎng)站** - 用于展示公司信息、產(chǎn)品和服務(wù)。
3. **電子商務(wù)網(wǎng)站** - 用于在線銷售商品。
4. **博客** - 用于個人或公司發(fā)布文章和日志。
5. **社交媒體網(wǎng)站** - 如Facebook和Twitter，用于社交互動。
6. **論壇** - 用戶可以發(fā)帖和回帖討論特定主題。
7. **新聞網(wǎng)站** - 提供新聞文章和更新。
8. **教育網(wǎng)站** - 用于在線課程和學(xué)術(shù)資源。
9. **政府網(wǎng)站** - 提供政府服務(wù)和信息。
10. **非營利組織網(wǎng)站** - 用于宣傳和籌款。
11. **個人作品集** - 展示個人作品，如設(shè)計師和藝術(shù)家。
12. **在線百科全書** - 如維基百科，提供大量信息。
13. **食譜網(wǎng)站** - 提供食譜和烹飪技巧。
14. **健康與健身網(wǎng)站** - 提供健康和健身相關(guān)內(nèi)容。
15. **旅行網(wǎng)站** - 提供旅行信息和預(yù)訂服務(wù)。
16. **房地產(chǎn)網(wǎng)站** - 展示房產(chǎn)信息和經(jīng)紀人。
17. **汽車網(wǎng)站** - 提供汽車信息和銷售服務(wù)。
18. **科技新聞網(wǎng)站** - 關(guān)注最新科技發(fā)展和產(chǎn)品。
19. **音樂網(wǎng)站** - 提供音樂播放和下載。
20. **視頻分享網(wǎng)站** - 如YouTube，用戶可以上傳和分享視頻。
21. **電影數(shù)據(jù)庫** - 如IMDb，提供電影信息和評論。
22. **體育網(wǎng)站** - 提供體育新聞和賽事信息。
23. **財經(jīng)網(wǎng)站** - 提供股票市場和財經(jīng)新聞。
24. **攝影網(wǎng)站** - 展示和分享攝影作品。
25. **時尚網(wǎng)站** - 提供時尚新聞和趨勢。
26. **寵物網(wǎng)站** - 提供寵物護理和相關(guān)信息。
27. **美食博客** - 分享美食制作和餐廳評論。
28. **兒童網(wǎng)站** - 提供兒童教育和娛樂內(nèi)容。
29. **DIY網(wǎng)站** - 提供手工制作和DIY項目。
30. **游戲網(wǎng)站** - 提供在線游戲和游戲新聞。
31. **星座占卜網(wǎng)站** - 提供星座運勢和占卜。
32. **招聘網(wǎng)站** - 提供職位信息和求職服務(wù)。
33. **個人博客** - 個人分享生活和觀點的博客。
34. **科技博客** - 關(guān)注科技產(chǎn)品和公司動態(tài)。
35. **書評網(wǎng)站** - 提供書籍評論和推薦。
36. **旅游博客** - 分享旅行經(jīng)歷和攻略。
37. **藝術(shù)畫廊網(wǎng)站** - 展示和銷售藝術(shù)品。
38. **在線市場** - 如Etsy，提供手工藝品和獨特商品。
39. **在線課程平臺** - 提供各種在線課程和培訓(xùn)。
40. **語言學(xué)習(xí)網(wǎng)站** - 提供語言學(xué)習(xí)和練習(xí)工具。
41. **健康咨詢網(wǎng)站** - 提供健康和醫(yī)療建議。
42. **心理健康網(wǎng)站** - 提供心理健康信息和資源。
43. **個人財務(wù)網(wǎng)站** - 提供個人理財建議和工具。
44. **投資網(wǎng)站** - 提供投資策略和市場分析。
45. **環(huán)境與自然網(wǎng)站** - 關(guān)注環(huán)境保護和自然話題。
46. **歷史與文化網(wǎng)站** - 提供歷史和文化知識。
47. **宗教與靈性網(wǎng)站** - 提供宗教和靈性內(nèi)容。
48. **政治評論網(wǎng)站** - 提供政治新聞和評論。
49. **在線論壇** - 用戶可以討論各種主題。
50. **慈善網(wǎng)站** - 用于宣傳和籌集慈善捐款。
這些形態(tài)的名稱代表了不同的網(wǎng)站類型和功能，可以根據(jù)您的需求和目標受眾選擇合適的網(wǎng)站形態(tài)。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
