第4章 案例研究：JavaScript图片库

案例

html部分

图片1

	

	    
	    
	        连接一
	    
	
	

	        连接二
	    
	

	        连接三
	    
	

	        连接四
	    

js部分

function show_img(dom){
    // 获取当前节点类型
    const nodeType=dom.nodeType

    // 改变图片
    const href=dom.getAttribute("href")
    const title=dom.getAttribute("title")
    const img=document.getElementById("img")
    img.setAttribute("src",href)

    //改变标题
    const title_box=document.getElementById("title");
    title_box.childNodes[0].nodeValue=title
}

function children_num(){
    const all=document.getElementsByTagName("body")[0]
    // 获取all所有的孩子
    // alert(all.childNodes.nodeType)   
}

// 网页加载时执行
window.onload=children_num

效果

总结

1. DOM对象.childNodes 获取一个元素的所有字节点
2. DOM对象.nodeType 获取DOM对象类型值1为元素节点，值2为属性节点，值3为文本节点
3. DOM对象.nodeValue 获取或修改dom对象的文本，注意必须是dom对象下的首个元素
4. DOM对象.firstChild 获取一个元素的第一个子节点
5. DOM对象.lastChild 获取一个元素的最后一个子节点
6. onclick为html元素绑定点击事件参数this为当前触发对象，return false可以阻止默认行为
7. window.οnlοad=方法 页面加载时调用回调方法