js基础-节点查找

div id="box">
        <img width="150" height="200" src="https://img2.baidu.com/it/u=1890746833,878440754&fm=26&fmt=auto" ><h1>喜欢的水果</h1>
       
        <p>123</p></div>
        
   
        /* parentNode	返回节点的父节点 */
        /* let img = document.querySelectorAll('img');
        console.log(img); */
        /* let img = document.querySelector('img');
        img.parentNode.style.background = 'red';
        console.log(img.parentNode); */

        /* childNodes	返回子节点集合，childNodes[i] */
        /* 换行算一个节点 text*/
        /* let box = document.getElementById('box'); */
        /*  console.log(box.childNodes) */
        /* firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 */
        /* console.log(box.firstChild) */
        /* lastChild	返回节点的最后一个子节点 */
       /*  console.log(box.lastChild) */
       /* nextSibling	下一个节点 */
       /* previousSibling	上一个节点 */
       /* let h1 = document.getElementsByTagName('h1')[0];
       console.log(h1.previousSibling); */