DOM和DOM操作｜青训营笔记这是我参与「第四届青训营」笔记创作活动的第1天 1：DOM和DOM操作 1-1初始D

这是我参与「第四届青训营」笔记创作活动的第1天

1：DOM和DOM操作

1-1初始DOM

DOM是前端核心内容

DOM可以将web页面与脚本或编程语言连接起来

// DOM 映射
//html 就是树结构

树根 DOCUMENT ,也称为整个页面的文档
HTML标签为 DOM节点，英文为Node或者Element
子标签是儿子节点
儿子节点后面是孙子节点
p和H1的长辈是p和H1的祖先节点
p,H1是亲兄弟，称为亲兄弟节点

1-2访问DOM

windown.document;   //获取全局变量

//选择器查询  querySelector();
//基础筛查条件
document.querySelector('.subtitle');
//加上父亲筛选
document.querySelector('main .core .subtitle');

//迭代查询
let subtitle = doucument.querySelector('main .core .subtitle');
console.log(subtitle.querySelector('a'));
//查询subtitle 中的 a标签

//选择器全局查询
document.querySelectorAll('input');
//在全局查询input，返回的是NodeList 数组

//其它筛选方法
getElementByld() //根据id查询某个节点
getElementsByClassName() // 根据class查询多个节点
getElementsByTagName()  //根据标签名查询多个节点

querySelector //不会随着页面DOM节点改变而改变
get...//会随着DOM节点变化而变化

1-3 DOM属性

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>优课达</title>
</head>
<body>
  <div id="test">优课达</div>
  <script src="./index.js"></script>
</body>

let divDom = document.queryselector('div#test');
console.log(divDom.nodeType,divDom.nodeName,divDom.nodeValue);
//nodeType 获取文本内容
//nodeName 获取标签名称
//attrbutes 获取元素的所有属性
#outterHTML 整个DOM的HTML代码
#innerHTML DOM内部HTML代码
#innerText DOM内部纯文本内容

DOM亲属

#firstChild  指定节点的第一个节点
#lastChild 
#childNodes 指定节点的子节点的集合
#parentNode 指定节点在DOM树中的父节点

DOM 样式

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>优课达</title>
</head>
<body>
  <h1 class="test youkeda" style="color: #FF3300; font-size: 24px;">优课达</h1>
  <script src="./index.js"></script>
</body>

const h1Dom = document.queryselector('h1');
console.log(h1Dom.classList);

#classList 数组 存储所有class名称
#style 存储CSS的style

DOM数据属性

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>优课达</title>
</head>
<body>
  <article data-parts="3" data-words="1314" data-category="python">
    ...
  </article>
  <script src="./index.js"></script>
</body>

const article = document.querySelector('article');
console.log(article.dataset);

1-4DOM操作(一)

创建标签节点

document.createElement(tagName) 创建一个标签名称为tagName的元素(标签)节点

const div = document.createElement('div');

document.createTestNode(string) 在标签内加文本内容

const txt = document.createTestNode("xxxx");

添加新节点

appendChild(newNode) 在节点内插入儿子节点(插在末尾)

inserBefore(newNode, referenceNode) 在某个节点后面插入新节点

设置样式、属性

img.setAttribute('style','width: 100%;height: 100%');

dom.style.color = 'xxx';

classList 可以获取DOM上的所有类
innerHTML

innerHTML = ' '清空select节点所有后代内容

1-5DOM操作(二)

监听Input 输入事件，处理区域显示隐藏

const input = documnet.querySelect('input');
// 监听键盘事件
input.addElementListener('keyup', function() {
// this 是DOM节点，this.value可以获取input内输入的值
    console.log(this.value);
})

监听输入肺炎，显示肺炎查询结国

/** 通过display: block/none 控制显示或不显示 */
input.addElementListener('keyup', function () {
    if(this.value == '肺炎') {
        login.style.disply = 'none';
        searchResult.style.display = 'block';
    } else {
        login.style.display = 'block';
        searchResult.style.display = 'none';
    }
}

肺炎搜索结果动态显示

let data = [
  '<em>肺炎</em>实时疫情动态',
  '<em>肺炎</em>的症状有哪些症状',
  '<em>肺炎</em>武汉',
  '<em>肺炎</em>症状',
  '<em>肺炎</em>最新',
  '<em>肺炎</em>是怎么引起的',
  '<em>肺炎</em>最新消息',
  '<em>肺炎</em>实时',
  '<em>肺炎</em>症状及表现',
  '<em>肺炎</em>最新情况'
];

function createSearchItem(txt) {
  const item = document.createElement('li');
  item.innerHTML = `<i class="search"></i><p>${txt}</p><i class="edit"></i>`;
  return item;
}
/** 在if(this.value == '肺炎')下面 */
for(let i = 0;i < data.length;i++){
    searchResult.appendChild(createSearchItem(data[i]));
}

2. DOM事件

2-1 DOM事件

格式 addEventListener(eventName, callback)

焦点事件

focus: 表单组件获取焦点事件

blur: 表单组件失去焦点事件

鼠标事件

click: 点击事件 dblclick: 双击事件 mousedown: 在元素上按下任意鼠标按钮

mouseenter: 指针移到有事件监听的元素内；mouseleave: 指针移出元素范围外(不冒泡)

mouseover: 指针移到有事件监听的元素或者它的子元素内

mouseout: 指针移出元素，或者移到它的子元素上 mouseup: 在元素上释放任意鼠标按键

键盘事件

keydown: 键盘按下事件 keyup: 键盘释放事件

视图事件

scroll: 文档滚动事件 resize：窗口缩放事件

资源

load：资源加载成功的事件

2-2 点击事件

点击按钮后做出来一系列的反应

通过增加/删除便签来实现

let haslike = false;

const likeBtn = document.querySelector(".like-btn");
likeBth.addEventListener("click",function() {
   haslike = !halike;
    if(haslike) {
        likeBtn.classList.add("has-like");
    } else {
        likeBtn.classList.remove("has-like");
    }
});

2-3 冒泡、捕获、委托

在工程模板添加点击事件

const workspace = document.querySelector('.worspace');
workspace.addEvenListener('.click', function() {
    window.location.href = 'xxx';
})

冒泡

冒泡：当点击子元素后会依次冒泡直到HTML根元素为止

阻止冒泡 - e.stopPropagation();

likeBtn.addEventListener('click', function() {
    e.stopPropagation();
})

捕获

捕获与冒泡完全相反，捕获是从根HTML节点开始依次移动到当前元素

dom.addEventListener('click',function() {} ,true);

委托

委托是冒泡时间的一种应用

此处举例，点击照片切换背景照片

冒泡写法

const box = document.querySelector('.box');
const imgArr = box.children;

for(let i = 0;i < imgArr.length;i++) {
    imgArr[i].addEventListener('click',function() {
        document.body.style.backgroundImage = `url({imgArr[i].src})`;
    });
}

委托写法

const box = document.querySelect('.box');

box.addEventListener('click',function() {
    if(e.target.nodeName == 'IMG') {
        document.body.style.backgroundImage = `url(${e.target.src})`;
    }
});

2-4 移动事件

鼠标移动事件

mouseenter: 指针移动到有事件监听的元素内。

mouseleave: 指针移出元素范围外（不冒泡）。

mousemove: 指针在元素内移动时持续触发。

mouseover: 指针移动到有事件监听的元素或者它的子元素内。

mouseout：指针移出元素，或者移动到它的子元素上。

2-5 表单元素事件

焦点事件

获取焦点：focus

失去焦点：blur

//写法
const nick = document.querySelector('input.nick');
nick.addEventListener('focus',function() {
    console.log("获取焦点");
});

内容值变化

监听元素内容变化

input和change

//写法
const nick = document.querySelector('input.nick');
nick.addEventListener('input',function() {
    console.log("----input");
    console.log(nick.value);
});

事件	介绍	案例
change	当用户提交对元素值的更改时触发；change事件不一定会对元素值的每次更改触发	1.checkbox值修改以后。2. select选择后。3.input内容修改并失去焦点
input	只要value值修改就会触发

2-6 滚动事件

事件描述

滚动事件 ---Scroll

window.addEventListener('scroll',function() {
    console.log(window.scrollY);
    //输出Y轴滚动距离
})

无尽滚动

window.addEventListener('scroll', function () {
  // 可以通过clientHeight获取内容高度
  const height = document.body.clientHeight;

  // 通过screen.height获取浏览器的高度
  const screenHeight = window.screen.height;

  // 当距离底部的距离小于500时，触发页面新增内容
  if (height - window.scrollY - screenHeight < 500) {
    console.log('加载新文章内容');
    // 在底部添加10张图片
    const div = document.createElement('div');
    let str = '';
    for (let i = 0; i < 10; i++) {
      str += `
       <img
        class="first"
        alt=""
        src="xxx"
      />
      `;
    }
    div.innerHTML = str;
    document.body.appendChild(div);
  }
});

内容高度document.body.clientHeight
浏览器高度window.screen.height
滚动距离window.scrollY
滚动距离底部距离内容高度 - 浏览器高度 - 滚动距离

DOM和DOM操作 ｜ 青训营笔记