ES6 JS获取元素api&& Dom 常用遍历方法含源码（1107）

ES6 实例演示二个获取元素的api

querySelector/querySelectorAll与getElementby相比较优势是：可以使用 CSS 风格的 Selectors；并且几乎支持所有CSS选择器的 syntax 风格

querySelector()
文档对象模型Document引用的 querySelector() 方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项，则返回null。

    const ul = document.querySelector('ul'); //等同于 document.getElementbyTagname('ul')[0]
    console.log(ul);
    //如果页面中有ul标签，则打印第一个<ul>...</ul>,如无，则打印null

querySelectorAll()

返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。

    const ul = document.querySelectorAll('ul'); // 等同于 document.getElementbyTagname('ul')
    console.log(ul);
    // 如果页面有ul标签，则打印所有ul的集合，例如：NodeList(2) [ul, ul]...

实例演示dom常用的遍历方法

nodeType 节点类型，常见值：1，元素节点；3，元素或属性中的文字；9，文档类型节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul class="list"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul>
  <ul class="listWithWrap">
    <li>listwithwrapItem1</li>
    <li>listwithwrapItem2</li>
    <li>listwithwrapItem3</li>
  </ul>
  <script>
    const list = document.querySelector('.list');
    const listWithWrap = document.querySelector('.listWithWrap');
    // nodeType 节点类型
    console.log("---------nodeType---------");
    console.log(
      "list nodeType:" + list.nodeType + 
      "\nlistWithWrap nodeType: " + listWithWrap.nodeType);
    // 都是ul开头，所以都是html标签，即 nodeType == 1 == Node.ELEMENT_NODE
    // 1. 所有子节点: childNodes
    console.log("--------childNodes----------");
    let listItems = list.childNodes;
    let listWithWrapItems = listWithWrap.childNodes;
    console.log(
      "listItems.childNode[0].nodeType=" + listItems[0].nodeType
      +
      "\nlistWithWrapItems.childNode[0].nodeType=" + listWithWrapItems[0].nodeType
      )
      //list 没有换行，所以第一个childNode 是'li标签',是一个html标签, 即 nodeType == 1 == Node.ELEMENT_NODE
      // listWithwrap 有换行，所以第一个childNode 是 '\n'，是一个文本，即 nodeType == 3 == Node.TEXT_NODE,
    // listWithWrap为什么是11个,因为有6个文本类型节点(text:`\n`),5个元素类型节点(`li`)
    // 类数组
    // 1. Array.from
    console.log("---------from-----------")
    console.log(Array.from(listItems))
    console.log(Array.from(listWithWrapItems))
    // 2. ...rest
    console.log("---------rest-----------")
    // ...在这里是把数组中的元素展开
    console.log([...listItems])
    console.log([...listWithWrapItems])
    // 转为数组之后,Array很多API都可以用
    // 要求只返回“元素类型的节点”
    let resultListItems = [...listItems].filter(item => item.nodeType === 1)
    let resultListWithWrapItems = [...listWithWrapItems].filter(item => item.nodeType === 1)
    console.log("-------只返回元素类型节点-------")
    console.log(resultListItems)
    console.log(resultListWithWrapItems)
    console.log("------------封装函数----------------")
    // 封装
    const getChildren = items => [...listItems].filter(item => item.nodeType === 1)
    // 使用这个API
    console.log(getChildren(listItems))
    console.log(getChildren(listWithWrapItems))
    // js已经给我们封装好一个属性 children
    console.log("---------js已定义属性children----------")
    // 2. children : 所有子元素节点 
    console.log(list.children)
    console.log(listWithWrap.children)
    // children : 类数组
    // 3. 第一个子元素
    // ele.textContent: 元素内的文本
    console.log("----------------element.textContent----------------")
    console.log(list.children[0].textContent)
    console.log(listWithWrap.children[0].textContent)
    // 语法糖
    console.log("------------------语法糖-----------------------------")
    console.log("------------firstElementChild-----------------")
    let first = list.firstElementChild
    console.log(first.textContent)
    // 4. 后一个兄弟
    console.log("------------后一个兄弟:first-child + * ，与css选择器相同-----------------")
    let next = list.querySelector(':first-child + *')
    next.style.color = 'blue'
    next = first.nextElementSibling
    console.log(next.style);
    console.log("------------第三个兄弟:nth-of-type(3) ，与css选择器相同-----------------")
    let third = listWithWrap.querySelector(':nth-of-type(3)');
    third.style.color = '#2900e8';
    third.style.fontWeight = 'bolder';
    console.log(third.style)
    // 5. 最后一个
    console.log("----------------最后一个：lastElementChild ---------------")
    let last = list.lastElementChild
    last.style.color = 'red'
    console.log(last.style);
    // 6. 前一个兄弟
    console.log("------------------前一个兄弟：previousElementSibling--------------------------")
    let prev = last.previousElementSibling
    prev.style.color = 'violet'
    console.log(prev.style);
    // 7. 父节点: 一定是元素或文档类型
    console.log("------------------list父节点：parentNode-------------------------------")
    let parent = list.parentNode
    console.log(parent);
    parent.style.border = '1px solid';
      // 8. 遍历
      // 在 [],{},()前分号不能省
              // 正确写法
    [...list.children].forEach(item => (item.style.border = '1px solid red'));
      // 为什么不能让list直接用forEach,因为querySelector/querySelectorAll返回的是一个元素集，不是 NodeList
      // 需要先用...展开成一个数组
      // 以下代码会报错
      console.log(listWithWrap);
      listWithWrap.forEach(
        (item) => 
        alert('aaa')
        );

ES6 JS获取元素api&& Dom 常用遍历方法 含源码（1107）

ES6 实例演示二个获取元素的api

实例演示dom常用的遍历方法

相关文章