22.10.5 Js 笔记 DOM节点操作 获取元素的常规方法 节点层级的定义 获取元素的节点操作方式

<ul>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
</ul>

<ol>
    <li>2</li>
    <li>2</li>
    <li>2</li>
    <li>2</li>
    <li>4</li>
</ol>

<script>
    // 节点操作
    // 通常获取元素的方式是利用DOM提供的方法获取元素  如下面几种方式
    // document.getElementById();
    // document.getElementsByTagName();
    // document.querySelector
    //  可利用节点层级关系获取元素
    // 利用父子兄关系获取元素  优点是逻辑性强，缺点是兼容性较差

    // 节点概述   页面中所有内容都可以是节点  在DOM中，节点使用node来表示。
    // 一般节点 至少拥有 nodeType(节点类型) nodeName(节点名称)和nodeValue(节点值)这三个基本属性
    // 元素节点 nodeType 为1
    // 属性节点 nodeType 为2
    // 文本节点 nodeType 为3(包含文字，空格，换行等)

    // 实际开发中，主要操作的是元素节点

    // 节点层级  父节点prentNode 
    var erweima = document.querySelector('.erweima');
    // var box = document.querySelector('.box');
    console.log(erweima);
    // 得到的是离的最近父节点  如果找不到则返回为空  null
    console.log(erweima.parentNode);

    // 字节点

    // 获取ul中的li  老方法
    var ul = document.querySelector('ul');
    var lis = ul.querySelectorAll('li');
    console.log(lis);  //老方法
    console.log(ul.childNodes);  //标准方法 还需用for循环通过nodeType筛选出来
    console.log(ul.children);  //非标准 不过各大浏览器承认无兼容性问题

    //  节点层级
    var ol = document.querySelector('ol');
    console.log(ol.firstChild);
    console.log(ol.lastChild);  //  第一个节点不管是文本节点还是元素节点都获取
    console.log(ol.firstElementChild);  //  返回第一个子元素节点，找不到则返回null，只支持i9以上版本

    // 实际开发的写法
    console.log(ol.children[0]);
    console.log(ol.children[ol.children.length - 1]);


</script>