（万字!）Web APIs学习【一】（初识Web APIs，DOM操作）

文章目录

1. 初识Web APIs

1.1Js的组成

1.1.1JS基础阶段

1.1.2 Web APIs 阶段

此阶段主要内容是页面的交互
是JS的独有部分，主要包含DOM BOM
Web APIs是W3C的标准

1.1.1.1DOM（文档对象模型）

1.1.1.2 BOM（浏览器对象模型）

1.2Web API

Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)，主要针对浏览器交互效果
Web API的学习可以参考内置对象

2. DOM简介

2.1 什么是DOM

文档对象模型(Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。通过DOM接口可以改变网页的内容，样式，结构。

2.2 DOM树

1598001948959

文档：一个页面就是一个文档，DOM中用document表示
元素：页面中所有的标签都是，DOM中用element表示
节点：网页中所有内容都是节点（标签、属性、文本、注释），DOM中用node表示
DOM把以上内容都看作对象

2.3 获取元素

2.3.1通过ID获取某一个元素

使用getElementById()方法可以获取带有id的元素对象
getElementById() 方法返回 Element对象

<body>
<div id="a">a</div>
<script>
  var a = document.getElementById('a');
  console.log(a);  // => <div id="a">a</div>
  console.dir(a);  // => div#a  此方法可以查看返回的Element对象里面的属性和方法
</script>

2.3.2 获取页面中某一类元素

2.3.2.1根据标签名获取元素

使用 document.getElementsByTagName() 方法
返回获取过来的元素对象的集合，以伪数组的形式存储,如果页面中没有此元素，返回空的伪数组
当想获取页面中所有想要元素的时候：

<body>
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>
<ol>
  <li>li4</li>
  <li>li5</li>
  <li>li6</li>
</ol>
    
<script>
  var lis = document.getElementsByTagName('li')
  console.log(lis); // => HTMLCollection(6) [li, li, li, li, li, li]
  for(var i = 0; i < lis.length; i++){
     
     
    console.log(lis[i]);  // => <li>li1</li> <li>li2</li> ... <li>li6</li>
  }
</script>
</body>

当想获取某个特定元素下所有想要元素的时候
使用 element.getElementsByTagName()方法

<body>
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>
<ol id="ol">
  <li>li4</li>
  <li>li5</li>
  <li>li6</li>
</ol>
    
<script>
  var ol = document.getElementById('ol');
  var lis = ol.getElementsByTagName('li');
  console.log(lis); // => HTMLCollection(3) [li, li, li]
</script>
</body>

2.3.2.2 根据类名获取元素

document.getElementsByClassName()方法

<body>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">
  <ul>
    <li>li1</li>
    <li>li2</li>
  </ul>
</div>

<script>
  var boxs = document.getElementsByClassName('box');
  console.log(boxs);  // => HTMLCollection(3) [div.box, div.box, div.box]
</script>
</body>

2.3.3 h5新增获取元素方法（标签名，类名, id均可）

document.querySelector()方法
此时只能获取第一个出现的元素，不能获取所有对应元素

<div class="box">box1</div>
<div class="box">box2</div>
<div id="nav">
  <ul>
    <li>li1</li>
    <li>li2</li>
  </ul>
</div>

<script>
  var firstBox = document.querySelector('.box');
  console.log(firstBox); // => <div class="box">box1</div>
  var nav = document.querySelector('#nav');
  console.log(nav);  // => <div id="nav"><ul> <li>li1</li> <li>li2</li> </ul></div>
  var firstLi = document.querySelector('li')
  console.log(firstLi); // => <li>li1</li>
</script>
</body>

document.querySelectorAll() 获取所有对应元素

<body>
<div class="box">box1</div>
<div class="box">box2</div>
<div id="nav">
  <ul>
    <li>li1</li>
    <li>li2</li>
  </ul>
</div>

<script>
  var lis = document.querySelectorAll('li');
  var boxs = document.querySelectorAll('.box');
  console.log(lis); // => NodeList(2) [li, li]
  console.log(boxs);// => NodeList(2) [div.box, div.box]
</script>
</body>

2.3.4 获取body与html元素

获取body元素和html元素

  // 1. 获取body
  var bodyElement = document.body;
  console.log(bodyElement);

  // 2. 获取html
  var htmlElement = document.documentElement;
  console.log(htmlElement);

2.4 事件基础

2.4.1 事件三要素

事件源：触发事件的对象
事件类型：如何触发，比如鼠标点击
事件处理程序：通过一个函数赋值完成

<body>
<!--事件源-->
<button id="btn"> click me </button>
</body>
<script>
  var btn = document.getElementById('btn');
  // onclick 事件类型（点击事件） 
  btn.onclick = function () {
     
     
    // 事件处理程序（function）
    alert('you have clicked') // => 弹出
  }
</script>

2.4.2 事件执行的步骤

获取事件源

var btn = document.getElementById('btn'); //还是用上面的代码说明

注册事件（绑定事件）
```
btn.onclick
```
添加事件处理程序（采用函数赋值形式）

  btn.onclick = function () {
    // 事件处理程序（function）
    alert('you have clicked') // => 弹出
  }

2.5 操作元素

js的DOM操作可以改变网络内容，结构和样式。我们可以利用DOM操作元素来改变元素里面的内容，属性等。

2.5.1 改变元素内容

element.innerText

<body>
<button>修改下面的标签的内容</button>
<div>我的内容还未被修改</div>
</body>
<script>
  var btn = document.querySelector('button');
  var div = document.querySelector('div');

  btn.onclick = function () {
     
     
    div.innerText = '这是修改后的内容'
  }
</script>

1598411761807 -

element.innerHTML

<body>
<button>修改下面的标签的内容</button>
<div>我的内容还未被修改</div>
</body>
<script>
  var btn = document.querySelector('button');
  var div = document.querySelector('div');

  btn.onclick = function () {
     
     
    div.innerHTML = `<strong>修改后的内容带上标签</strong>`
  }
</script>

element.innerText 和 element.innerHTML 区别
innerText不能识别html标签，自动去除换行和空格
innerHTML可以识别html标签，保留空格和换行，W3C标准

<body>
<p>
  <strong>
    aaaa
    6666
  </strong>
</p>
</body>
<script>
  var p = document.querySelector('p');
  console.log(p.innerHTML);
/*  =>
  <strong>
    aaaa
    6666
  </strong>
*/
  console.log(p.innerText); // => aaaa 6666
</script>

2.5.2 常用元素的属性操作

src herf id alt title 等属性都可以改变

<body>
<button id="btn1">img1</button>
<button id="btn2">img2</button>
<br>
<img src="https://image.yunyingpai.com/wp/2019/01/XWKhOwE8nestNSSZq0Uv.jpeg" alt="">
</body>
<script>
  var btn1 = document.querySelector('#btn1');
  var btn2 = document.querySelector('#btn2');
  var img = document.querySelector('img');

  btn1.onclick = function () {
     
     
    img.src = 'https://image.yunyingpai.com/wp/2019/01/XWKhOwE8nestNSSZq0Uv.jpeg'
  }
  btn2.onclick = function () {
     
     
    img.src = 'https://image.yunyingpai.com/wp/2019/01/O0vPhSvmirhl5zojMyfB.png';
  }
    
</script>

1598415816443

input 标签 value属性的改变(this的指向)

<body>
<button>点我修改表单内容</button>
<input type="text" value="请输入内容">
<script>
  var btn = document.querySelector('button');
  var input = document.querySelector('input');

  btn.onclick = function () {
     
     
    input.value = '修改后的内容';
    this.disabled = 'disabled'; // this指向事件函数的调用者 btn
  }
</script>
</body>

1598426385854

2.5.3 样式属性操作

element.style 行内样式修改

<body>
<div class="box" style="height: 500px;width: 500px;background-color: #5f25cc;"></div>
<script>
  var div = document.querySelector('div');
    
  div.onclick = function () {
     
     
    div.style.backgroundColor = '#cc1c1c';
    div.style.width = '600px';
  }
</script>
</body>

1598429386799

element.className 类名样式操作

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
     
     
      height: 60px;
      width: 60px;
      background-color: #283dff;
    }
    .change{
     
     
      height: 60px;
      width: 60px;
      background-color: #d6ff74;
    }
  </style>
</head>
<body>
<div class="box"></div>
<script>
  var box = document.querySelector('.box');

  box.onclick = function () {
     
     
    this.className = 'change'
  }
</script>
</body>

1598435904134

2.5.4 排他思想

如果某一组元素中，想要其中某个元素加上某种样式，要用到排他思想
排他思想即：清楚所有组内元素的样式，并给当前元素设置样式
做一组按钮，选中的背景颜色变为粉色，其余颜色为默认

<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
  var btns = document.querySelectorAll('button');

  for(var i = 0; i < btns.length; i++){
     
     
    btns[i].onclick = function () {
     
     
      for(var i = 0; i < btns.length; i++){
     
     
        btns[i].style.backgroundColor = '';
      }
      this.style.backgroundColor = 'pink';
    }
  }
</script>
</body>

2.5.5 属性的操作

2.5.5.1 属性的获取

element.attribute
获取元素本身自带的属性

<body>
<div id="1" index="2"></div>
<script>
  var div = document.querySelector('div')

  console.log(div.id);    // => 1
</script>
</body>

element.getAttribute(‘attribute’)
获取程序员自己定义的属性，这种用法比上一种更标准

<body>
<div id="1" index="2"></div>
<script>
  var div = document.querySelector('div')

  console.log(div.getAttribute('index'));  // => 2
</script>
</body>

2.5.5.2 属性的修改

element.attribute = newValue
设置内置属性的值

<body>
<div id="1" index="2"></div>
<script>
  var div = document.querySelector('div')

  div.id = '3';
  console.log(div.id);    // => 3
</script>
</body>

element.setAttribute(‘attribute’, ‘newValue’)
设置自定义属性（标准）

<body>
<div id="1" index="2"></div>
<script>
  var div = document.querySelector('div')

  div.setAttribute('index', '4');
  console.log(div.getAttribute('index'));  // => 4
</script>
</body>

2.5.5.3 属性的删除

element.removeAttribute(‘attribute’)

<body>
<div id="1" index="2"></div>
<script>
  var div = document.querySelector('div')

  div.removeAttribute('index');
  console.log(div.getAttribute('index'));  // => null
</script>
</body>

2.5.6 h5自定义属性

h5规定自定义属性要以data-开头

<body>
<div id="1" data-index="2"></div>
<script>
  var div = document.querySelector('div')
  console.log(div.getAttribute('data-index'));  // => 2
</script>
</body>

获取h5自定义属性

<body>
<div data-index="5" data-first-name="greenhand_coder"></div>
<script>
  var div = document.querySelector('div');

  console.log(div.dataset.firstName);  // => greenhand_coder
  console.log(div.dataset.index);   // => 5
  console.log(div.dataset); // => DOMStringMap {index: "5", firstName: "greenhand_coder"}
</script>
</body>

2.6 节点操作

2.6.1 节点概述

网页中所有的内容都是节点（标签，属性，文本，注释），在DOM中节点用node来表示，DOM树中的所有节点都可以通过JS代码访问，修改，创建，删除
节点拥有三个基本属性：nodeType（节点类型），nodeName（节点名称）和nodeValue（节点值）
元素节点nodeType为1，属性节点为2，文本节点为3
在实际开发中，主要操作元素节点

2.6.2 节点层级

2.6.2.1 父节点

node.parentNode
没有父节点则返回null

<body>
<div class="father">
  <div class="child"></div>
</div>
<script>
  var child = document.querySelector('.child');

  console.log(child.parentNode); // => <div class="father"><div class="child"></div></div>
</script>
</body>

2.6.2.2 子节点

node.childNodes
返回值包含所有子节点，包括文本节点。只想获取元素节点要过滤（nodeType判断）处理，一般不使用这种方法

<body>
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
  <li>li4</li>
  <li>li5</li>
</ul>
<script>
  var ul = document.querySelector('ul');

  var children = ul.childNodes;
  console.log(children); // => NodeList(11) [text, li, text, li, text, li, text, li, text, li, text]
  //text表示换行 第一个ul 和5个li后面都跟着换行
</script>
</body>

node.children
只读属性，字只返回元素节点（推荐）

<body>
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
  <li>li4</li>
  <li>li5</li>
</ul>
<script>
  var ul = document.querySelector('ul');

  var children = ul.children;
  console.log(children); // => HTMLCollection(5) [li, li, li, li, li]
</script>
</body>

node.firstChild 返回第一个子节点，找不到返回null，包含所有节点
node.lastChild 返回最后一个子节点，找不到返回null，包含所有节点
node.firstElementChild 返回第一个子元素节点，找不到返回null （ie9以上）
node.lastElementChild 返回最后一个子元素节点，找不到返回null（ie9以上）

<body>
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
  <li>li4</li>
  <li>li5</li>
</ul>
<script>
  var ul = document.querySelector('ul');

  console.log(ul.firstChild);  // => #text
  console.log(ul.lastChild);  // => #text
  console.log(ul.firstElementChild); // => <li>li1</li>
  console.log(ul.lastElementChild);  // => <li>li5</li>
</script>
</body>

2.6.2.3 兄弟节点

node.previousSibling 返回上一个兄弟节点，找不到返回null，包含所有节点
node.nextSibling 返回下一个兄弟节点，找不到返回null，包含所有节点
node.previousElementSibling 返回上一个兄弟元素节点，找不到返回null，ie9支持
node.nextElementSibling 返回下一个兄弟元素节点，找不到返回null，ie9支持

<body>
<ul class="father">
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>
<script>
  var father = document.querySelector('.father');
  var li2 = father.children[1];

  console.log(li2.previousSibling); // => #text
  console.log(li2.nextSibling); // => #text
  console.log(li2.previousElementSibling); // => <li>li1</li>
  console.log(li2.nextElementSibling);  // => <li>li3</li>
</script>
</body>

2.6.3 创建＆添加节点

document.createElement(‘tagName’) 创建元素节点
node.appendChild(node) 将一个节点添加到node节点的子节点列表末尾
node.insertBefore(node, targetNode) 将一个节点添加到node节点的子节点目标节点前面

<body>
<ul>
  <li>li2</li>
</ul>
<script>
  var ul = document.querySelector('ul');

  var li1 = document.createElement('li');
  li1.innerHTML = 'li1';
  var li3 = document.createElement('li');
  li3.innerHTML = 'li3';
    
  ul.appendChild(li3);
  ul.insertBefore(li1, ul.children[0]);
</script>
</body>

2.6.4 删除节点

node.removeChild 从DOM中删除一个子节点，返回删除的节点，只需输入节点，无需管顺序，会自动找到要删的节点

<body>
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>
<button>发布</button>
<script>
  var ul = document.querySelector('ul');
  var btn = document.querySelector('button');

  document.body.removeChild(btn);
  ul.removeChild(ul.children[0]);
</script>
</body>

2.6.5 复制节点

node.cloneNode() 返回node节点的副本
如果()中参数为fales/空，只复制节点本身，不复制子节点，为浅拷贝
如果参数为true，复制节点本身及所有子节点，为深拷贝

<body>
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>
<script>
  var ul = document.querySelector('ul');

  var newLi1 = ul.children[0].cloneNode();
  var newLi2 = ul.children[0].cloneNode(true);
  ul.appendChild(newLi1);
  ul.appendChild(newLi2);
</script>
</body>

2.6.6 createElement和innerHTML 效率对比

innerHTML 创建多个元素效率更高（不要用拼接字符串的方式，用数组先存储然后join合并）
createElement 效率低一点，但结构清晰

（万字!）Web APIs学习【一】（初识Web APIs，DOM操作）

文章目录

1. 初识Web APIs

1.1Js的组成

1.1.1JS基础阶段

1.1.2 Web APIs 阶段

1.1.1.1DOM（文档对象模型）

1.1.1.2 BOM（浏览器对象模型）

1.2Web API

2. DOM简介

2.1 什么是DOM

2.2 DOM树

2.3 获取元素

2.3.1通过ID获取某一个元素

2.3.2 获取页面中某一类元素

2.3.2.1根据标签名获取元素

2.3.2.2 根据类名获取元素

2.3.3 h5新增获取元素方法（标签名，类名, id均可）

2.3.4 获取body与html元素

2.4 事件基础

2.4.1 事件三要素

2.4.2 事件执行的步骤

2.5 操作元素

2.5.1 改变元素内容

2.5.2 常用元素的属性操作

2.5.3 样式属性操作

2.5.4 排他思想

2.5.5 属性的操作

2.5.5.1 属性的获取

2.5.5.2 属性的修改

2.5.5.3 属性的删除

2.5.6 h5自定义属性

2.6 节点操作

2.6.1 节点概述

2.6.2 节点层级

2.6.2.1 父节点

2.6.2.2 子节点

2.6.2.3 兄弟节点

2.6.3 创建＆添加节点

2.6.4 删除节点

2.6.5 复制节点

2.6.6 createElement和innerHTML 效率对比

猜你喜欢