一、获取元素

1）document.getElementById()

<div id="time">2019-9-9</div>
<script>
// 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
// 2. get 获得 element 元素 by 通过 驼峰命名法 
// 3. 参数 id是大小写敏感的字符串
// 4. 返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
</script>

2）document.getElementsByTagName(‘li’)

<ul>
<li>知否知否，应是等你好久11</li>
<li>知否知否，应是等你好久11</li>
<li>知否知否，应是等你好久11</li>
<li>知否知否，应是等你好久11</li>
</ul>

<ol id="ol">
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
</ol>

<script>
// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {
    console.log(lis[i]);

}
// 3. 如果页面中只有一个li 返回的还是伪数组的形式 
// 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
// 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
// var ol = document.getElementsByTagName('ol'); // [ol]
// console.log(ol[0].getElementsByTagName('li'));
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
</script>

3) getElementsByClassName,querySelector,querySelectorAll

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
    <li>首页</li>
    <li>产品</li>
</ul>
</div>
<script>
// 1. getElementsByClassName 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);

// 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);

// 3. querySelectorAll()返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>

4) 获取body,html

<body>
<script>
    // 1.获取body 元素
    var bodyEle = document.body;
    console.log(bodyEle);
    console.dir(bodyEle);
    
    // 2.获取html 元素
    var htmlEle = document.documentElement;
    console.log(htmlEle);
</script>
</body>

二、事件三要素:事件源 事件类型 事件处理程序

1）事件源 事件类型 事件处理程序

点击按钮，触发弹窗

<body>
<button id="btn">唐伯虎</button>
<script>
    // 点击一个按钮，弹出对话框
    // 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
    //(1) 事件源 事件被触发的对象   谁  按钮
    var btn = document.getElementById('btn');
    //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
    //(3) 事件处理程序  通过一个函数赋值的方式 完成
    btn.onclick = function() {
        alert('点秋香');
    }
</script>

2）执行事件步骤:获取事件源，绑定事件（注册事件），添加事件处理程序

<body>
<div>123</div>
<script>
    // 执行事件步骤
    // 点击div 控制台输出 我被选中了
    // 1. 获取事件源
    var div = document.querySelector('div');
    // 2.绑定事件 注册事件
    // div.onclick 
    // 3.添加事件处理程序 
    div.onclick = function() {
        console.log('我被选中了');
    }
</script>
</body>

三、修改元素内容innerText,innerHTML

3) 点击按钮改元素内容为当前时间，自动在元素内加当前时间

<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>1123</p>
<script>
// 当我们点击了按钮，  div里面的文字会发生变化
// 1. 获取元素 
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.注册事件
btn.onclick = function() {
    // div.innerText = '2019-6-6';
    div.innerHTML = getDate();
}

// 3.我们元素可以不用添加事件直接加载时即在p元素添加当前时间
var p = document.querySelector('p');
p.innerHTML = getDate();

function getDate() {
    var date = new Date();
    // 我们写一个 2019年 5月 1日 星期三
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var dates = date.getDate();
    var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    var day = date.getDay();
    return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
}
</script>
</body>

java 怎么获取Element标签的属性 js获取element_事件源

4）innerText,innerHTML区别

<div></div>
<p>
    我是文字
    <span>123</span>
</p>
<script>
    // innerText 和 innerHTML的区别 
    // 1. innerText 不识别html标签 非标准  去除空格和换行
    var div = document.querySelector('div');
    // div.innerText = '<strong>今天是：</strong> 2019';
    
    // 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
    div.innerHTML = '<strong>今天是：</strong> 2019';
    // 这两个属性是可读写的  可以获取元素里面的内容
    var p = document.querySelector('p');
    console.log(p.innerText);
    console.log(p.innerHTML);
</script>

四、修改元素属性

5）修改元素属性值element.src/.title

如果img里没有如title属性，则一样会自动添加对应属性和值

<body>
<style>
    img {
        width: 300px;
    }
</style>
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button> <br>
<img src="images/ldh.jpg" alt="" title="刘德华">

<script>
    // 修改元素属性  src
    // 1. 获取元素
    var ldh = document.getElementById('ldh');
    var zxy = document.getElementById('zxy');
    var img = document.querySelector('img');
    // 2. 注册事件  处理程序
    zxy.onclick = function() {
        img.src = 'images/zxy.jpg';
        img.title = '张学友';
    }
    ldh.onclick = function() {
        img.src = 'images/ldh.jpg';
        img.title = '刘德华';
    }
</script>
</body>

java 怎么获取Element标签的属性 js获取element_事件处理_02

5.2 根据时间显示不同问候语图片

<img src="images/s.gif" alt="">
<div>上午好</div>
<script>
    // 根据系统不同时间来判断，所以需要用到日期内置对象
    // 利用多分支语句来设置不同的图片
    // 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
    // 需要一个div元素，显示不同问候语，修改元素内容即可
    // 1.获取元素
    var img = document.querySelector('img');
    var div = document.querySelector('div');
    // 2. 得到当前的小时数
    var date = new Date();
    var h = date.getHours();
    // 3. 判断小时数改变图片和文字信息
    if (h < 12) {
        img.src = 'images/s.gif';
        div.innerHTML = '亲，上午好，好好写代码';
    } else if (h < 18) {
        img.src = 'images/x.gif';
        div.innerHTML = '亲，下午好，好好写代码';
    } else {
        img.src = 'images/w.gif';
        div.innerHTML = '亲，晚上好，好好写代码';

    }
</script>

6）操作表单元素属性-点击按钮一次后禁用

<button>按钮</button>
<input type="text" value="输入内容">
<script>
    // 1. 获取元素
    var btn = document.querySelector('button');
    var input = document.querySelector('input');
    // 2. 注册事件 处理程序
    btn.onclick = function() {
        // input.innerHTML = '点击了';  这个是 普通盒子 比如 div 标签里面的内容
        // 表单里面的值 文字内容是通过 value 来修改的
    input.value = '被点击了';
        // 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用
        // btn.disabled = true;
    this.disabled = true;
        // this 指向的是事件函数的调用者 btn
    }
</script>

6.2)操作表单元素属性：点击眼睛开/关，密码显示/隐藏

<style>
    .box {
        position: relative;
        width: 400px;
        border-bottom: 1px solid #ccc;
        margin: 100px auto;
    }
    
    .box input {
        width: 370px;
        height: 30px;
        border: 0;
        outline: none;
    }
    
    .box img {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 24px;
    }
</style>
<div class="box">
<label for="">
    <img src="images/close.png" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<script>
// 1. 获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
// 2. 注册事件 处理程序
var flag = 0;
eye.onclick = function() {
    // 点击一次之后， flag 一定要变化
    if (flag == 0) {
        pwd.type = 'text';
        eye.src = 'images/open.png';
        flag = 1; // 赋值操作
    } else {
        pwd.type = 'password';
        eye.src = 'images/close.png';
        flag = 0;
    }

}
</script>

五、修改元素样式.style.backgroundColor=‘black’

7）操作元素修改样式属性-点击改变颜色

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<div></div>
<script>
    // 1. 获取元素
    var div = document.querySelector('div');
    // 2. 注册事件 处理程序
    div.onclick = function() {
        // div.style里面的属性 采取驼峰命名法 
        this.style.backgroundColor = 'purple';
        this.style.width = '250px';
    }
</script>

7.2 点击按钮开关灯

<button>开关灯</button>

<script>
var body=document.querySelector('body') //或 body=document.body
var btn=document.querySelector('button')
var flag=true //true开灯,false关灯
btn.onclick=function(){
    if(flag){
        body.style.backgroundColor='black'  
        flag=false   
    }else{
        body.style.backgroundColor='white'
        flag=true
    }
}
</script>

7.3 关闭二维码

<style>
    .box {
        position: relative;
        width: 74px;
        height: 88px;
        border: 1px solid #ccc;
        margin: 100px auto;
        font-size: 12px;
        text-align: center;
        color: #f40;
        /* display: block; */
    }
    
    .box img {
        width: 60px;
        margin-top: 5px;
    }
    
    .close-btn {
        position: absolute;
        top: -1px;
        left: -16px;
        width: 14px;
        height: 14px;
        border: 1px solid #ccc;
        line-height: 14px;
        font-family: Arial, Helvetica, sans-serif;
        cursor: pointer;
    }
</style>
</head>

<body>
<div class="box">
    淘宝二维码
    <img src="images/tao.png" alt="">
    <i class="close-btn">×</i>
</div>
<script>
    // 1. 获取元素 
    var btn = document.querySelector('.close-btn');
    var box = document.querySelector('.box');
    // 2.注册事件 程序处理
    btn.onclick = function() {
        box.style.display = 'none';
    }
</script>

8）用循环来显示精灵图

java 怎么获取Element标签的属性 js获取element_处理程序_03

<style>
* {
    margin: 0;
    padding: 0;
}

li {
    list-style-type: none;
}

.box {
    width: 250px;
    margin: 100px auto;
}

.box li {
    float: left;
    width: 24px;
    height: 24px;
    background-color: pink;
    margin: 15px;
    background: url(images/sprite.png) no-repeat;
}
</style>
 
<div class="box">
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</div>
<script>
// 1. 获取元素 所有的小li 
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
    // 让索引号 乘以 44 就是每个li 的背景y坐标  index就是我们的y坐标
    var index = i * 44;
    lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>

java 怎么获取Element标签的属性 js获取element_事件源_04

9）显示隐藏文本框内容，获/失焦点

<style>
    input {color: #999; } 
</style>
<input type="text" value="手机">
<script>
    // 1.获取元素
    var text = document.querySelector('input');
    // 2.注册事件 获得焦点事件 onfocus 
    text.onfocus = function() {
            // console.log('得到了焦点');
            if (this.value === '手机') {
                this.value = '';
            }
            // 获得焦点需要把文本框里面的文字颜色变黑
            this.style.color = '#333';
        }
        // 3. 注册事件 失去焦点事件 onblur
    text.onblur = function() {
        // console.log('失去了焦点');
        if (this.value === '') {
            this.value = '手机';
        }
        // 失去焦点需要把文本框里面的文字颜色变浅色
        this.style.color = '#999';
    }
</script>

10) 修改类名修改元素样式.className

<div class="first">文本</div>
<script>
    // 1. 使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用
    var test = document.querySelector('div');
    test.onclick = function() {
        // this.style.backgroundColor = 'purple';
        // this.style.color = '#fff';
        // this.style.fontSize = '25px';
        // this.style.marginTop = '100px';
        // 让我们当前元素的类名改为了 change

        // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
        // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
        // this.className = 'change';
        this.className = 'first change';
    }
</script>

11）输入密码实时检测

<style>
    div {
        width: 600px;
        margin: 100px auto;
    }
    
    .message {
        display: inline-block;
        font-size: 12px;
        color: #999;
        background: url(images/mess.png) no-repeat left center;
        padding-left: 20px;
    }
    
    .wrong {
        color: red;
        background-image: url(images/wrong.png);
    }
    
    .right {
        color: green;
        background-image: url(images/right.png);
    }
</style>

<body>
<div class="register">
    <input type="password" class="ipt">
    <p class="message">请输入6~16位密码</p>
</div>
<script>
    // 首先判断的事件是表单失去焦点 onblur
    // 如果输入正确则提示正确的信息颜色为绿色小图标变化
    // 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
    // 因为里面变化样式较多，我们采取className修改样式
    // 1.获取元素
    var ipt = document.querySelector('.ipt');
    var message = document.querySelector('.message');
    //2. 注册事件 失去焦点
    ipt.onblur = function() {
        // 根据表单里面值的长度 ipt.value.length
        if (this.value.length < 6 || this.value.length > 16) {
            // console.log('错误');
            message.className = 'message wrong';
            message.innerHTML = '您输入的位数不对要求6~16位';
        } else {
            message.className = 'message right';
            message.innerHTML = '您输入的正确';
        }
    }
</script>

java 怎么获取Element标签的属性 js获取element_事件处理_05