JavaScript系列之 Web API篇Dom,Bom

Posted 2021-06-29 coderkey

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript系列之 Web API篇Dom,Bom相关的知识，希望对你有一定的参考价值。

一，DOM导读

Web API 是浏览器提供的一套操作浏览器功能（BOM）和页面元素（DOM）的API。

1，DOM 简介

1.1，什么是DOM

（1）含义：

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

1.2，DOM树

（1）含义：

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

2，获取元素

2.1，根据 ID 获取

（1）含义：

使用 getElementById() 方法可以获取带有 ID 的元素对象。

（2）语法：

document.getElementById('ID名' )

（3）注意：

1，因为文档页面从上往下加载，所以先有标签，然后才能getElementById
2，参数是字符串，所以需要加引号。
3，返回的是一个 element 对象。
4，console.dir 可以打印返回的元素对象，更好的查看里面的属性和方法。

2.2，根据标签名获取

（1）含义：

使用 getElementsTagName() 方法可以返回所有带有指定标签名的元素对象的集合。

（2）语法：

document.getElementsTagName('标签名' ) //返回所有指定标签名的对象集合
element.getElementsTagName('标签名' ) //获取某个元素（父元素）内部所有指定标签名的子元素。父元素必须是单个对象（必须指明是哪一个元素对象），获取时候不包括父元素自己。

（3）注意：

1，参数是字符串，所以需要加引号。
2，得到的是对象的集合，以伪数组的形式储存，可以用遍历来获取所有对象。
3，得到的是动态的。

（4）例如：

  例子: 获取ol里面的li。
  <body>
  <ul>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
  </ul>
  <ol>
  <li>123一二三四五</li>
  <li>123上山打老虎</li>
  <li>123老虎有几只</li>
  <li>123快来数一数</li>
  <li>123一二三四五</li>
  </ol>
  <script>
  var ol = document.getElementsByTagName('ol');
  //伪数组不能做父元素
  var list = ol[0].getElementsByTagName('li');
  console.log(list);  //打印ol里面所有li元素对象的集合
  console.dir(list);
  </script>
  </body>

2.3，根据类名获取

（1）含义：

使用 getElementsByClassName() 方法可以返回带有指定类名的元素对象的集合。

（2）语法：

document.getElementsClassName('类名')

（3）注意：

1，参数是字符串，所以需要加引号。
2，得到的是对象的集合，以伪数组的形式储存。

2.4，通过HTML5新增的方法获取

（1）语法：

document.querySelector('选择器'); // 返回指定选择器的第一个元素对象。
document.querySelectorAll('选择器'); // 返回指定选择器的所有元素对象的集合。

（2）注意：

里面选择器需要加符号，如.box , #box

2.5，获取特殊元素（body，html）

（1）获取body元素：

document.body //返回body元素对象

（2）获取html元素：

document.documentElement //返回html元素对象

3，事件基础

3.1，事件概述

（1）含义：

javascript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些触发JavaScript的事件。

（2）事件由三部分组成：

获取事件源：事件被触发的对象比如按钮。
绑定事件类型：如何触发比如鼠标点击、鼠标经过、键盘按下、滚动滚轮。
添加事件处理程序：通过函数赋值的方式完成。

（3）例如：

  <button id="btn">按钮</button>
  <script>
    var btn = document.getElementById('btn');
    btn.onclick = function ( ) {
        alert('触发事件');
    }
  </script>

（4）常见的鼠标事件都有：

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

4，操作元素

4.1，操作元素内容

（1）语法：

element.innerHTML
element.innerText

（2）例如：

  <div></div>
  <script>
  var div = document.querySelector('div');
  div.innerHTML = 'hello world';
  </script>

（3）注意：

1，innerText从起始位置到终止位置的内容，但它去除Html标签，同时空格和换行也会去掉。
2，innerText不识别HTML标签。
3，innerHTML从起始位置到终止位置的全部内容，包括Html标签，同时保留空格和换行。
4，innerHTML能识别HTML标签。
5，可读写的，可以获取元素里面的内容。

4.2，操作常见元素属性

（1）常用属性的属性操作：

src 、 href 、id 、 alt 、 title

4.3，操作表单元素属性

（1）表单元素的属性：

type、value、checked、selected、disabled

（2）例如：

  <button>按钮</button>
  <input type="text" value="输入内容" />
  <script>
   //1,获取元素
   var btn = docuemnt.querySelector("button");
   var input = document.querySelector("input");
   //2,注册事件 ，处理程序
   btn.onclick = function () {
   //表单里面的值，文字内容是通过value修改的，不是innerHTML。
    };
    input.value = "被点击了";
    //disabled 让某个表单被禁用，不能被点击
    btn.disabled = true;
    //或者写成下面这种
    this.disabled = true;
    //this指向的是时间函数的调用者
   </script>

4.4，操作元素样式属性

（1）含义：

可以通过 JS 修改元素的大小、颜色、位置等样式。

4.4.1，行内样式操作

（1）含义：

行内样式操作，修改元素样式，如果样式比较少或者功能简单的情况下使用。

（2）语法：

element.style

（3）例如：

  <div></div>  
  <!-- width: 200px;
  height: 200px;
  backgroundColor = 'red'; -->
  <script>
  //1,获取元素
  var div = document.querySelector('div');
  //2,注册事件 处理程序
  div.onclick = function( ) {
      this.style.backgroundColor = 'pink';   //this可以改成div
      this.style.width = '300px';
   }
  </script>

（4）注意：

1，里面的属性是驼峰命名法。
2，JS修改的是行内样式，权重比CSS的高。

4.4.2，类名样式操作

（1）含义：

类名样式操作，适合样式比较多或者功能比较复杂的情况下使用，修改了元素的类名。

（2）语法：

element.className

（3）例如：

  <div></div>  
  <!-- width: 200px;
  height: 200px;
  backgroundColor = 'red'; -->
  <script>
  //1,获取元素
  var div = document.querySelector('div');
  //2,注册事件 处理程序
  div.onclick = function( ) {
      this. className   =  'change';   // 给div添加类名'change' 属性在CSS样式里面写。
    }   
  </script>

  //这个方法直接修改了类名，也就是说会覆盖原来的类名，原来的就不生效了， 如果想要保留原
  先的类名，这样做：
  //假设first 是原来的类名，change是想加入的
  this.className = 'first change';

（4）注意：

className 会直接更改元素的类名，会覆盖原先的类名。

4.5，排他思想（算法）

（1）问题：

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法。

（2）方法：

1，所有元素全部清除样式。
2，给当前元素设置样式。

（3）例如：

  两层循环，先排除其他人，然后再设置自己的样式
    <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 ( ) {
            //  1. 先把所有颜色的背景颜色都清空
            for (var j = 0; j < btns.length; j++) {
                btns[j].style.backgroundColor = '';
            }
            //  2. 再把想要的背景颜色改成pink
            this.style.backgroundColor = 'pink';
        }
    }
   </script>

4.6，操作自定义属性
4.6.1，获取属性值

（1）语法：

element.属性 //获取内置属性值（元素自带的属性）
element.getAttribute('属性') // 主要获取自定义的属性（标准），我们定义的属性。

（2）例如：

  <div id = "demo"  index = "1"></div>  
    <script>
      var div = document.querySelector('div');
      //1,element.属性
      console.log(div.id);     // demo
      //element.getAttribute('属性')
      console.log(div.getAttribute('id'));     // demo
       console.log(div.getAttribute('index'));     // 1
    </script>

4.6.2，设置属性值

（1）语法：

element.属性 = '值'； // 设置内置属性值
element.setAttribute('属性', '值')； // 主要更改自定义的属性。

（2）例如：

  <div id = "demo"   class = "one"   index = "1"></div>  
    <script>
     var div = document.querySelector('div');
     //1,element.属性 = '值'
     div.id = 'demo2';
     div.className = 'two';
     //2,element.getAttribute('属性', '值');
     div.setAttribute('index',2);
     div.setAttribute('class', 'footer');
    </script>

4.6.3，移除属性

（1）语法：

element.removeAttribute('属性') // 主要移除自定义的属性（标准）

4.7，H5自定义属性

（1）含义：

但是有些自定义属性容易引以歧义，不容易判断是内置属性还是自定义属性，所以H5给我们新增了自定义属性 H5规定自定义属性以 “data-” 开头。

（2）语法：

兼容性：element.getAttribute('属性')
H5新增：element.dataset.index 或者element.dataset[ 'index' ] //只能获取date-开头属性

（3）例如：

  <div data-list-name="andy"></div>
  <script>
  var div = document.querySelector('div');
  console.log(div.getAttribute('data-list-name'));
  //上下三种方法都可以，但是如果用下面这两种方法的话，要用驼峰命名法
  console.log(div.dataset.listName);
  console.log(div.dataset['listName']);
  </script>

5，节点操作

5.1，为什么使用节点操作

（1）含义：

1，利用DOM提供的方法获取元素（逻辑性不强，繁琐）
document.getElementById( )
document.getElementByTagName( )
document.querySelector 等等
2，利用（简单、符合逻辑）
利用父子兄的节点关系获取元素
逻辑性强，但是兼容性差

5.2，节点概述

（1）含义：

页面中所有的内容（标签、属性、文本、注释等）都是节点。节点用node表示。
HTML DOM树中的所有节点均可通过 JavaScript 进行访问，所有HTML节点均可被修改，也可以创建或删除。
一般的，节点至少由nodeType（节点类型）、 nodeName（节点名称）、 nodeValue（节点值）这三个基本属性。
元素节点 nodeType 为1
属性节点 nodeType 为2
文本节点 nodeType 为3 （文本节点包括文字、空格、换行等等）
在实际开发中，节点操作主要操作的是元素节点。

5.3，节点层级

（1）含义：

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

5.3.1，父级节点

（1）语法：

node.parentNode

（2）例如：

  <div class="box1">
      <div class="box2">
        <span class="one"></span>
      </div>
  </div>
  <script>
      //1,父节点 parentNode
      var one = document.querySelector('.one');
      console.log(one.parentNode);  //得到的离元素最近的父级节点.box2
  </script>

（3）注意：

得到的离元素最近的父级节点（亲爸爸），如果找不到就返回null。

5.3.2，子级节点

（1）语法：

1， parentNode.childNodes (标准)
// 返回包含指定节点的子节点的集合，该集合为即时更新的集合包含的子节点包含元素节点、文本节点等等。注意：换行，空格也叫节点，属于文本节点。
// 所以用 nodeType判断，用for循环遍历。
2，parentNode.children (非标准)
// 得到所有的子元素节点的集合，虽然是非标准的，但是得到了浏览器的支持，推荐使用这个。
3，parentNode.firstChild
// 返回第一个子节点，找不到返回null,不管是文本节点还是元素节点都能找到。
4，parentNode.lastChild
// 返回最后一个子节点，找不到返回null,不管是文本节点还是元素节点都能找到。
5，parentNode.firstElementChild
// 返回第一个子元素节点，找不到返回null,只返回元素节点（IE9以上才支持）
6，parentNode.lastElementChild
// 返回最后一个子元素节点，找不到返回null,只返回元素节点（IE9以上才支持）
实际开发中的办法：
parentNode.children[i]

（2）例如：

  <ol>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
  </ol>
    <script>
      var ol = document.querySelector('ol');
      console.log(ol.children);     //得到所有子元素节点li的集合
      console.log(ol.children[0]);      //得到第一个子元素节点li
      console.log(ol.children[ol.children.length - 1]);     //得到最后一个子元素节点li
    </script>

5.3.3，兄弟节点

（1）语法：

node.nextSibling // 得到下一个兄弟节点，包括元素节点和文本节点。
node.previousSibling // 得到上一个兄弟节点，包括元素节点和文本节点。
//下面两个方法只有IE9以上才能兼容。
node.nextElementSibling //得到下一个兄弟元素节点，只有元素节点。
node.previousElementSibling //得到上一个兄弟元素节点，只有元素节点。

（2）例如：

  <div>1</div>
  <span>2</span>
  <script>
    var div = document.querySelector('div');
    console.log(div.nextSibling);     // 得到一个兄弟文本节点
    console.log(div.previousSibling);     // 得到一个兄弟文本节点
    console.log(div.nextElementSibling);     // 得到一个兄弟元素节点
    console.log(div.previousElementSibling);     //找不到 null
  </script>

5.4，创建节点和添加节点

（1）语法：

1， document.createElement('tagName')
// 创建节点
2，node.appendChild(child);
// 添加节点它是追加元素，将一个节点添加到指定父节点的子节点的末尾添加。
3，node.insertBefore(child, 指定元素);
// 将一个节点添加到父节点的指定子节点的前面，类似css里面的 after 伪元素。

（2）注意：

这个方法创建由tagName指定的 HTML 元素，因为这些元素原先不存在，是根据我们的需求动态生成的，所以也称为动态创建元素节点。

（3）例如：

  <ul>
    <li>2</li>
 </ul>
  <script>
    //1,创建元素节点
    var li = document.createElement('li');
    //2，添加节点  node.appendChild(child)  node 父级   child 子级  后面追加元素
    var ul = document.querySelector('ul');
    ul.appendChild(li);
    //3，添加节点  node.inserBefore(child,指定元素); 
    var lili = document.createElement('li');
    ul.insertBefore(lili,ul.children[0]);
  </script>

5.5，删除节点

（1）语法：

node.removeChild(child); // 从DOM中删除一个子节点，返回删除的节点

（2）例如：

  <button>删除</button>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  <script>
      //1，获取元素
      var ul = document.querySelector("ul");
      var btn = document.querySelector("button");
      //2，点击按钮依次删除里面的孩子，等到里面孩子为空时，就禁用按钮
      btn.onclick = function ( ) {
        if (ul.children.length == 0) {
          btn.disabled = true;
        } else {
          ul.removeChild(ul.children[0]);
        }
      }
  </script>

5.6，复制节点（克隆节点）

（1）语法：

node.cloneNode( ) // 这个方法返回一个节点的副本

（2）例如：

  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
  </ul>
  <script>
      var ul = document.querySelector('ul');
      // node.cloneNode( );括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
      var lili = ul.children[0].cloneNode( );
      ul.appendChild(lili);
      var lilili = ul.children[0].cloneNode(true);
      ul.appendChild(lilili); //深拷贝 复制标签和内容
  </script>

（3）注意：

1，如果括号里面的参数为空，那么只是浅拷贝，即只复制节点本身，不克隆里面的子节点。（只复制标签不复制里面的内容）
2，如果括号里面的参数为true，那么是深拷贝，复制标签并且复制里面的内容。

5.7，三种动态创建元素区别

（1）语法：

document.write()
// 文档流执行完毕之后，他会导致页面全部重绘。
document.innerHTML()
// 将内容写入某个DOM节点，不会导致页面全部重绘。
// 拼接字符串的效率低。
// 创建多个元素效率更高，（不要拼接字符串，采取数组形式拼接），结构稍显复杂。 document.createElement()
// 创建多个元素效率稍低一点点，但是结构更清晰。
总结：不同浏览器下，innerHTML比createElement效率高。

以上是关于JavaScript系列之 Web API篇Dom,Bom的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript系列之Web API篇

#yyds干货盘点#dart系列之:HTML的专属领域,除了javascript之外,dart也可以

javascript入门系列 DOM篇 HTMLDOM

前端学习系列之JavaScript DOM

轻松学习JavaScript二十七：DOM编程学习之事件模型

JavaScript进阶之DOM