节点操作 获取节点对象 名称内容

节点操作

 <div>我是建立的div标签</div>
  <script>
    // 节点的操作
    // 节点的 新增 删除 克隆 写入

    // 节点的创建
    // 创建标签节点: document.createElement('标签名称');
    //              创建的是一个标签对象
    //              之前是设定字符串,写入HTML文件,浏览器执行为标签效果
    // 创建文本节点: document.createTextNode('要创建的文本内容');

    // 现在创建的是一个对象,要操作标签的内容,属性属性值等,必须要通过对象的方法来设定

    var oDiv = document.createElement('div');
    // 使用操作对象的方式,给标签添加设定
    oDiv.id = 'div1';
    // setAttribute,来设定自定义属性
    oDiv.setAttribute('index' , 1);
    console.dir(oDiv);

    var oText = document.createTextNode('要创建的文本内容');
    console.log(oText);


    // 删除节点 删除当前标签中的子级节点
    // 当前标签.removeChild('你要删除的节点')

    // 克隆节点 克隆复制当前节点对象
    // 只克隆标签本身 当前标签.cloneNode();
    // 克隆标签以及标签内容 当前标签.cloneNode(true);

    // 写入节点 
    // 当前标签.appendChild(你要写入的标签对象)  在当前标签结束位置写入
    // 当前标签.insertBefore(你要写入的标签对象 , 在哪个子级标签前)  在当前标签,子级标签之前,写入

    // 一个标签对象,只会出现在最后一次写入的位置
    // 相对对于将一个标签对象,多次写入,从上一个位置,会移动到下一个位置
    // 只会出现在最后一个位置

    var d = document.querySelector('div');

    d.appendChild(oText);

    d.insertBefore(oDiv , d.firstChild);


    d.appendChild(oDiv);

获取节点对象

<!-- 我是注释1 -->

<div name="div" index="1" href="aaa" checked>我是标签div

    <!-- 我是注释2 -->
    
    <span>我是标签span</span>

</div>

<!-- 我是注释3 -->
<p>我是标签p</p>

<script>
    // 获取节点对象的方法

    var oDiv = document.querySelector('div');

    // 1,获取当前标签中所有的子级节点
    // 执行结果,是一个伪数组,可以forEach()
    // 形式是与 querySelectorAll() 获取的伪数组是一样的
    console.log( oDiv.childNodes );

    // 2,获取当前标签中,所有的元素节点/标签节点
    // 执行结果,是一个伪数组,不能forEach()
    // console.log( oDiv.children );

    // 3,获取当前标签中,第一个节点
    // 执行结果,是一个对象,内容形式与DOM操作方式,获取的内容是一样的
    console.dir( oDiv.firstChild );

    // 4,获取当前标签中,最后一个节点
    // 执行结果,是一个对象,内容形式与DOM操作方式,获取的内容是一样的
    // console.dir( oDiv.lastChild );
    // console.dir( document.querySelector('span') );

    // 5,获取当前标签中,第一个标签节点,其他节点不会获取
    // console.log( oDiv.firstElementChild );

    // 6,获取当前标签中,最后一个标签节点,其他节点不会获取
    // console.log( oDiv.lastElementChild );

    // 7,获取当前标签,上一个兄弟节点(找哥哥)
    // 如果没有执行结果是null
    // console.log( oDiv.previousSibling );

    // 8,获取当前标签,下一个兄弟节点(找弟弟)
    // 如果没有执行结果是null
    // console.log( oDiv.nextSibling );

    // 9,获取当前标签,上一个兄弟元素节点(找标签哥哥)
    // console.log( oDiv.previousElementSibling );

    // 10,获取当前标签,下一个兄弟元素节点(找标签弟弟)
    // console.log( oDiv.nextElementSibling );

    // 11,获取当前标签,父级节点
    // 只获取直接父级节点
    // console.log( oDiv.parentNode );
    // console.log( document.querySelector('span').parentNode );

    // 12,获取当前标签,所有属性节点
    // 执行结果,是一个伪数组,不能forEach()
    // console.log( oDiv.attributes );

    // 总结
    // 1,通过节点操作获取的对象/伪数组与通过 DOM操作的对象/伪数组,形式上是一致的
    //   可以相互操作,DOM方法可以操作 节点对象
    //               节点方法可以操作 DOM对象
    // 2,执行结果,伪数组/对象
    //   伪数组有的可以forEach, 有的不能forEach
    //   

名称内容

    // 节点的类型,名称,内容
    
    // 节点的类型: 对象.nodeType 属性中存储,数据是 一个数值
    //   元素节点/标签节点 : 1
    //   属性节点 : 2
    //   文本节点 : 3
    //   注释节点 : 8

    // 节点的名称: 对象.nodeName
    //   元素节点/标签节点 : 大写字母的 标签名称 
    //   属性节点 : 小写字母的 属性名称
    //   文本节点 : #text
    //   注释节点 : #comment

    // 节点的内容: 对象.nodeValue
    //   元素节点/标签节点 : null
    //   属性节点 : 属性的属性值
    //   文本节点 : 文本内容,包括换行和空格
    //   注释节点 : 注释内容,包括换行和空格