getAttribute、setAttribute
getAttribute：可以「得到」節點特定屬性的值
setAttribute：可以「改變」節點特定屬性的值
setAttribute：可以「改變」節點特定屬性的值
childNodes
可以獲得「子節點們的數組」，然後會發現子節點比想像的多
那是因為幾乎頁面中所有東西（包括換行、空白符號）都會變成節點
那是因為幾乎頁面中所有東西（包括換行、空白符號）都會變成節點
node有三種
1.元素節點
2.屬性節點
3.文本節點
1.元素節點
2.屬性節點
3.文本節點
window.onload = getchild
function getchild() {
var childrennode = document.querySelector("body").childNodes
console.log(childrennode)
}
nodeType
nodeType：可以得到節點的類型
1代表「元素節點」
2代表「屬性節點」
3代表「文本節點」
2代表「屬性節點」
3代表「文本節點」
nodeValue
nodeValue可以用來得到「節點的值」
<p id=“chos”>選擇圖片</p>
<script>
var chos = document.querySelector("#chosepic")
console.log(chos.nodeValue) //不會得到東西，因為chos是P標籤，而P標籤沒有屬性
console.log(chos.childNodes[0].nodeValue) //我們想要的是Ｐ標籤的子節點（文本節點）的屬性
</script>
圖片加載
<body>
<h1>練習</h1>
<ul>
<li>
<a title="nissen" onclick="change(this);return false;" href="./img/01.jpg">照片一</a>
</li> //return false可以阻止事件發生，this可以把自己當參數傳回去function
<li>
<a title="light" onclick="change(this);return false;" href="./img/02.jpg">照片二</a>
</li>
<li>
<a title="dark" onclick="change(this);return false;" href="./img/03.jpg">照片三</a>
</li>
</ul>
<img id="placeholder" src="./img/02.jpg" alt="">
<p id="chosepic">選擇圖片</p>
<script>
function change(picsrc) {
var source = picsrc.getAttribute("href") /
var placeholder = document.querySelector("#placeholder")
var text = picsrc.getAttribute("title")
var chosepic = document.querySelector("#chosepic")
placeholder.setAttribute("src", source)
chosepic.firstChild.nodeValue = text
}
</script>
</body>
沒有留言:
張貼留言