從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作
大家好，這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！
一、DOM概念
DOM 的全稱為：Document Object Model 文檔對象模型
我們把 html 文件看成一個文檔，因為萬物皆對象，所以這個文檔也是一個對象。這個文檔中所有的標簽都可以看成一個對象，比如 div 標簽，p 標簽等。
1、相關概念
- html 頁面有一個根標簽 html 標簽。
- 標簽也叫元素，也叫對象。
- 頁面中的頂級對象：document。
節點（node）：頁面中所有的內容都是節點。包括標簽，屬性，文本等
xml 文件也可以看成一個文檔。
html：側重於展示數據。
xml：側重於存儲數據。
2、DOM樹
文檔下面有根標簽 html，html 下有 head 和 body 標簽，head 下又有 title 等，body 下又有 div 等。
由文檔及文檔中的所有元素（標簽）組成的樹狀結構，叫樹狀圖（DOM樹）
二、DOM的作用
DOM的作用主要是：操作頁面的元素（標簽）。
DOM經常進行的操作
- 獲取元素
- 動態創建元素
- 對元素進行操作（設置屬性或調用其方法）
- 事件（什麽時機做相應的操作）
三、DOM初體驗
基本上分三步走：
- 根據 id 等獲取元素
- 為獲取的元素註冊事件
- 添加事件處理函數
註意：所有function後面都有分號。
1、對標簽的操作
1.1、點擊按鈕，彈出對話框
<body>
<input type="button" value="按鈕" id="btn">
<script>
document.getElementById("btn").onclick = function () {
alert 1.2、點擊按鈕顯示圖片，並設置圖片寬高
<body>
<input type="button" value="按鈕" id="btn">
<img src="" id="im">
<script>
document.getElementById("btn").onclick = function() {
document.getElementById("im").src = "1.png";
document.getElementById("im").width = 600;
document.getElementById("im").height = 200;
};
</script>
</body>document.getElementById("xxx"); 返回值是一個標簽對象，利用這個對象可以操作其中的元素，像 type，value 等都是它的元素。
註意：html 標簽裏面的 width 和 height 屬性是不需要加 px 的，css 的 style 裏面的寬高才要加。
1.3、點擊按鈕修改 p 標簽的內容
<body>
<input type="button" value="按鈕" id="btn">
<p id="p1">p標簽</p>
<script>
document.getElementById("btn").onclick = function() {
document.getElementById("p1").innerText = "我是一個P標簽";
};
</script>
</body>凡是成對的標簽，設置中間的中間的文本內容，都是用
innerText屬性。
1.4、點擊按鈕設置所有的 p 標簽內容
<body>
<input type="button" value="按鈕" id="btn"/>
<div>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</div>
<div>
<p>Daotin</p>
<p>Daotin</p>
<p>Daotin</p>
</div>
<script>
document.getElementById("btn").onclick = function () {
var pObjs = document.getElementsByTagName("p");
for(var i=0; i<pObjs.length; i++) {
pObjs[i].innerText = "world";
}
}
</script>
</body>如果只想設置第一個 div 裏面的 p標簽怎麽辦呢？
<body>
<input type="button" value="按鈕" id="btn"/>
<div id="box">
<p>hello</p>
<p>hello</p>
<p>hello</p>
</div>
<div>
<p>Daotin</p>
<p>Daotin</p>
<p>Daotin</p>
</div>
<script>
document.getElementById("btn").onclick = function () {
var pObjs = document.getElementById("box").getElementsByTagName("p");
for(var i=0; i<pObjs.length; i++) {
pObjs[i].innerText = "world";
}
}
</script>
</body>1.5、點擊按鈕修改圖片的 alt 和 title 屬性
<body>
<input type="button" value="按鈕" id="btn">
<img src="1.png" alt="Google" title="logo">
<script>
document.getElementById("btn").onclick = function () {
var imgObjs = document.getElementsByTagName("img");
imgObjs[0].alt = "Daotin";
imgObjs[0].title = "nihao";
};
</script>
</body>imgObjs[0]：代表的就是偽數組的第一個對象。
1.6、點擊按鈕修改多個文本框的值
<body>
<input type="button" value="點擊按鈕填充文本" id="btn"><br>
<input type="text" value=""><br>
<input type="text" value=""><br>
<input type="text" value=""><br>
<input type="text" value=""><br>
<input type="text" value=""><br>
<script>
document.getElementById("btn").onclick = function (ev) {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
// 判斷 type 是否為text
if(inputs[i].type === "text") {
// 這時候不能使用 innerText ，因為這不是成對的標簽
inputs[i].value = "Daotin,你好啊";
}
}
};
</script>
</body>1.7、點擊按鈕修改 value 屬性
<body>
<input type="button" value="點擊按鈕填充文本" id="btn"><br>
<script>
var btnObj = document.getElementById("btn");
btnObj.onclick = function (ev) {
// btnObj.value = "Daotin";
// btnObj.type = "text";
// btnObj.id = "btn2";
this.value = "Daotin";
this.type = "text";
this.id = "btn2";
};
</script>
</body>在一個對象的事件裏面對當前事件的屬性的操作，可以使用
this.屬性來修改。
1.8、按鈕的排他功能
<body>
<input type="button" value="lvonve">
<input type="button" value="lvonve">
<input type="button" value="lvonve">
<input type="button" value="lvonve">
<input type="button" value="lvonve">
<script>
// 獲取全部按鈕
var btnObjs = document.getElementsByTagName("input");
// 循環為所有按鈕註冊點擊事件
for(var i=0; i<btnObjs.length; i++) {
btnObjs[i].onclick = function (ev) {
// 先設置點擊每個按鈕的時候將所有的按鈕value為lvonve
for(var j=0; j<btnObjs.length; j++) {
btnObjs[j].value = "lvonve";
}
//再設置當前點擊的按鈕為Daotin
this.value = "Daotin";
};
}
</script>
</body>並不是我們通常想的，點擊某一個按鈕的時候，將之前點擊的按鈕恢復，而是點擊每一個按鈕之前，將所有的按鈕恢復。
1.9、點擊圖片修改路徑
<body>
<input type="button" value="lvonve" id="btn">
<img src="1.png" id="im">
<script>
function myid(id) {
return document.getElementById(id);
}
myid("btn").onclick = function (ev) {
myid("im").src = "2.jpg";
};
</script>
</body>如果有多個地方都使用了
document.getElementById("")的話，可以封裝成一個函數來調用。
1.10、點擊按鈕選擇性別和興趣
<body>
<input type="button" value="修改性別" id="btn1">
<input type="radio" value="1" name="sex">男
<input type="radio" value="2" name="sex" id="nv">女
<input type="radio" value="3" name="sex">保密
<br>
<input type="button" value="選擇興趣" id="btn2">
<input type="checkbox" value="1" name="hobby" id="chi">吃飯
<input type="checkbox" value="2" name="hobby">睡覺
<input type="checkbox" value="3" name="hobby" id="play">打豆豆
<script>
function my$(id) {
return document.getElementById(id)
}
my$("btn1").onclick = function () {
my$("nv").checked = true; // 填“checked”等同於true
};
my$("btn2").onclick = function () {
my$("chi").checked = true;// 填“checked”等同於true
my$("play").checked = true;// 填“checked”等同於true
};
</script>
</body>1、在單標簽中，如果屬性對應的值只有一個，而且值和屬性同名，那麽 js 操作 DOM 的時候，這個屬性值可以用布爾類型表示。比如：
checked="checked"selected="selected"disabled="disabled"readonle="readonly"等。2、在上面例子，不管是寫 "checked"還是其他任何的字符串，都會選中的，因為非空字符串都會被瀏覽器轉換成 true。
3、在 html 中，如果屬性的值只有一個，可以直接寫這個屬性，而不需要賦值，也是有效的。比如：
<input type="text" value="文本" readonly />這個時候，這個文本框也是被禁用的。
從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作