DOM中进行的节点的操作

写出节点的类型

HTML的结构

<div class="father">
<div></div>
<p class="son">儿子
<span>1</span>
<span>2</span>
<span>3</span>
</p>
<div></div>
</div>
<a   id="a1"  href="www.baidu.com" >
百度
 <!-- 我是注释节点 -->
 </a>

节点类型相关的节点 文档节点 属性节点 文本节点 注释节点 元素节点

     **进行获取文档节点**
     console.log( document.nodeName);   //#documnet
     console.log( document.nodeType);   //9
     console.log( document.nodeValue);  //null

   **属性节点**
    let href = document.querySelector('a');
    let hrefValue = href.getAttributeNode('href');
    console.log( hrefValue.nodeType);  //2
    console.log(  hrefValue.nodeName); //属性名
    console.log(   hrefValue.nodeValue); //属性值

  **元素节点**
      let father = document.querySelector('.father');
      console.log(father.nodeType); //1
      console.log(father.nodeName); //大写的标签名子
      console.log(father.nodeValue); //null

 /**/文本节点 在标注浏览器中 换行和空格也属于文本节点**
      let text = a1.childNodes[0];
      console.log(text.nodeType); //3
      console.log(text.nodeName); //#text
      console.log(text.nodeValue); //内容
      //注释节点

       **注释节点**
      let  nodeNext = a1.childNodes[1];
      console.log(nodeNext.nodeType); //8
      console.log(nodeNext.nodeName); //#comment
      console.log(nodeNext.nodeValue); //我是
    // **************************************************************

元素类

下面关于语法的学习 获取类名son 的p 标签

let node1 = document.querySelector(‘.son’)
1 获取元素类的 获取所有子元素的集合
2找上一个兄弟节点
3找下一个兄弟节点
4找第一个子元素
5找最后一个子元素

    console.log(node1.children);
    console.log(node1.lastElementChild);
    console.log(node1.firstElementChild);
    console.log(node1.previousElementSibling);
    console.log(node1.nextElementSibling);
    console.log('************************************');

节点类

  // 2 获取节点类的
    console.log(node1.parentNode);
    console.log(node1.firstChild); //得到内容儿子
    console.log(node1.lastChild);//文本节点
    console.log(node1.previousSibling);
    console.log(node1.nextSibling);
    console.log(node1.childNodes);