DOM与BOM

丝白嘚MAN

已于 2024-03-28 11:23:02 修改

阅读量79

点赞数

分类专栏： JavaScript 文章标签：前端 javascript

于 2023-11-14 19:38:10 首次发布

本文链接：https://blog.csdn.net/qq_54825857/article/details/134339475

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、DOM

JS操作网页的编程接口，全称为“文档对象模型”（Document Object Model）。
它给文档（结构树）提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问，以改变文档的结构，样式和内容。
作用：将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。

1.节点

DOMd的最小组成单位，分为：

节点类型	值	对应常量
文档节点（document）：整个HTML文档	9	Node.DOCUMENT_NODE
元素节点（element）：html标签	1	Node.ELEMENT_NODE
属性节点（attr）：标签属性	2	Node.ATTRIBUTE_NODE
文本节点（text）：文本内容（空格与回车也是）	3	Node.TEXT_NODE
文档类型节点（DocumentType）	10	Node.DOCUMENT_TYPE_NODE
注释节点（Comment）：注释	8	Node.COMMENT_NODE
文档片断节点（DocumentFragment）	11	Node.DOCUMENT_FRAGMENT_NODE

2.Node类型

DOM Level 1 描述了名为 Node 的接口，这个接口是所有 DOM 节点类型都必须实现的。Node 接口在
JavaScript中被实现为 Node 类型，在除 IE之外的所有浏览器中都可以直接访问这个类型。在
JavaScript中，所有节点类型都继承 Node 类型，因此所有类型都共享相同的基本属性和方法。属性

.nodeType 返回一个整数值，表示节点类型
.nodeName 返回节点纯大写名称
.nodeValue 返回字符串，表示当前节点本身的文本值，该属性可读写只有文本，注释，属性节点有文本值
.textContent 返回当前节点和所有后代节点的文本内容
.nextSibling 返回最近的弟弟节点，若没则null
.previousSibling 返回最近的哥哥节点，若没则null
.parentNode 返回父节点（元素，文档，文档片段节点）
.parentElement 返回父元素节点，若无则null
.firstChild 返回第一个孩子节点，若无则null
.lastChild 返回最后一个孩子节点，若无则null
.childNodes 返回当前节点所有子节点类数组对象，NodeList(length)
.children 返回当前节点子元素节点

方法(要被父节点调用)

.appendChild(要增加的节点) 增加节点
.insertBefore(要插入的节点,参考节点) 插入节点
.removeChild(要删除的节点) 删除节点
.replaceChild(替换的节点,被替换的节点) 替换节点
.cloneNode( [true] ) 克隆节点默认是false浅克隆, true深克隆

什么是深克隆，什么是浅克隆
1.深克隆指的是既克隆节点的样式，还克隆节点内容
2.浅克隆指的是只克隆节点的样式

<body>
  <div id="one">
    我是一个div
    <!-- 注释 -->
    <span>行内元素</span>
  </div>
  <div id="two">我是第二个div</div>
  <script>
    // 1.nodeType 返回节点类型 返回一个整数值 文档节点 返回9
    console.log(document.nodeType);              //9
    // 获取div  通过id获取标签
    var div1 = document.getElementById('one');
    console.log(div1);                          //<div id="one">
    console.log(div1.nodeType,'元素节点');      //1 元素节点
    console.log(div1.attributes.id.nodeType,'属性节点');    //2 元素节点

    /**
     * 2.nodeName 返回节点纯大写名称
     * 3.nodeValue 只返回文本节点 属性节点 注释节点
    */
    var div1 = document.getElementById('one');
    console.log(document.body.nodeName);      //BODY
    console.log(div1.firstChild.nodeValue);   //我是一个div(可能把空格和换行也返回)

    /**
     * 4.textContent 返回元素内部所有后代元素文本内容
    */
    var div1 = document.getElementById('one');
    console.log(div1.textContent)             // 我是一个div   行内元素


    // 5.nextSibling获取同级节点后一个节点  
    //previousSibling获取同级节点前一个节点
    var div1 = document.getElementById('one');
    var div2 = document.getElementById('two');
    console.log(div1.nextSibling,'获取后一个节点');       //<div id="two"> "\n  " 获取后一个节点   (空格与换行也算节点)
    console.log(div2.previousSibling,'获取前一个节点');   //<div id="one"> "\n  " 获取前一个节点

    // 6.parentNode      返回当前的父节点  
    console.log(div1.parentNode)              //<body>
    // 7.parentElement   返回当前节点父元素节点 
    console.log(div1.parentElement);          //<body>

    // 7.返回第一个孩子节点和最后一个孩子节点 
    console.log(document.body.firstChild);    //#text "\n  "
    console.log(document.body.lastChild);     // <script>

    // 8.childNodes 返回当前节点所有子节点 类数组对象 NodeList(length)
    console.log(div1.childNodes);                 //NodeList(5) [ #text, <!--  注释  -->, #text, span, #text ]
    console.log(Array.isArray(div1.childNodes));  //false


    // 如果将类数组对象转为数组
    console.log(Array.from(div1.childNodes)); //Array(5) [ #text, <!--  注释  -->, #text, span, #text ]
    console.log([...div1.childNodes]);        //Array(5) [ #text, <!--  注释  -->, #text, span, #text ]

    
    // 获取所有元素节点 
    var res = Array.from(div1.childNodes);
    var arr = res.filter(function(item){
      return item.nodeType === 1
    });
    console.log(arr);                 //Array [ span ]
    // children 属性可以获取当前节点的子元素节点
    console.log(div1.children);       //HTMLCollection { 0: span, length: 1 }
  </script>
</body>

  <script>
    /**
     * 以下方法只能由父元素调用
     * 新增一个元素节点
     * appendChild 
    */
    // 创建一个节点 createElement();
    var div = document.createElement('div');
    //  给元素 设置文本内容 innerHtml innerText
    div.textContent = 'four';
    document.body.appendChild(div);


    /**
     * 插入节点 insertBefore(要插入的节点,参考节点)
    */
    var div = document.createElement('div');
    div.textContent = 'four';
    // //  获取参考节点
    console.log(document.body.children, '获取当前元素所有子元素节点');
    var two = document.body.children[1];
    document.body.insertBefore(div, two);


    /**
     * 替换节点 replaceChild(替换的节点,被替换的节点)
    */
    var div = document.createElement('div');
    div.textContent = 'four';
    var one = document.body.children[0];
    document.body.replaceChild(div, one);

    /**
     * 删除节点 removeChild(要删除谁)
    */
    var two = document.body.children[1];
    document.body.removeChild(two);
  </script>
</body>




 <style>
    div{
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div>我是块级元素</div>
  <script>
    var div = document.querySelector('div');
    // 克隆节点   cloneNode(true/false) 默认是false 浅克隆 true深克隆
    var newNode = div.cloneNode(true);
    document.body.appendChild(newNode);
    /**
     * 什么是深克隆，什么是浅克隆
     * 1.深克隆指的是既克隆节点的样式，还克隆节点内容
     * 2.浅克隆指的是只克隆节点的样式
    */
  </script>
</body>

3.Document类型

Javascript通过使用Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用。HTMLDocument继承自Document。

属性

.documentElement 获取html根元素
.body 获取body标签
.title 获取选项卡标题
.URL 获取文档url
.domain 获取域名
.doctype 获取文档头信息
.referrer 获取页面来源
.forms 获取页面中所有form标签
.images 获取页面中所有img标签
.links 获取页面中所有的a标签只能获取带有href属性

方法

document.getElementById(id) 通过元素id来查找元素
document.getElementsByTagName(tagname) 通过标签名查找
document.getElementsByClassName(classname) 通过类名查找
document.getElementsByName(name属性) 通过name属性获取标签
document.querySelector() 返回第一个css选择器匹配到的元素
document.querySelectorAll() 返回所有css选择器匹配到的元素
document.createElement(element) 添加元素
.textContent 获取元素内部内容
.innerHTML 获取元素内部内容
.innerText 获取元素内部内容
document .write() 写入文本/html表达式/js代码
document.documentElement.scrollTop 滚动条距顶部的距离（整数）

获取元素内部内容方式以及区别？

1.textContent 保留代码格式只能获取文本内容
2.innerHTML 保留代码格式可以识别代码片段 v-html
3.innerText 去除前后空格中间多个空格会被解析为一个空白

<body>
  <form action=""></form>
  <form action=""></form>
  <form action=""></form>
  <img src="" alt=""><img src="" alt=""><img src="" alt="">
  <a ></a><a href=""></a><a href=""></a>
  <script>
    // 1.获取html根元素 
    console.log(document.documentElement);    //<html lang="en">
    // 2.获取body标签 
    console.log(document.body);               //<body>
    // 3.获取选项卡标题
    console.log(document.title);              //document类型
    // 4.获取文档url 
    console.log(document.URL);                  //file:///D:/111/Study/ShiXunQianDuan/JavaScript/Day11/2-document%E7%B1%BB%E5%9E%8B.html
    // 5.获取域名
    console.log(document.domain,'获取域名');    //<empty string> 获取域名
    // 6.获取文档头信息 
    console.log(document.doctype);             //<!DOCTYPE html>
    // 7.获取页面来源
    console.log(document.referrer,'获取页面来源');    //<empty string> 获取页面来源
    // 8.获取页面中所有form标签
    console.log(document.forms);      //HTMLCollection { 0: form, 1: form, 2: form, length: 3 }
    // 9.获取页面中所有img标签
    console.log(document.images);     //HTMLCollection { 0: form, 1: form, 2: form, length: 3 }
    // 10.获取页面中所有的a标签 只能获取带有href属性
    console.log(document.links);      //HTMLCollection { 0: a, 1: a, length: 2 }
  </script>
</body>

获取元素

<body>
  <div id="one" class="one">我是第一个div</div>
  <div>我是第二个div</div>
  <div name="username">我是第三个div</div>
  <input type="text" name="username">

  <script>
    /**
     * querySelector 返回第一个css选择器匹配到的元素
     * querySelectorAll 返回所有css选择器匹配到的元素
    */
    console.log(document.querySelector('div'));       //<div id="one" class="one">
    console.log(document.querySelector('#one'));      //<div id="one" class="one">
    console.log(document.querySelector('.one'));      //<div id="one" class="one">
    console.log(document.querySelectorAll('div'));    //NodeList(3) [ div#one.one, div, div ]

    //getElementById() 通过id获取元素
  console.log(document.getElementById('one'),'获取id为one元素');     //<div id="one" class="one"> 获取id为one元素

   //getElementsByClassName 通过类名获取元素
  console.log(document.getElementsByClassName('one'));              //(类数组对象)    HTMLCollection { 0: div#one.one, length: 1, … } 

  //通过标签名获取元素
  console.log(document.getElementsByTagName('div'),'通过标签名获取元素');   //HTMLCollection { 0: div#one.one, 1: div, 2: div, length: 3, … } 通过标签名获取元素

  // getElementsByName 通过name属性获取标签
  console.log(document.getElementsByName('username'));              //NodeList [ div, input ]
  </script>
</body>

读取文本内容

<body>
  <div id="parent">  我是  块级元素
    <div>  我是块级元素  </div> 
  </div>
  
  <script>
    /**
     * 获取元素内部内容方式以及区别？ *******************
     * 1.textContent 保留代码格式 只能获取文本内容
     * 2.innerHTML 保留代码格式 可以识别代码片段  v-html
     * 3.innerText 去除前后空格 中间多个空格会被解析为一个空白
    */
    var parent = document.getElementById('parent');
    console.log(parent.textContent);    //我是  块级元素      我是块级元素  
    console.log(parent.innerHTML);      //我是  块级元素    <div>  我是块级元素  </div> 
    console.log(parent.innerText);      //我是 块级元素  我是块级元素
    // 向文档写入标签或者文本
    document.write('<h1>一级标题</h1>');
  </script>
</body>

滚动条下滑到一定距离跳出顶部导航


 <style>
    *{
      margin: 0;
      padding: 0;
    }
    #one{
      height: 300px;
      background-color: red;
    }
    #two{
      height: 100px;
      background-color: pink;
      display: none;
      position: absolute;
      width: 100%;
      top: 200px;
    }
  </style>
</head>
<body>
  <div id="one"></div>
  <div id="two"></div>
  <div style="height: 5000px;"></div>
  <button>回退一个页面</button>
  <script>
    window.onscroll = function(){
      var two = document.getElementById('two');
      // 获取滚动条滚动位置
      var scrollTop = document.documentElement.scrollTop;
      if(scrollTop>=60){
        two.style.display = 'block';
        two.style.position = 'fixed';
        two.style.top = '0';
      }else{
        two.style.display = 'none';
      }
    }
  </script>
</body>

4.Element类型

Element 对象对应网页的 HTML 元素。每一个 HTML 元素在 DOM 树上都会转化成一个Element节点对象。

属性

.attributes 返回一个与该元素相关的所有属性的集合。
.classList 返回该元素包含的 class 属性的集合。
.className 获取或设置指定元素的 class 属性的值。
.clientHeight 返回元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距。
.clientWidth 返回该元素内部的宽度，包括内边距，但不包括垂直滚动条、边框和外边距。
.clientTop 返回距上边界的高度。
.clientLeft 返回距左边界的宽度。
.tagName 返回标签名。
.textContent 获取元素内部内容
.innerText 返回内部文本内容。

常用方法

.innerHTML 设置或获取 HTML 语法表示的元素的后代。
.attribute 修改属性值
.getAttribute(“属性名”) 返回指定属性值
.setAttribute(“属性名”,“属性值”) 设置属性值
.style.property 改变样式

<body>
  <div id="one" class="first one">块级元素</div>
  
  <script>
    var one = document.getElementById('one');
    // 返回元素属性组成的集合
    console.log(one.attributes);          //NamedNodeMap(5) [ id="one", class="first one", title="我是div的title", flag="我是自定义属性", style="width: 100px; height: 100px; background-color: pink; font-size: 20px;" ]
    // 返回属性类名组成列表 类数组对象
    console.log(one.classList);          //DOMTokenList [ "first", "one" ]
    // 修改元素类名 
    // one.className = 'new';
    // 返回元素类名
    console.log(one.className);                          //first one
    console.log(one.clientHeight, '获取元素内部高度');    //18 获取元素内部高度
    console.log(one.clientWidth, '获取元素内部宽度');     //700 获取元素内部宽度

    // 修改元素内部内容  innerText 识别代码片段 解析字符串中标签
    one.innerText = '<h1>段落标签</h1>';

    //获取属性getAttribute('属性名')
    console.log(one.getAttribute('id'));                //one

    //给元素设置属性 setAttribute('属性名','属性值')
    one.setAttribute('title', '我是div的title');

    // 设置自定义属性
    one.setAttribute('flag', '我是自定义属性');
    
    // 给元素或者标签设置css样式 
    one.style.width = '100px';
    one.style.height = '100px';
    one.style.backgroundColor='pink';
    one.style.fontSize = '20px';
  </script>
</body>

5.Text类型

.length文本长度
.appendData(text) 追加文本
deleteData(起始索引,num) 删除文本
insertData(起始索引,text) 插入文本
replaceData(起始索引,num,text) 替换文本
splitText(起始索引) 从起始索引位置将文本节点一分为二
document.createTextNode(text) 创建文本节点

substringData(起始索引,num) 从起始索引位置提取

<body>
<div>
<!-- 我是注释 -->
</div>

<script>
// 创建文本
var TextNode  = document.createTextNode('hello world');
var div = document.querySelector('div');

// 添加文本 
TextNode.appendData('hi');

// 插入文本 beginIndex '插入的字符'
TextNode.insertData(0,'dom');

// 替换文本 beginIndex count '替换字符'
TextNode.replaceData(0,5,'我被替换了');

// 删除文本 参数:beginIndex count 
TextNode.deleteData(0,5);
div.appendChild(TextNode);
console.log(TextNode.nodeType);           //3

console.log(div.childNodes[1].nodeType);  //8

// 判断节点类型 nodeType document9 注释节点8 element节点1 属性节点2 文本节点3
</script>

6.事件机制

JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

事件三要素：
1.事件源：给谁绑定事件
2.事件类型：单击双击鼠标移入移出…
3.事件处理程序：单击做什么事情以函数形式赋值

6.1事件流

事件流分为 3 个阶段：先进行事件捕获，达到目标元素，进行事件冒泡
在这里插入图片描述

6.1.1事件冒泡

从具体元素触发事件从内向外依次触发直到document对象

下面代码冒泡顺序：

div#inner
div#center
div#outer
body
html
document

阻止事件冒泡：event.stopPropagation()；
注意：如果点击方法时需要同时传递其他参数和event，直接传递event这个单词即可

οnclick="test(123,event)"

target和currentTarget区别？
target就是触发事件目标元素
currentTarget当前正在执行事件的元素

  <style>
    .outer{
      width: 300px;
      height: 300px;
      background-color: red;
      margin: 0 auto;
      padding: 50px;
      box-sizing: border-box;
    }
    .center{
      width: 200px;
      height: 200px;
      background-color: pink;
      padding: 50px;
      box-sizing: border-box;
    }
    .inner{
      width: 100px;
      height: 100px;
      /* 渐变色 线性渐变 */
      background-image:linear-gradient(red,orange,cyan);
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="center">
      <div class="inner"></div>
    </div>
  </div>
  <script>
    var outer = document.querySelector('.outer');
    var center = document.querySelector('.center');
    var inner = document.querySelector('.inner');
    // 给outer绑定事件
    outer.onclick = function(){
      // alert('outer')
      console.log(event,'事件对象');                            //click { target: div.outer, buttons: 0, clientX: 247, clientY: 106, layerX: 247, layerY: 106 } 事件对象
      console.log(event.target,'事件目标源');                   //<div class="outer"> 事件目标源
      console.log(event.currentTarget,'当前正在执行事件元素')   //<div class="outer"> 当前正在执行事件元素

    }
    // 给center绑定事件
    center.onclick = function(){
      // alert('center')
      console.log(event.target,'事件目标源');                   //<div class="center"> 事件目标源
      console.log(event.currentTarget,'当前正在执行事件元素')   //<div class="center"> 当前正在执行事件元素
    }                                                          //因为没有阻止冒泡，所以继续输出outer的输出结果
    // 给inner绑定事件
    inner.onclick = function(){
      // alert('inner')
      console.log(event.target,'事件目标源');                    //<div class="inner"> 事件目标源
      console.log(event.currentTarget,'当前正在执行事件元素');    //<div class="inner"> 当前正在执行事件元素
      // 阻止事件向上冒泡
      event.stopPropagation();//因为阻止了冒泡，所以控制台不会输出center和outer的点击事件
    }
  </script>

6.1.2事件捕获

从不具体元素从外向内依次触发事件直到到达最具体元素

以下代码捕获顺序：

document
html
body
div

  <style>
    .outer{
      width: 300px;
      height: 300px;
      background-color: red;
      margin: 0 auto;
      padding: 50px;
      box-sizing: border-box;
    }
    .center{
      width: 200px;
      height: 200px;
      background-color: pink;
      padding: 50px;
      box-sizing: border-box;
    }
    .inner{
      width: 100px;
      height: 100px;
      /* 渐变色 线性渐变 */
      background-image:linear-gradient(red,orange,cyan);
    }
  </style>
</head>


<body>
  <div class="outer">
    <div class="center">
      <div class="inner"></div>
    </div>
  </div>

  <script>
    var outer = document.querySelector('.outer');
    var center = document.querySelector('.center');
    var inner = document.querySelector('.inner');
    function handler1(){
      alert('我是outer')
    }
    function handler2(){
      alert('我是center')
    }
    function handler3(){
      alert('我是inner')
    }
    outer.addEventListener('click',handler1,true);//弹出outer
    center.addEventListener('click',handler2,true);//弹出outer,center
    inner.addEventListener('click',handler3,true);//弹出outer,center,inner
  </script>

6.2DOM0/2事件处理程序

dom0级事件dom2级事件区别？
1.dom0级事件绑定 元素.on事件类型=function(){}
2.dom0级事件不可以追加同一类型的事件, 后面事件的会覆盖前面的
3.解绑直接 元素.οnclick=null；
+
1.dom2级事件绑定事件使用 元素.addEventListener(“事件类型”，事件处理程序，true/false) ，true:捕获时执行，false：冒泡时执行
2.dom2级事件可以追加同一类型事件,依次执行
3.dom2级事件解绑使用 removeEventListener(事件类型，函数)
4.dom2级事件可以控制事件在捕获或者冒泡阶段执行

<body>
  <button>点击我</button>
  <script>
    var btn = document.querySelector('button');
// dom0级事件绑定  元素.on事件类型 = 事件处理程序
// dom0级同一类型事件不可以追加 后面事件的会覆盖前面的
    btn.onclick = function(){
      alert('我被点击了')
    };
    btn.onclick = function(){
      alert('我第二次被点击了')
    };
    // dom0级事件解绑 
    btn.onclick = null;


// DOM2级事件 
//addEventListener(事件类型,事件处理程序,[true]表示在事件捕获阶段执行,默认false表示事件在冒泡阶段执行 )
    function handler(){
      alert('第一次触发')
    }
    function handler1(){
      alert('第二次触发')
    }
    btn.addEventListener('click',handler,false);
    btn.addEventListener('click',handler1,false);
    // dom2级事件解绑  removeEventListener(事件类型,具名处理程序)
    btn.removeEventListener('click',handler);         //解绑了之后就没第一次触发了
  </script>
</body>

6.3事件对象

在 DOM 中发生事件时，所有相关信息都会被收集并存储在一个名为 event 的对象中。这个对象包含了一些基本信息，比如导致事件的元素、发生的事件类型，以及可能与特定事件相关的任何其他数据。事件官网

注意：event 对象只在事件处理程序执行期间存在，一旦执行完毕，就会被销毁。
阻止默认事件发生： event.preventDefault();

<body>
  <form action="text.php">
    <input type="submit" value="提交">
  </form>
  <a href="https://sdfbsdbnf">页面跳转</a>

  <script>
    var input = document.querySelector('input');
    var a = document.querySelector('a');
    input.onclick = function(){
      // 阻止元素的默认行为
      event.preventDefault()
    }
    a.onclick = function(){
      event.preventDefault()
    }
  </script>
</body>

6.4事件委托

什么是事件委托/事件代理

只指定一个事件处理程序就可以管理某一类型的事件
将本应该绑定给子元素事件绑定父元素代理

事件委托就是当事件触发时，把要做的事委托给父元素（或父元素的父元素）来处理。
也就是：利用冒泡的原理,(可以只使用一个事件处理程序来管理一种类型的事件)，把事件加到父级上，通过判断事件来源的子集，执行相应的操作。

优点：减少事件的执行，减少浏览器重排和重绘，优化页面性能，可以给新增元素绑定事件

//不同元素采用相同样式
 <script>
    // 延迟代码执行 页面加载完毕后再执行
    window.onload = function () {
      var ul = document.querySelector('ul');
      console.log(ul, '头部获取');
    }
  </script>
</head>

<body>
  <ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
    <li>我是第6个li</li>
    <li>我是第7个li</li>
    <li>我是第8个li</li>
    <li>我是第9个li</li>
    <li>我是第10个li</li>
  </ul>
  <script>
    var ul = document.querySelector('ul');

    // 给子元素绑事件（会导致后加孩子没有样式效果）
    // var lis = ul.children; //children获取元素所有子元素节点
    // console.log(lis,'获取子元素节点');
    // for(var i=0;i<lis.length;i++){
    //   lis[i].onclick = function(){
    //     this.style.backgroundColor = 'red';
    //   }
    // }


    // 给父元素绑定事件
    ul.onclick = function () {
      console.log(event.target, '事件对象');
      event.target.style.backgroundColor = 'red';
    }
    var newLi = document.createElement('li');
    newLi.innerHTML = '我是新增li';
    ul.appendChild(newLi);
  </script>
</body>







//不同元素采用不用样式
<body>
  <ul>
    <li id="one">第一个li标签</li>
    <li id="two">第二个li标签</li>
    <li id="three">第三个li标签</li>
  </ul>
  <script>

    // var one = document.getElementById('one');
    // var two = document.getElementById('two');
    // var three = document.getElementById('three');
    // one.onclick = function(){
    //   this.innerHTML = 'hello html'
    // }
    // two.onclick = function(){
    //   this.innerHTML = 'hello css'
    // }
    // three.onclick = function(){
    //   this.innerHTML = 'hello js'
    // }

    
    //将li的事件代理给ul
    var ul = document.querySelector('ul');
    ul.onclick = function () {
      // console.log(event.target)
      // 获取点击的某一个li元素 
      var target = event.target;
      switch (target.id) {
        case 'one':
          target.innerHTML = 'hello html';
          break;
        case 'two':
          target.innerHTML = 'hello css';
          break;
        case 'three':
          target.innerHTML = 'hello js';
          break;
        default:
          target.innerHTML = '我是li标签';
      }
    }
  </script>
</body>

6.5事件类型

6.5.1用户界面

.onload 延迟触发
.onselect 文本框选择字符触发
.onresize 窗口被缩放时触发
.onscroll 滚动条滚动触发
document.documentElement.scrollTop 滚动条距顶部的距离（整数）
.oninput 监听输入框值事件

6.5.2焦点事件

.onfocus 获取焦点（不冒泡）
.onfocusin 获取焦点（冒泡）
.onblur 失去焦点（不冒泡）
.onfocusout 失去焦点（冒泡）

6.5.3鼠标事件和鼠标滚轮事件

.onclick 单机
.ondblclick 双击
.onmousedown 按下任意鼠标键
.onmouseup 释放鼠标触发
.onmouseenter 从元素外部移到内部时触发
.onmouseleave 从元素内部移到外部时触发
.onmousemove 在元素上移动时触发
.onmouseout 从一个元素移到另一个元素时触发
.onmouseover 从元素外部移到内部时触发
.onmousewheel 滚轮触发

6.5.4键盘事件与输入事件

.onkeydown 按下，持续按会重复触发
.onkeypress 按下并产生字符，持续按会重复触发
.onkeyup 释放按键触发
.addEventListener(’ textInput ',函数) j监听输入框事件

输入事件只有一个，即 textInput。这个事件是对 keypress
事件的扩展，用于在文本显示给用户之前更方便地截获文本输入。textInput
会在文本被插入到文本框之前触发。当用户按下键盘上的某个字符键时，首先会触发 keydown 事件，然后触发 keypress 事件，最后触发
keyup 事件。

  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <input type="text">
  <div>我是一个div</div>
  <!-- <div style="height: 5000px;"></div> -->


  <script>
    var input = document.querySelector('input');
//1.select 当选择输入框字符时候触发 火狐不支持
    input.onselect = function () {
      console.log(window.getSelection().toString(), '我被触发了');
    }
//2.当页面发生缩放时候触发
    window.onresize = function(){
      console.log(window.outerWidth,window.outerHeight)
    }
//3.滚动事件 scroll
    window.onscroll = function () {
      // console.log(window.pageYOffset,'获取距离上方位置')
      console.log(document.documentElement.scrollTop, '获取距离上方位置')
    }
//4.监听输入框值事件
    input.oninput = function () {
      console.log(event.target.value, '输入框输入的值')
    }




//5. 聚焦事件 focus
    input.onfocus = function () {
      this.style.backgroundColor = 'red'
    }
// 6.失焦事件 blur
    input.onblur = function () {
      // this.style.backgroundColor = 'blue';
    }




    /**
     * 鼠标事件 
     * mouseenter 鼠标移入 
     * mouseleave 鼠标移除
     * mousemove  鼠标一直移动
     * mousedown 
     * mouseup 
     * mousewheel 
     * click 
     * dbclick
    */
    var div = document.querySelector('div');
    div.onmouseenter = function () {
      console.log('鼠标移入');
    }
    div.onmouseleave = function () {
      console.log('鼠标移出');
    }
    div.onmousemove = function () {
      console.log('鼠标一直移动');
    }
    div.onmousedown = function () {
      console.log('鼠标按下');
    }
    div.onmouseup = function () {
      console.log('鼠标抬起')
    }
    div.onmousewheel = function () {
      console.log('鼠标滚轮');
    }
    div.ondblclick = function () {
      console.log('鼠标双击');
    }



    
    /**
     * 键盘事件 
     * keydown 键盘按下事件
     * keyup   键盘抬起事件
     * keypress 键盘持续按下事件
    */
    input.onkeydown = function () {
      console.log(event.keyCode, '键盘keyCode我被按下了');
    }
    input.onkeyup = function () {
      console.log('键盘抬起');
    }
    input.onkeypress = function () {
      console.log('键盘持续按下事件');
    }
    
    input.addEventListener('textInput', function (event) {
      console.log(event.data,'00000');
    })
  </script>
</body>

二、BOM

浏览器对象模型（BOM，Browser Object Model）

1.window对象

BOM的核心。window 对象在浏览器中有两重身份，一个是ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JavaScript 接口。

窗口

screenLeft和screenTop 窗口相对于屏幕的x和y坐标（火狐不支持）
screenX和screenY 窗口相对于屏幕的x和y坐标（ie不支持）
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的x位置
pageYOffest 设置或返回当前y页面相对于窗口显示区左上角的y位置
.resizeTo(num,num) 控制窗口打开宽高
.moveTo(num,num) 控制窗口打开位置 x，y
.close() 关闭窗口
innerWidth 页面视图宽度
innerHeight 页面视图高度
outerWidth 浏览器窗口宽度
outerHeight 浏览器窗口高度
screen.width 屏幕总宽度（像素）
screen.height 屏幕总高度（像素）
screen.availWidth 可用深度
screen.availHeight 可用高度
screen.colorDepth 颜色深度
screen.pixelDepth 颜色分辨率

 <script>
    var name = 'zhangsan';
    var sayName = function () {
      console.log(this.name);
    }
    console.log(window.name);//zhangsan
    sayName(); //zhangsan
    window.sayName();//zhangsan
    
    console.log(window.innerHeight);//706
    console.log(window.innerWidth);//716
    console.log(window.outerWidth);//727
    console.log(window.outerHeight);//824
  </script>

系统对话框

alert（）警告框
confirm（）确认框
prompt（）提示框

 <script>
    // 弹框 
    alert('我是一个弹框');

    // 确认框 
    var res = confirm('您确定吗');//返回值true或者false
    console.log(res);
    if(res){
      console.log('删除成功')
    }else{
      console.log('取消删除')
    }
    
    // 提示框
    var res = prompt('请输入您的姓名');
    console.log(res);
  </script>
</body>

window.open()

window.resizeTo(num,num) 新窗口宽高
window.moveTo(num,num) 新窗口位置(x,y)
window.close(); 关闭连接
window.open(URL,name,specs,replace) 打开链接

URL:可选，打开指定url，若无则开新空白窗口

name：可选
_blank 加载到新窗口，默认
_parent加载到父框架
_self 替换当前页面
_top 替换任何可加载的框架集
name 窗口名称

specs

可选。一个逗号分隔的项目列表。支持以下值：

hannelmode=yes\|no\|1\|0	是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes\|no\|1\|0	是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes\|no\|1\|0	浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
height=pixels	窗口的高度。最小.值为100
left=pixels	该窗口的左侧位置
location=yes\|no\|1\|0	是否显示地址字段.默认值是yes
menubar=yes\|no\|1\|0	是否显示菜单栏.默认值是yes
resizable=yes\|no\|1\|0	是否可调整窗口大小.默认值是yes
scrollbars=yes\|no\|1\|0	是否显示滚动条.默认值是yes
status=yes\|no\|1\|0	是否要添加一个状态栏.默认值是yes
titlebar=yes\|no\|1\|0	是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes\|no\|1\|0	是否显示浏览器工具栏.默认值是yes
top=pixels	窗口顶部的位置.仅限IE浏览器
width=pixels	窗口的宽度.最小.值为100

replace:
true:url替换浏览历史中的当前条目
false:url在浏览历史中创建新条目

<body>
  <button>打开页面</button>
  <button>关闭窗口</button>
  <script>
    var btn1 = document.querySelector('button');
    var btn2 = document.getElementsByTagName('button')[1];
    btn1.onclick = function(){
      // 打开一个链接  一个页面
    w =  window.open('https://baidu.com','_blank','width=600px,height=600px');
    console.log(w,'窗口对象');
      // 控制新窗口打开宽高 
    w.resizeTo(400,400);
    //  控制窗口打开位置 x y 
    w.moveTo(200,200);
    }
    btn2.onclick = function(){
      // 关闭窗口
      w.close();
      
    }
  </script>
</body>

2.location对象

提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。

属性

.host 服务器名称和端口号
.hostname 不带端口号的服务器名称
.href 当前加载页面的完整URL
.pathname URL的目录和文件名
.port URL中指定的端口号
.protocol 页面使用的协议
.search URL的查询字符串。这个字符串以问号开头

方法

location.assign(url) 打开页面，并在浏览记录中生成一条记录。
location.replace（url）替换页面。结果会导致浏览器位置改变，但不会在历史记录中生成新记录。
location.reload( [true] ) 刷新当前显示的页面。默认false表示以最有效方式重新加载，可能从缓存中直接加载。true表示强制从服务器中重新加载

<body>
  <button>跳转页面</button>
  <button>替换页面</button>
  <button>刷新页面</button>
  <button>前进下一个历史记录栈页面</button>
  <script>
    console.log(location,'加载当前窗口文档相关信息,提供导航功能');
    console.log(location === window.location);          //true
    console.log(location === document.location);        //true
    console.log(window.location === document.location); //true
    var btn1 = document.body.children[0];
    var btn2 = document.body.children[1];
    var btn3 = document.body.children[2];
    var btn4 = document.body.children[3];
    btn1.onclick = function(){
      // 页面跳转 并且会在浏览器产生一条历史记录
      location.assign('./4-网易严选滚动.html')
    }
    btn2.onclick = function(){
      // 页面替换 将页面替换为页面 不会在浏览器产生一条历史记录
      location.replace('./4-网易严选滚动.html')
    }
    btn3.onclick = function(){
      // 刷新页面 true/false true表示请求服务器资源 false请求浏览器缓存
      location.reload(true);
    }
    btn4.onclick = function(){ 
      // history.forward();// 前进到下一个历史记录栈
      history.go(1)// 前进一个下一个历史记录页面
    }
    console.log(history.length);
  </script>

3.history对象

history.length 返回历史列表中的网址数(注意：Internet Explorer和Opera从0开始，而Firefox、Chrome和Safari从1开始。)
history.back() 加载 history 列表中的前一个 URL
history.forward() 加载 history 列表中的下一个 URL
history.go() 加载 history 列表中的某个具体页面，负数表示向后跳转，正数表示向前跳转。

4.计时器（间歇与超时调用）

javascript是单线程语言，但是可以通过超时值和间歇时间来调度代码在特定时刻执行。

-间歇调用（重复执行）

setInterval(执行代码，毫秒时间)
clearInterval(); 清除计时器

-超时调用（执行一次）

setTimeout(执行代码，毫秒时间)
clearTimeout(); 清除计时器

//间歇调用可用于动态显示时间
 /**
   * 间歇调用 setInterVal 
   * 参数:函数 间隔时间
   * 每隔间隔时间函数执行一次 返回值是id
   * 取消间歇调用clearInterval(id)
  */
  var id = setInterval(function(){
    console.log('我被调用了')
  },1000);
  // // 取消间歇调用
  clearInterval(id);
  console.log(id);
  var div = document.querySelector('div');
  div.innerHTML = new Date().toLocaleString();
  setInterval(function(){
    div.innerHTML = new Date().toLocaleString()
  },1000)



//超时调用：在1秒后执行输出语句
/**
     * 超时调用 
     * 超过wait时间后执行函数一次  wait单位毫秒 
     * setTimeout(函数,wait) 定时器
     * 返回一个定时器id 
     * 取消超时调用 clearTimeout(id)
    */
 var id = setTimeout(function(){
    console.log('我是超时调用')
  },2000);
  // //  取消超时调用
  clearTimeout(id);
  console.log(id);

三、Ajax

console.log(1);

setTimeout(function(){
  console.log(2)
},0);

console.log(3);


//1 3 2
//而不是123，因为此处涉及事件循环机制。js是一门单线程语言，同一时间只能做一件事情，当他遇到这种异步耗时的任务时不会立刻执行，而是先处理主线程的事情，执行完毕后再回头执行队列当中的任务

异步JavaScript和XML,结合HTML、XML、CSS和服务器进行通信和数据交互得一种方法
可以动态更新局部数据不需要刷新页面。

Ajax的四个步骤

<body>
  <script>
  
    // 1.创建请求实例
    var xhr =  new XMLHttpRequest();
    // console.log(xhr);

    // 2.打开一个连接  open(method(请求方式),url(请求路径))
    xhr.open('get','http://121.199.0.35:8888/index/carousel/findAll');

    // 3.发送请求
    xhr.send();
    
    // 4.监听响应
    xhr.onreadystatechange = function(){
      // xhr.readyState ===4表示请求发送完成 xhr.status===200表示请求发送成功
      if(xhr.readyState ===4&&xhr.status===200){
        // 获取请求实例返回得响应数据
        // console.log(xhr.response);
        // 服务器返回的数据格式是json字符串 需要转为js对象 JSON.parse
        var res =  JSON.parse(xhr.response);
        console.log(res);
        res.data.forEach(function(item){
          // item ---> {id,name,introduce,url}
          var div = document.createElement('div');
          var img = document.createElement('img');
          document.body.appendChild(div);
          document.body.appendChild(img);
          div.innerHTML = item.name +'-'+ item.introduce;
          img.src = item.url;
          img.style.width = '150px';
          
        })
      }
    }
  </script>
</body>

get请求(有参)

get发送体在链接之后

<body>
  <script>

    // 1.创建XMLHttpRequest请求实例
    var xhr = new XMLHttpRequest();
    var params = {
      page:1,
      pageSize:10
    };
    // 将js对象转为查询字符串 ?page=1&pageSize=10
    var parseObj = Qs.stringify(params);
    // console.log(parseObj);
    
    // 2.打开一个链接
    xhr.open('get','http://121.199.0.35:8888/index/article/pageQuery?'+parseObj);

    // 3.发送请求
    xhr.send();
    
    // 4.监听响应
    xhr.onreadystatechange = function(){
      if(xhr.readyState ===4 && xhr.status===200){
        // console.log(xhr.response);
        var res = JSON.parse(xhr.response);
        // console.log(res);
        res.data.list.forEach(function(item){
          // item---> {title:"",content:""}
          var dt = document.createElement('dt');
          var dd = document.createElement('dd');
          dt.innerHTML = item.title;
          dd.innerHTML = item.content;
          document.body.appendChild(dt);
          document.body.appendChild(dd);
        })
      }
    }
  </script>
</body>

post请求

post请求体在发送请求中

json请求

<body>
  <script>

    // 1.创建XMLHttpRequest请求实例
    var xhr = new XMLHttpRequest();
    var form = {
      username:'admin2',
      password:123321
    }

    // 2.打开一个连接
    xhr.open('post','http://121.199.0.35:8888/user/login');
    // 设置请求头数据格式为json格式
    xhr.setRequestHeader('Content-Type','application/json')

    // 3.发送请求
    xhr.send(JSON.stringify(form));
    
    // 4.监听响应
    xhr.onreadystatechange = function(){
      if(xhr.readyState ===4 && xhr.status===200){
        console.log(JSON.parse(xhr.response))
      }
    }
  </script>
</body>

表单请求

<body>
  <script>

    // 1.创建XMLHttpRequest请求实例
    var xhr = new XMLHttpRequest();

    // 2.打开一个连接
    xhr.open('post','http://121.199.0.35:8888/baseUser/saveOrUpdate');
    var params = {
      username:"狗蛋123",
      password:123321
    }
    // 将js对象转为表单格式数据(查询字符串)传给后端 
    var formObj = Qs.stringify(params);
    // 设置请求头格式为表单格式 
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

    // 3.发送请求
    xhr.send(formObj);
    
    // 4.监听响应
    xhr.onreadystatechange = function(){
      if(xhr.readyState ===4 && xhr.status===200){
        console.log(JSON.parse(xhr.response))
      }
    }
  </script>
</body>