案例

html部分

<h1 id="title">图片1</h1>
<ul>
	<li>
	    <!-- onclick绑定点击事件，this为触发dom，return false阻止默认行为 -->
	    <a onclick="show_img(this); return false" title="图片1" href="./static/20180529205331_yhGyf.jpeg" target="_self">
	        连接一
	    </a>
	</li>
	<li><a onclick="show_img(this); return false" title="图片2" href="./static/20190214214253_hsjqw.webp" target="_self">
	        连接二
	    </a></li>
	<li><a onclick="show_img(this); return false" title="图片3" href="./static/20190908084721_rjhtr.png" target="_self">
	        连接三
	    </a></li>
	<li><a onclick="show_img(this); return false" title="图片4" href="./static/20200205192210_tKHiT.jpeg" target="_self">
	        连接四
	    </a></li>
</ul>
<img id="img" style="width: 300px;height: 300px;" src="./static/20180529205331_yhGyf.jpeg" alt="">

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=方法 页面加载时调用回调方法