[TOC]

<!DOCTYPE html>
<html lang="en">  
<body>
 <div id="app">
     <p>
         我在div内
     </p>
 </div>

 <!-- ul#list>li{$.xxxx}*5 -->
 <ul class="list">
     <li>1.xxxx</li>
     <li>2.xxxx</li>
     <li>3.xxxx</li>
     <li>4.xxxx</li>
     <li>5.xxxx</li>
 </ul>
 <a href="http://www.baidu.com" id="link">百度</a>

 <script>
     // 1.获取dom节点对象
     var $app = document.getElementById('app');
     var $app2 = document.querySelector('#app');  // html5提供的方法
     var $li = document.querySelector('li');  // 只能获取一个元素
     var $liList = document.querySelectorAll('li'); // 获取所有的li标签
     var $list = $li.parentNode;

     // 2.给ul列表添加一个元素
     var $newLi = document.createElement('li');
     // $newLi.innerText = '6.谢谢谢谢谢寻寻寻';
     $newLi.innerHTML = '<span>新标签</span> <button>删除</button>';

     var $list = document.querySelector('.list'); 
     $list.appendChild($newLi);
     // 3.删除#app节点 
     $app.remove();
 </script>
</body>
</html>

(3) 节点内容操作

3.1 获取 dom 节点的内容

节点.innerHTML 获取内容连同元素节点
节点.innerText 只获取文本内容

3.2 修改节点内容

节点.innerHTML = ‘xxxx’
节点.innerText = ‘xxxx’;

<!DOCTYPE html>
<html lang="en">  
<body>
    <div id="app">
        <p>
            我在div内
        </p>
    </div> 

    <script>
       // 4.内容操作
        var $app = document.querySelector('#app');
        // 获取#app的内容,包含标签
        var $content = $app.innerHTML;
        console.log('$innerHTML',$content);
        // 获取#app的内容,只有文本
        var $text = $app.innerText;
        console.log('$text',$text);

        // 修改内容
        $app.innerHTML = '<button>点击</button>';
        $app.innerText = 'xxxxxxxxxxx';
    </script>
</body>
</html>

(4) DOM 节点的属性操作

4.1 获取 DOM 节点的属性

节点.属性名
节点.getAttribute(‘属性名’)
节点.dataset // 自定义属性对象

4.2 修改节点属性

节点.属性名=属性值; //

节点.setAttribute(属性名,属性值);

<!DOCTYPE html>
<html lang="en"> 
<body>
 <a href="http://www.baidu.com" id="link" target="_blank" data-username="张三" data-age="100">百度</a>

 <script>
     // 1.获取节点
     var $link = document.querySelector('#link');
     // 2.获取a标签的href属性
     var href = $link.href;
     console.log('href',href);
     var target = $link.getAttribute('target');
     console.log('target',target);
     // 3.获取自定义属性,自定义属性都会放入dataset对象里
     var obj = $link.dataset;
     console.log('obj',obj);

     // 4.修改a标签的href属性
     $link.href = 'http://sina.com';
     $link.innerText = '新浪';
     console.log('href新属性',$link.href);
     // 修改属性的另一种方式
     $link.setAttribute('target','self'); 
 </script>
</body>
</html>

(5) class操作

5.1 获取class

节点.getAttibute(‘class’); // class也是一个属性
节点.classList // 返回元素的类列表

5.2 修改class

节点.classList.add(‘aaa’); // 给元素添加类aaa
classList.remove(‘aaa’); // 移除类aaa ```javascript <!DOCTYPE html>

很多内容很多内容很多内容很多内容

<a name="Ggu5R"></a>
## (6) style操作
**6.1 获取style**

1. 节点.style.fontSize // 获取字体大小, 仅限于行内样式
1. window.getComputedStyle(节点,null).fontSize;  // 所有样式

**6.2 修改样式**

1. 节点.style.fontSize = '30px';
1. 通过添加或移除类进行修改

javascript <!DOCTYPE html>

很多内容很多内容很多内容很多内容

<a name="tBHi7"></a>
## (7)事件绑定
<a name="77d10062"></a>
##### 7.1 普通事件绑定(DOM 一级)

- onxxx   // 绑定xxx事件
- dom节点.click  // 给dom节点绑定click事件
<a name="5c1f573b"></a>
##### 7.2 高级事件绑定(DOM 二级) addEventListener
dom一级事件绑定和dom二级事件绑定区别: 同类型事件, 前者绑定多次, 只会执行一次, 后者可以执行多次
<a name="6a80414a"></a>
##### 7.3 使用 js 触发事件
节点.click();

javascript // 普通事件绑定(DOM一级事件绑定) <!DOCTYPE html>

xxxxxxxxxx

// 高级事件绑定(DOM二级事件绑定) <!DOCTYPE html>


<a name="lEgTi"></a>
## (8) 事件常见类型

| onchange | HTML 元素改变 |
| --- | --- |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 用户在一个 HTML 元素上移动鼠标 |
| onmouseout | 用户从一个 HTML 元素上移开鼠标 |
| onkeydown | 用户按下键盘按键 |
| onkeyup | 用户松开键盘按键 |
| onkeypress | 用户按下然后松开键 |
| onload | 浏览器已完成页面的加载 |
| oninput | 键盘输入事件 |
| touchStart | 触摸开始 (移动端 |
| touchMove | 滑动 (移动端) |
| touchEnd | 触摸结束 (移动端) |

1. 更多事件类型

https://www.runoob.com/jsref/dom-obj-event.html


<a name="KZDyx"></a>
## (9) 事件对象

1. event 对象: 每个事件被触发时,都会产生一个event对象
1. target 和 currentTarget
   - target 表示被触发的元素(比如: 点击事件就是被点击的元素)
   - currentTarget 是事件绑定的元素
3. 阻止默认事件

```javascript
// 1.事件对象event
<!DOCTYPE html>
<html lang="en">
<head> 
</head>
<body>
    <button onclick="test()">点击</button>

    <script>  
        function test() {
            console.log(event);
        }
    </script>
</body>
</html>


// 2.target和currentTarget
<!DOCTYPE html>
<html lang="en">
<head> 
</head>
<style>
    .box {width: 200px;height: 200px;border: 1px solid;}
    .box button {margin: 30px;}
</style>
<body>

    <div class="box">
        <button>点击</button>
    </div>
     <script>
         // target和currentTarget的区别
         var $box = document.querySelector('.box');
         $box.onclick = function() {
           // event.target表示被点击的元素(可能会变)
            console.log('target:', event.target);
           // event.currentTarget表示绑定的元素(不会改变)
            console.log('cureentTarget:', event.currentTarget);
         }
     </script>       
</body>
</html>

// 3.阻止默认事件
<!DOCTYPE html>
<html lang="en"> 
<body>

    <a id="a1" href="http://www.baidu.com">百度</a>
    <a id="a2" href="http://www.baidu.com">百度</a>
    <a id="a3" href="http://www.sina.com" onclick="toSina();return false;">新浪</a>

    <script>
        var $a1 = document.querySelector('#a1');
        $a1.onclick = function () {
            console.log('阻止默认行为方法1');
            event.preventDefault(); 
        }

        var $a2 = document.querySelector('#a2');
        $a2.onclick = function () {
            console.log('阻止默认行为方法2');
            return false;
        }

        function toSina() {
            console.log('阻止默认行为方法2');

        }
    </script>
</body> 
</html>


// 4.键盘按下回车
<!DOCTYPE html>
<html lang="en"> 
<body>
    <input type="text" name="" id="inp"> 

    <script>
        var $inp = document.querySelector('#inp');
        $inp.onkeypress = function() { 
            if(event.keyCode === 13) {
                var msg = $inp.value;
                alert(msg);
            }
        }
    </script>
</body>
</html>

(10) 事件冒泡和事件捕获

事件流(事件的传播)
1. 事件捕获阶段
2. 目标阶段
3. 事件冒泡阶段
事件冒泡应用: 事件委托(托管)
阻止事件冒泡

作业: 完成todo list
练习.gif

答案:

// todoList.html
<!DOCTYPE html>
<html lang="en"> 
<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">
    <link rel="stylesheet" href="./todoList.css">
</head> 
<body>
    <div class="box">
        <input onkeypress="addItem()" type="text" class="inp" placeholder="请输入清单">
        <ul onclick="delItem();" class="list">
            <li class="item">
                <span>xxxx</span>
                <button>x</button>
            </li>
            <li class="item">
                <span>xxxx</span>
                <button>x</button>
            </li>
            <li class="item"> <span>xxxx</span> <button>x</button> </li>
        </ul>
    </div>

    <script src="./todo.js"></script>
</body> 
</html>

// todoList.css
* {
  padding: 0;
  margin: 0;
}
ul,
li {
  list-style: none;
}
.box {
  margin: 20px auto;
  width: 375px;
  min-height: 400px;
  box-shadow: 1px 1px 5px #888;
  padding: 20px;
}
.inp {
  width: 100%;
  height: 50px;
  text-indent: 10px;
  border: 1px solid #ebebeb;
  outline: none;
  font-size: 20px;
}
.item {
  display: flex;
  justify-content: space-between;
  height: 50px;
  border-bottom: 1px solid #ebebeb;
  align-items: center;
}
.item button {
  border: none;
  padding: 8px;
}

// todo.js
/**
 * 1.创建li元素
 * 2.将输入的内容赋给li元素
 * 3.当回车的时候,将li元素添加到列表的后面
 * 4.清空输入的内容
 */
function addItem() {
    // 创建li元素
    var $li = document.createElement('li');  
    // 获取输入框节点对象
    var $inp = document.querySelector('.inp');
    // 获取输入框的值(就是输入的内容)
    var text = $inp.value;
    // 将输入的内容赋给li元素
    $li.innerHTML =  '<li class="item"> <span>'+text+'</span> <button>x</button> </li>';
    // 当回车的时候,将li元素添加到列表的后面
    if(event.keyCode === 13 && $inp.value) {
        document.querySelector('.list').appendChild($li);
        $inp.value = '';
    } 
}

function delItem() {
    // 被点击的元素
    var target = event.target; 
    // 只有点击的元素是button按钮, 才执行删除操作 
    if (target.tagName === 'BUTTON') {
        // 删除button所在的li元素
        target.parentNode.remove();
    }  
}

第3阶段 Js基础

第7节 Dom 对象

目录

(1) Dom 树, Dom节点和 Dom 对象

(2) 节点操作

(3) 节点内容操作

(4) DOM 节点的属性操作

(5) class操作

(10) 事件冒泡和事件捕获

答案: