9.1初识DOM

文档对象模型
image.png
image.png
第九章 DOM和DOM操作（重点） - 图3
image.png

9.2访问DOM

获取DOCUMENT

  1. window.document;

重点属性
documentElement
body
head

选择器查询方法—-querySeletor()

  1. document.querySelector('main .core .subtitle');//加强筛选

迭代查询

  1. let subtitle = document.querySelector('main .core .subtitle');
  2. console.log(subtitle.querySelector('a'));

选择器全量查询
querySelectorAll()
查询HTML中的所有input节点

  1. document.querySelectorAll('input');

结果返回的一个类数组
image.png
其他查询方法
image.png
image.png
image.png

9.3DOM属性

DOM类型

  1. <!-- HTMLDocument 根文档 -->
  2. <html>
  3.   ……
  4. </html>
  5. <!-- HTMLDivElement DIV类型 -->
  6. <div class="subtitle">
  7.   ……
  8. </div>
  9. <!-- HTMLAnchorElement 超链接类型 -->
  10. <a class="free-bright">免费靓号</a>
  11. <!-- HTMLInputElement Input类型 -->
  12. <input class="password" type="pasworkd" placeholder="请输入密码" />

有很多类型可在MDN搜索Element

DOM属性
DOM属性
归纳为几个类别

  1. 元素节点
  2. 特性节点
  3. 文本节点
  4. ……其他类别不重要，忽略
    1. let divDom = document.querySelector('div#test');
    2. console.log(divDom.nodeType, divDom.nodeName, divDom.nodeValue);
    3. // 获取DIV节点的第一个儿子节点，代表 '优课达' 这个字符串
    4. let txtDom = divDom.firstChild;
    5. console.log(txtDom.nodeType, txtDom.nodeName, txtDom.nodeValue);
    6. // 获取DIV节点的id属性
    7. let attDom = divDom.attributes.id;
    8. console.log(attDom.nodeType, attDom.nodeName, attDom.nodeValue);
    image.png
    attributes **可以获取元素节点所有属性
    .id/src….
    DOM内容**
    1. let divDom = document.querySelector('div#test');
    2. console.log(divDom.outerHTML, divDom.innerHTML, divDom.innerText);
    image.png
    DOM亲属
    firstChild属性获取第一个儿子节点
    1. let divDom = document.querySelector('div#test');
    2. console.log(divDom.firstChild, divDom.lastChild);
    3. console.log('-----');
    4. console.log(divDom.childNodes);
    5. console.log('-----');
    6. console.log(divDom.parentNode);
    image.png
    DOM样式
    1. const h1Dom = document.querySelector('h1');
    2. console.log(h1Dom.classList);
    3. console.log(h1Dom.style);
    4. console.log(h1Dom.style.color);
    image.png
    DOM数据属性
    1. const article = document.querySelector('article');
    2. console.log(article.dataset);
    利用data-*
    image.png
    获取dateset获取数据

9.4DOM操作（一）

1.创建标签节点
image.png
image.png
2.添加新节点
appendChild(newNode)
appendChild()可以往该节点中插入儿子节点

image.png
3.设置样式、属性
image.png

classList
提供了基础操作的增删改查方法，可以查MDN

4.innerHTML

  1. function createDisease(txt) {
  2.   const dom = document.createElement('li');
  3.   // 我们可以直接用innerHTML设置其纯文本
  4.   dom.innerHTML = txt;
  5.   return dom;
  6. }

9.5DOM操作（二）

总结
image.png

  1. let data = [
  2.   '<em>肺炎</em>实时疫情动态',
  3.   '<em>肺炎</em>的症状有哪些症状',
  4.   '<em>肺炎</em>武汉',
  5.   '<em>肺炎</em>症状',
  6.   '<em>肺炎</em>最新',
  7.   '<em>肺炎</em>是怎么引起的',
  8.   '<em>肺炎</em>最新消息',
  9.   '<em>肺炎</em>实时',
  10.   '<em>肺炎</em>症状及表现',
  11.   '<em>肺炎</em>最新情况'
  12. ];
  13. function createSearchItem(txt) {
  14.   const item = document.createElement('li');
  15.   item.innerHTML = `<i class="search"></i><p>${txt}</p><i class="edit"></i>`;
  16.   return item;
  17. }
  18. const input = document.querySelector('input');
  19. const login = document.querySelector('.login');
  20. const searchResult = document.querySelector('.search-result');
  21. // 监听键盘事件
  22. input.addEventListener('keyup', function() {
  23.   // this 是DOM节点，this.value可以获取input内输入的值
  24.   if (this.value === '肺炎') {
  25.     // 先把原始内容清空
  26.     searchResult.innerHTML = '';
  27.     for (let i = 0; i < data.length; i++) {
  28.       searchResult.appendChild(createSearchItem(data[i]));
  29.     }
  30.     login.style.display = 'none';
  31.     searchResult.style.display = 'block';
  32.   } else {
  33.     login.style.display = 'block';
  34.     searchResult.style.display = 'none';
  35.   }
  36. });