DOM

JS的组成

ECMAScript js的基础语法

DOM 文档对象模型

BOM 浏览器对象模型

DOM

Document Object Model(文档对象模型)

学习DOM就是学习封装好的操作页面的API(应用程序接口)，Application programming interface 就是一些封装好的方法

DOM：文档对象模型(Document Object Model)，又称为文档树模型。是一套操作HTML和XML文档的API(应用程序接口)

DOM是由哪些部分组成的？

首先是由节点组成的，节点又分以下几部分：

元素 属性 文本 注释

1、获得页面元素的方式 【通过JS控制的是行内样式，后面的会覆盖前面的】

类数组是可以用数组方法 【 for 】 进行遍历的 ，只有对象才可以用 【 for in 】方法遍历 ，两种方法并不等价

类数组对象依然用 for 循环遍历

• document.getElementById() 通过标签的Id获得的是唯一的页面标签对象

var li2 = document.getElementById("li2"); //通过id的方式获得页面中的标签，是唯一的一个对象

• document.getElementsByTagName() 通过标签(元素)名

var lis = document.getElementsByTagName("li"); // 通过标签的方式获得所有的li元素,是一个标签对象的数组 【不常用】 【 结果为类数组的对象 】

• document.getElementsByClassName() 通过标签的类名:在JS中不推荐使用这种方式，因为有兼容性的问题 【 结果为类数组的对象 】

var divs = document.getElementsByClassName("box"); // 通过类名的方式获得的也是标签对象的数组

1567045870060.png

• H5的获取元素节点（标签）： document.querySelector("") 【 获取不存在的标签，结果为null 】

  ​ 【 document.querySelector("") 里面的值可以是标签、类名、id 】

• H5的获取元素节点（标签）： document.querySelectorAll("") 【 其结果为一个类数组的对象 】

  ​ 后代选择器只能用在H5标签方法中用

注意：DOM对象的属性和标签的属性几乎是一模一样的，用DOM的方法获得的标签对象就是DOM对象

1567047453600.png

2、获取元素后的一些操作 【 通过对象进行操作 】

获取元素内的内容

• textContent

• innerHTML

区别：textContent与innerHTML方法类似会返回对象节点下所有的文本内容，但是textContent返回的内容只有去HTML化的文本节点的内容

设置内容

• textContent = 【 不能解析标签 】

• innerHTML = 【 能解析标签 】

innerHTML会直接渲染成对应的HTML标签

<u>两种方法向对象中赋值都会将原来的内容覆盖掉</u>

1567050261148.png 1567059865351.png

标签的属性操作

• 获取属性值（可以获的自定义属性的值）：dom.getAttribute(name)

  ​ 【 当有多个属性时，会获取多个属性，得到一个字符串 】 对于属性可利用css选择器进行操作

• 设置属性值（可以获的自定义属性的值）：dom.setAttribute(name, value) 【会删除之前的属性，因此先获取之前的属性，在进行添加】

  // HTML部分
  <div class="test singer" id="dome" aa="aac">
          张良
          <div class="name">
              让泪化作相思雨
          </div>
      </div>
  
  // js 部分
  <script>
      let div = document.querySelector("div")         // 获取元素节点
      var attributes = div.getAttribute('class')      // 获取节点元素属性
      attributes = attributes + " " + "tessss"      // 先获取之前的属性，在进行添加
      div.setAttribute("class",attributes)          // 添加属性
      console.log(div)
  </script>
  

• 移除属性值：dom.removeAttribute(name) 【 属性值 】

• 特例：获取class的值 dom.className , 设置则可以赋值设置，<u>返回的是个字符串</u>

• 特例：获取class的值 dom.classList.add() | remove() , 添加或者删除，返回的是一个类名数组

  ​ 【 在原有基础上进行增删，而不是整体增删 】

  div.classList.add("ccc")          // 在元素节点添加类名
  div.classList.remove("test")      // 在元素节点删除类名
  

1567060570827.png 1567062807872.png 1567065079080.png 1567065829139.png 1567086690694.png 1567127959536.png

js设置样式

• 通过js动态添加类名从而达到更改样式

• 通过dom.style属性获取样式 或者设置样式

  dom.style.width = "100px"
  dom.style.heigth = "100px"
  dom.style.color = "red"
  dom.style.border = "1px solid red"
  dom.style.backgroundColor = "yellow"
  // 例如
  div.style.backgroundColor = "pink"
  

3. 节点

DOM是由节点组成的 节点：标签，文本，学习节点的目的，是为了让我们对DOM操作更加的灵活一些。

节点获取：【 方法 】

• dom.parentNode： 获取dom节点的父节点

• dom.children: 获取dom节点的子节点，返回的是一个数组

• dom.nextElementSibling : 获取dom的下一个元素节点

• dom.nextSibling ：获取dom的下一个节点（包括元素节点）

  ​ 【 换行后可能会获取到文本 节点 ，不换行才能获取到元素节点】

• dom.previousSibling ： 获取dom的上一个节点（包括元素节点） dom.previousElementSibling 同上

1567132641814.png

节点的创建和插入：

• document.createElement()

  <script>
      var box = document.getElementById("box");
      var ul = document.createElement("ul"); // 创建的是一对标签
      box.appendChild(ul);// 将创建出来的ul标签追加到box中
      var  li = document.createElement("li"); // 创建的一个标签对象
      ul.appendChild(li);
      li.innerHTML = "这是新添加的内容";
  </script>
  

  • cloneNode ------》复制

1567146535560.png

• appendChild // 是在节点内容之添加新增标签

//var li11 = dom.cloneNode(false); // 如果参数是false的话，表示浅度克隆，只克隆标签，不会克隆标签之间的内容
var li11 = li1.cloneNode(true);// 如果参数为true的话，表示 深度克隆，会克隆标签内的一切内容
// var li11 = li1.cloneNode();// 如果不写参数的话，与false一致
//  console.log(li11);

// 可以将克隆出来的内容追加到任何一个节点上
// appendChild
ul.appendChild(li11);  // 在当前父级元素的最后，追加一个克隆出来的标签节点
console.log(ul);

• m.insertBefore( n , k ) 在m元素的k节点前添加n节点

删除节点

• m.removeChild(n)删除m元素中的n节点 ： 删除需要通过父节点对象进行删除，删除的是子节点对象

  ​ m : 是父节点的对象 【 先要获取父节点对象 】

  ​ n : 是需要删除的子节点的对象 【 先要获取该对象，然后才能做删除 】

1567136082896.png 1567145576780.png

4、事件

JavaScript是一种事件驱动的语言，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。分为触发和响应

• 触发：交互的某个瞬间
• 响应：就是要执行的某些代码要达到一定的效果

事件三要素

事件源 要给谁注册事件

事件类型 要给事件源注册什么样的事件

事件处理程序 要执行的代码，去达到某种效果 函数或是匿名函数

1567150088149.png

注册事件

• On的方式注册事件 给一个对象添加多个事件会被覆盖
• addEventListener() 可以给一个对象添加多个事件

1567408792073.png 1567150897100.png 1567153958362.png 1567154924012.png 1567159433499.png 1567217798213.png

移除事件**

dom.removeEventListener(type,listener) 高级浏览器支持的方式

1567413281882.png 1567408970646.png

onclick 事件解绑----------》事件覆盖

1567409538279.png 1567414489409.png

事件冒泡**

事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

image.png

事件委托 -------->原理：冒泡原理

本来要自己做的事，可以委托其它的标签去做，这种方式叫做事件委托

比来要给li注册的事件，现在只需要注册到ul即可，通过事件冒泡的方式，也可以达到相应的效果。

原因：为了防止由于子元素过多而影响性能。

target【是固定属性】 指的是触发事件的的目标元素

1567415002026.png

阻止事件冒泡

取消冒泡和捕获: stopPropagation() 取消冒泡和捕获

事件捕获刚好和事件冒泡相反 ------》冒泡由内到外 捕获由外到内

----》btn,addEventlistener（ ‘click’,函数，true/false ）

false 就是事件冒泡（默认），true就是事件捕获。事件冒泡，事件由内往外执行；事件捕获，事件由外向内执行。通过 true / false 可改变事件的触发顺序。

是从DOM的最外层到目标对象执行触发

而冒泡是从当前对象往DOM的最顶级元素去执行触发

handle : 回调函数/函数/事件处理程序

image.png

事件的三个阶段

image.png

事件对象event

任何事件触发的时候，程序都会提供给我们一个事件对象event

存储着一些与事件相关的信息

也是有兼容生的，高级浏览器是支持的，但是IE8及以下的浏览器的是支持的window.event

Var e = event || window.event;

三个坐标

event.clientX/Y 可视区，以浏览器可视区的左上角为基准

event.pageX/Y 以页面的左上角为基准

event.screenX/Y 以电脑屏幕的左上角为基准

pageX/Y是有兼容性的，

event.pageX/Y = event.clientX/Y+event.scrollTop/Left

1567415364111.png 1567424261688.png

DOM事件的Event对象的常见应用：

• event.preventDefault() : 阻止默认事件（如 a 标签的默认事件）
• event.stopPropagation(): 阻止冒泡
• event.stopImmediatePropagation(): 除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止.
• event.target: 返回触发事件的元素
• event.currentTarget: 返回绑定事件的元素

DOM 的事件级别

DOM事件级别.png

DOM1也是存在，只是没有涉及到事件，DOM3比DOM2多了键盘和鼠标一些事件

DOM的自定义事件：

var  eve = new Event('eventName')
dom.addEventListener('eventName',function(){
})  //注册事件
dom.dispatchEvent(eve);   // 触发事件，
---------------------------------------------------------
这个事件不能添加参数，想要添加参数，得自定义 CustomEvent事件
// 添加一个适当的事件监听器
obj.addEventListener("cat", function(e) { process(e.detail) })
// 创建并分发事件
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})
obj.dispatchEvent(event)

其他事件类型：

Onmouseover 鼠标移入的事件

Onmouseout 鼠标离开的事件

Onfocus 获得焦点的事件

Onblur 失去焦点的事件

Ondblclick 鼠标的双击事件

keydown 键盘按下事件 //可以加过度效果

1567473611480.png 1567514971540.png

// 键盘事件  按上下键 div 变颜色
        var div = document.querySelector( 'div' )
        document.body.addEventListener( 'keydown',function( e ){
            console.log( e )
            switch( e.key ){
                case 'ArrowUp':
                    div.style.backgroundColor = 'green'
                    break;
                case 'ArrowDown':
                    div.style.backgroundColor = 'red'
                    break;
            }
        } )

移动端的事件

click事件

单击事件，类似于PC端的click，但在移动端中，连续click的触发有200ms ~ 300ms的延迟

touch类事件

触摸事件，有touchstart touchmove touchend touchcancel 四种之分

touchstart：手指触摸到屏幕会触发

touchmove：当手指在屏幕上移动时，会触发

// 移动端事件        touchstart / touchmove
        div.addEventListener( 'touchstart',function( e ){
        console.log( 111111111111111 )
        } )
        div.addEventListener( 'touchmove',function( e ){
        console.log( 22222222222222 )
        })

touchend：当手指离开屏幕时，会触发

touchcancel：可由系统进行的触发，比如手指触摸屏幕的时候，突然alert了一下，或者系统中其他打断了touch的行为，则可以触发该事件

tap类事件

触碰事件，我目前还不知道它和touch的区别，一般用于代替click事件，有tap longTap singleTap doubleTap四种之分

tap: 手指碰一下屏幕会触发

longTap: 手指长按屏幕会触发

singleTap: 手指碰一下屏幕会触发

doubleTap: 手指双击屏幕会触发

1567477488104.png

原生ajax实现：（原理）

function ajax(options){
            var pramas = {
                url:'',
                type: 'get',
                data: {},
                success: function (data) {},
                error: function (err) {},
            }
            options = Object.assign(pramas, options)
            if(options.url){
                var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")        //兼容性
                var url = options.url,
                    type = options.type.toUpperCase(),
                    data = options.data,
                    dataArr = [];
                for(let key in data){
                    let value = key + '='+ data[key]
                    dataArr.push(value)
                }
                if(type === "GET"){
                    url = url + "?" + dataArr.join('&')
                    xhr.open(type, url, true)
                    xhr.send()
                }
                if(type === "POST"){
                    xhr.open(type,url, true)
                    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
                    xhr.send(dataArr.join('&'))
                }
                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {  // 304未修改       //4代表服务器返回了数据   //200代表服务器返回正确的数据
                        options.success(xhr.responseText)
                    }else {
                        options.error(xhr.responseText)
                    }
                }
            }
        }

1567479932627.png 1567481361234.png 1567482378254.png 1567483047286.png 1567495426848.png 1567496201161.png 1567496659523.png 1567499646708.png 1567502373926.png 1567558926637.png 1567559162747.png 1567562985618.png 1567563463121.png 1567568649596.png 1567585643078.png 1567734227939.png

JS 城市列表渲染

1567667132199.png 1567667212882.png

对象中属性值得访问方法： obj.属性（点后面一定是属性） obj[ 有引号“ ”就是属性，没有引号“ ”就是变量 ]

1567669899739.png 1567907412547.png