DOM 文档对象模型

DOM 文档对象模型

1 DOM的概念

DOM(Document Object Model) 文档对象模型
DOM是W3C组织制定并推荐的标准, 这个标准提供了一系列操作HTML的统一API.
核心对象是 document . 每个载入浏览器的 HTML 文档都会成为 Document 对象。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

2 DOM树

DOM树 是将HTML文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面

文档: 一个HTML页面就是一个文档，DOM中使用document表示

节点: 网页中的所有内容，在DOM树中都是一个节点(标签、属性、文本、注释等)

1. 整个文档是一个文档节点 
1. 每个 HTML 元素是元素节点 
1. HTML 元素内的文本是文本节点 
1. 每个 HTML 属性是属性节点 
1. 注释是注释节点

3 获取元素

如果要操作DOM, 首先我们需要知道具体需要操作哪一个元素. 即: 获取元素

获取单个元素
```
  getElementById(id的值)
```

获取多个元素

  getElementByTagName(标签名)<br />        getElementByClassName(类名)

H5新增—推荐使用

querySelector(选择器) 第一个元素
querySelectorAll(选择器))

<script>
        //getElementById() 方法
            //getElementById() 方法返回带有指定 ID 的元素：
        var div = document.getElementById('div01')
        console.log(div);//<div id="div01">中国移动</div>  其实就是将当前的标签获取到了
        console.log(typeof div);//object  说明在dom中,元素被封装成了对象
        console.dir(div) //打印的是返回的元素对象,以便更好的查看里面的属性和方法
       //div对象里面就有方法,就可以通过调用指定的方法去获取里面的数据
       console.log(div.innerHTML);
    </script>

<script>
        //getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 
        var lis = document.getElementsByTagName('li')
        console.log(lis);
        //如果想获取单个元素
        console.log(lis[0]);
        //如果想要依次打印里面的元素,可以采用遍历的方式
        for(var i=0;i < lis.length ;i++){
            console.log(lis[i]);
        }
    </script>

<script>
        //getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。 
        var boxs = document.getElementsByClassName('box')
        console.log(boxs);
        //querySelector() 返回指定选择器的第一个元素 注意:里面必须要传选择器
        var div = document.querySelector("#nav")
        console.log(div);
        var box01 = document.querySelector(".box")
        console.log(box01);
        //querySelectorAll() 返回指定选择器的所有元素对象的集合
        var arr = document.querySelectorAll('.box')
        console.log(arr);
        var arr1 = document.querySelectorAll('li')
        console.log(arr1);
    </script>

4 DOM事件

1) 什么是事件驱动

我们说JavaScript采用的是事件驱动机制, 即: 触发—-响应机制

如何理解

触发一个特定的事件, 比如: 点击一个按钮. 然后会执行事件对应的函数

步骤

获取元素
注册事件(绑定事件)处理函数
触发事件, 执行函数

事件通常和js代码一起使用,可以通过事件的发生来执行一段js代码

三个要素
1,事件源电话电动车
2,事件电话铃响踹
3,事件处理程序铃响之后班主任要做的事情警报器响(监听器)

三个步骤
1,写一个事件源按钮
2,写一个监听器函数
3,绑定事件源和监听器用一个属性绑定按钮和监听器

   绑定(注册额方式)<br />        1.传统的注册方式:利用on开头的事件 onclick,onkeyup<br />        2.H5新增的监听注册方式: addEventListener(事件名称,匿名函数)

2) DOM操作元素

1 DOM操作元素属性

设置
元素对象.属性名 = 属性值
获取
元素对象.属性名

<body>
    <img src="./img/off.gif" alt="">
    <script>
        //第一步:获取img元素对象
        var light = document.querySelector('img')
        //第二步:调用方法操作元素的属性
        light.src = "./img/on.gif"  //设置src的属性的值
        var str = light.src //获取src的属性的值
        console.log(str);//http://127.0.0.1:5500/img/on.gif  图片网络上的地址
    </script>
</body>

<script>
        //1.获取图片对象
        var img = document.querySelector('img')
        //定义一个标记变量
        var flag = false //false代表灯是灭的,永远跟灯的状态保持一致
        //2,绑定事件
        img.onclick = function(){
            if(flag == false){
                img.src = './img/on.gif'
                flag = true //现在灯亮,那我就将flag置为true
            }else{
                img.src = './img/off.gif'
                flag = false //现在灯灭,那我就将flag置为false
            }
        }
    </script>

2 DOM操作元素标签体

设置
元素对象.innerHTML = 值
获取
元素对象.innerHTML

<script>
        //获取div元素
        var div = document.querySelector("#div01")
        //获取标签体的内容
        console.log(div.innerHTML); 
        //修改标签体的内容
        div.innerHTML = '下周回国贾跃亭'
        console.dir(div);
        //获取div02
        var div02 = document.querySelector("#div02")
        console.dir(div02)
        console.log(div02.innerHTML , div02.innerText);
    </script>

3 DOM操作元素CSS样式

方式一 :
设置
元素对象.style.属性名=值
获取
元素对象.style.属性名

<script>
        //1.获取元素
        var div = document.querySelector('div')
        //2,添加事件
        div.onclick=function(){
            //修改样式(样式是在style标签里面)
            //div.style.width = '300px'
            this.style.width = '300px'//谁调用我,我代表谁,this代表div对象
            //console.log(this);
            this.style.backgroundColor='skyblue'//驼峰命名法
        }
    </script>

方式二 :
className

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .change{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="first"></div>
    <!-- 修改样式 -->
    <script>
        var div = document.querySelector('div')
        div.addEventListener('click',function(){
            //上面这种方式只适合改动的样式比较少的情况
            /* this.style.width='200px'
            this.style.height='200px'
            this.style.backgroundColor='skyblue' */
            //可以通过修改元素的className的值,来更改样式.适合改动样式比较多的情况
            this.className='change'
            //假如div之前就有样式,如果想保留之前的样式,可以使用 多类名选择器
            this.className = 'first change' //保留了之前的first样式
        })
    </script>
</body>

3) 鼠标事件

事件名	触发条件
onclick	鼠标点击
onblur	失去焦点
onfocus	获得焦点
onmouseover	鼠标经过

<body>
    <input type="text">
    <script>
        var text = document.querySelector('input')
        //添加获得焦点事件
        text.onfocus=function(){
            console.log('获得焦点');
        }
        //添加失去焦点事件
        text.onblur=function(){
            console.log('失去焦点');
        }
    </script>

<body>
    <input type="text" value="婴幼儿奶粉">
    <script>
        // 需求:
        // 文本框获得焦点时, 文字颜色变深, 文本框的内容清空
        // 文本框失去焦点时, 颜色恢复, 文本框为空时, 提示内容
        //获取文本框
        var text = document.querySelector('input')
        //添加获得焦点事件
        text.onfocus=function(){
            //文字颜色变深
            text.style.color='#333'
            //文本框内容清空
            if(text.value == '婴幼儿奶粉'){
                text.value=''
            }
        }
        //添加失去焦点事件
        text.onblur=function(){
            //文字颜色变深
            text.style.color='#999'
            //文本框为空时, 提示内容
            if(text.value == ''){
                text.value='婴幼儿奶粉'
            }
        }
    </script>
</body>

4) 键盘事件

事件名	触发条件
onkeyup	按键松开时触发
onkeydown	按键按下时触发
onkeypress	按键按下时触发, 不能识别ctrl, shift等功能键, 区分大小写

 <script>
        /* 
        keydown 某个键盘的键被按下 
        keyup 某个键盘的键被松开 
        keypress 某个键盘的键被按下或按住 
        */
        document.addEventListener('keydown',function(){
            console.log('按下按键');
        })
        document.addEventListener('keyup',function(){
            console.log('松开按键');
        })
        document.addEventListener('keypress',function(){
            console.log('不能识别功能键');//例如 按shift键,他不会被触发
        })
    </script>

5) 新增的事件注册方式

addEventListener( )

在注册事件时不用加on

示例

domObj.addEventListener('click', function() {
  alert(22);
})

var div = document.querySelector('div')
//h5的事件监听  第一个参数是事件名称 不要加on 
div.addEventListener('click',function(e){
     console.log('我被点了');
     console.log(e);
     console.log(e.type);//获取事件的方式
        })

6) 事件对象

触发一个事件的时候,就会产生事件对象,这个对象包含了所有与事件相关的信息.

 本身就存在的<br />     给函数一个参数, 在函数体里面就可以使用  例如:e<br />     通过它可以获取事件的方式<br />     还可以阻止标签的默认行为 (跳转,提交等)<br />     还可以获取点击的按键<br />     还可以阻止事件的冒泡

示例

domObj.addEventListener('click', function(e) {
  console.dir(e)
})

比较常用的属性和方法

e.target: 触发事件的对象
e.preventDafult(): 阻止默认行为

e.stopPropagation(): 阻止冒泡

e.preventDafult(): 阻止默认行为

<div>中国移动</div>
<a href="http://wwww.baidu.com">百度</a>
<script>
      //获取元素
      var div = document.querySelector('div')
      var a = document.querySelector('a')
      a.addEventListener('click',function(e){
         /*  console.log('我被点了');
          console.log(e);
          console.log(e.type);//获取事件的方式
          console.log(e.preventDefault);//阻止a标签默认的跳转 */
          if ( e && e.preventDefault ){
              e.preventDefault(); //阻止默认浏览器动作(W3C) 
          }else {
              window.event.returnValue = false; //IE中阻止函数器默认动作的方式 
          }
          return false; 
      })
  </script>

e.stopPropagation(): 阻止冒泡

```javascript

son儿子

<a name="Hi60S"></a>
#### e.target: 触发事件的对象
    通过事件对象e.target 就可以拿到具体点击了哪个元素
```javascript
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul')
        ul.addEventListener('click',function(e){
            //console.log(this);//this这里打印是ul 因为这个事件是给ul添加的
            console.log(e.target);//通过事件对象e.target 就可以拿到具体点击了哪个元素
        })
    </script>

5 节点操作

1) 创建元素

createElement(‘元素名称’)

<script>
        /* 通过js动态的在页面中添加一条水平线 */
        //createElement() 创建元素节点。 
        //1.创建一个hr元素对象(默认是在内存中生成的,还需要添加到父元素上)
         var hr = document.createElement('hr')
         //2.获取父元素body对象
         var body = document.querySelector('body')
         //3,将生成的标签添加到body里面(默认是添加到最后面)
         body.appendChild(hr)
    </script>

2) 添加元素

appendChild( ) 在父级节点的子节点后面追加元素
insertBefore( ) 在父级节点的子节点前面追加元素

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        padding: 100px;
      }
      textarea {
        width: 200px;
        height: 100px;
        border: 1px solid skyblue;
        outline: none;
        resize: none;
      }
      ul {
        margin-top: 40px;
      }
      li {
        width: 300px;
        margin: 10px 0;
        padding: 5px;
        background-color: blueviolet;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <textarea></textarea>
    <button>发布</button>
    <ul></ul>
    <script>
       //获取dom对象
       var textarea = document.querySelector('textarea')
       var button = document.querySelector('button')
       var ul = document.querySelector('ul')
       //给btn添加点击事件
       button.addEventListener('click',function(){
          //判断:如果文本域中没有内容,弹出提示框,并结束代码
          if(textarea.value == ''){
            alert('请输入内容')
            return  //结束这个函数
          }
          //创建li元素
          var li = document.createElement('li')
          //将文本域中的内容赋给li元素
          li.innerHTML = textarea.value
          //将li添加到ul中
          //ul.appendChild(li)  //在父级元素的子元素的后面追加新元素
          ul.insertBefore(li,ul.children[0]) //在父级元素的子元素的前面追加新元素
          //每次添加完之后,清空文本域中的内容
          textarea.value = ''
       })
    </script>
  </body>

3) 删除元素

removeChild( )

Web前端

JavaScript DOM

DOM 文档对象模型

1 DOM的概念

2 DOM树

3 获取元素

4 DOM事件

1) 什么是事件驱动

2) DOM操作元素

1 DOM操作元素属性

2 DOM操作元素标签体

3 DOM操作元素CSS样式

3) 鼠标事件

4) 键盘事件

5) 新增的事件注册方式

6) 事件对象

e.preventDafult(): 阻止默认行为

e.stopPropagation(): 阻止冒泡

5 节点操作

1) 创建元素

2) 添加元素

3) 删除元素