JavaScript DOM

获取元素

• 根据 ID 获取元素

语法: document.getElementById(id)

<div id='time'>2020-01-09div>

<script>
    var timer = document.getElementById('time');
    console.log(timer); // 根据 ID 获取
    // 查看里面的属性和方法
    console.dir(timer)
script>

• 根据标签名获取元素

语法: document.getElementsByTagName('标签名')

<ul>
    <li>u1li>
ul>

<ol id="ol">
    <li>olli>
ol>

<script>
    // 根据元素名获取
    var lis = document.getElementsByTagName('li');
    console.log(lis);  // HTMLCollection(2) [li, li] 返回所有的 ol和ul 的 li 元素 是复数

    // 可以通过ele 继续获取元素名
    var ol_ele = document.getElementById('ol');
    var ol_lis = ol_ele.getElementsByTagName('li');
    console.log(ol_lis);  // ol 下所有的li

script>

• 根据类名获取元素  H5 新增

语法: document.getElementsByClassName('类名')

<div class="cla">div>
<script>
    var cla = document.getElementsByClassName('cla');  // HTMLCollection [div.cla] 返回对象集合，需要使用对象 得取第一个元素，第二个是length
    console.log(cla);
script>

• 选择器方式获取元素 H5新增

语法: 
document.querySelector('选择器')
document.querySelectorAll('选择器')

<div class="cla">div>
<ul>
    <li>1li>
    <li>2li>
ul>
<script>
    var cla = document.querySelector('.cla'); // 返回对象元素， 如果是class 则写.类名，id 则写#id
    console.log(cla);

    var lis = document.querySelectorAll('li');  // 返回所有对象集合
    console.log(lis);
script>

• 获取特殊元素(body, html)

document.body;  // body
document.documentElement; // html

事件

事件三要素

1. 事件源: 触发事件的元素
2. 事件类型: 什么事件 例如click点击事件
3. 事件处理程序: 事件处理函数

常见的鼠标事件

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

操作元素

改变元素内容(设置，获取)

• ele.innerText
• ele.innerHtml

区别:

1. 获取内容时: innerText去掉html标签，同时空格和换行也去掉, innerHtml 保留html标签，空格和换行
2. 设置内容时: innerText不会识别html，而innerHTML会识别

    

    

        我是文字
        123
    

    

示例代码

元素属性操作

• 获取属性的值

元素对象.属性名

• 设置属性的值

元素对象.属性名 = 值

示例代码

表单元素属性

• 设置表单属性值

元素对象.属性名

• 设置属性值

元素对象.属性名 = 值
表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。

    按钮
    text" value="输入内容">
    

示例代码

en">

    UTF-8">
    

    


    
class="box">
        for="">
            images/close.png" alt="" id="eye">
        
        password" name="" id="pwd">
    

    

案例-密码显示和隐藏

样式属性

• style属性改变

元素对象的style属性也是一个对象！
元素对象.style.样式属性 = 值

示例代码

• 操作className属性

元素对象.className = 值;

因为class是关键字，所有使用className

className会覆盖掉原先的类名

en">

    UTF-8">
    name="viewport" content="width=device-width, initial-scale=1.0">
    X-UA-Compatible" content="ie=edge">
    

    



    
class="box">
        淘宝二维码
        images/tao.png" alt="">
        class="close-btn">×
    

    

案例-关闭按钮

en">

    UTF-8">
    name="viewport" content="width=device-width, initial-scale=1.0">
    X-UA-Compatible" content="ie=edge">
    

    



     text" value="手机">

    

案例-显示隐藏文本框内容

en">

    UTF-8">
    name="viewport" content="width=device-width, initial-scale=1.0">
    X-UA-Compatible" content="ie=edge">
    

    




    
class="register">
        password" class="ipt">
        
class="message">请输入6~16位密码
    

    

案例-注册密码提示错误