JavaScriptDOM操作

Dom 是Document Object Model （文档对象模型）的缩写

文档对象模型（DOM）是HTML和XML文档的编程接口，它提供了对文档的结构优化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构/样式和内容

JavaScriptDOM操作

DOM查找方法

获取 ID

语法：document.getElementById(‘id’)

功能：返回对拥有指定ID的第一个对象的引用

返回值： DOM对象

说明：ID为DOM元素上的ID属性的值，ID 是唯一的一个页面中不能有重复的ID

<div id="box">
    元素
</div>
// 获取 ID 元素
var box = document.getElementById('box');
console.log(box);

获取类

语法：document.getElementsByTagName(‘tag’)

功能：返回一个对所有tag标签引用的集合

返回值：数组

说明：tag 要获取的标签名称

<ul id="list">
    <li>前端</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>JAVASCRIPT</li>
</ul>
<ol>
    <li>后端开发</li>
    <li>AI 技术</li>
</ol>
// 获取 页面中所 li 元素
var tag = document.getElementsByTagName('li');
console.log(tag);
// 返回的是一个数组，需要遍历才能拿到每个元素

// 只获取 list 中的 li元素
var tag = document.getElementById('list').getElementsByTagName('li');
console.log(tag); //获取 list 中的所有li元素

DOM元素的样式

语法：ele.style.styleName = styleValue

功能：设置 ele 元素的CSS样式

说明：

1.ele 要设置的样式的DOM对象

2.styleName 要设置的样式名称

不能用 “ -- ” 连字符形式 如： font-seze ,需要写成驼峰命名形式： fontSize

3.styleValue 设置的样式值

<div id="box">
    元素
</div>

//   ID 元素 设置样式
var box = document.getElementById('box');
// 设置字体颜色样式
box.style.color = "red";
// 设置样式 字体大小
box.style.fontWeight = 'bold';



<ul id="list">
    <li>前端</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>JAVASCRIPT</li>
</ul>

// 类 元素 设置样式
var list = document.getElementsByTagName('li');
// 它返回值，不是DOM对象，而是一个数组，所以需要循环遍历每个元素
for(var i = 0; i< list.length; i++){
    list[i].style.color = 'pink';
    // 如果单独设置，需要判断 谁是谁
    if( i == 1){
        list[i].style.color = '#000'
    }else if( i == 2){
        list[i].style.color = '#111'
    }else if( i == 3){
        list[i].style.color = '#222'
    }else{
        list[i].style.color = '#333'
    }
}

inner HTML

语法：ele.innerHTML

功能：返回ele元素开始和结束标签之间的HTML

语法：ele.innerHTML = ‘html’

功能：设置ele元素开始和结束标签之间的HTML内容为HTML

<ul id="list">
    <li>前端</li>
    <li>HTML</li>
    <li><i>CSS</i></li>
    <li><b>JAVASCRIPT</b></li>
</ul>
// 类 元素 设置样式
var list = document.getElementsByTagName('li');
for(var i = 0; i< list.length; i++){
    console.log(list[i].innerHTML);  // 包含标签里面的标签  <b>JAVASCRIPT</b>
    // 添加内容
    list[i].innerHTML += '程序';
}

className

语法：ele.className

功能：返回ele元素的 class 属性

语法：ele.className = ‘cls’

功能：设置ele元素的class属性为 cls

<ul id="list">
    <li>前端</li>
    <li>HTML</li>
    <li><i>CSS</i></li>
    <li><b>JAVASCRIPT</b></li>
</ul>

// 获取 
var list = document.getElementsByTagName('li');
for(var i = 0; i< list.length; i++){
    console.log(list[i].innerHTML);  // 包含标签里面的标签  <b>JAVASCRIPT</b>
    // 添加内容
    list[i].innerHTML += '程序';
    // 添加 class 类名,( 如果原来元素有类，则会覆盖。 如果需要追加，则要把原先类重新添加上)
    list[1].className = 'current';
}

DOM 元素添加属性

获取属性 getAttribute

语法：ele.getAttribute(‘attribute’)

功能：返回ele元素的 attribute属性 (获取自定义属性)

说明：

ele是要操作的dom对象

attribute是要获取HTML 属性（如：id   type vule）

<p id='text' align='center' date-type='title'> 文本 </p>
<script>
    var p = document.getElementById("text");
    // 获取属性
    console.log(p.id);
</script>

设置属性 setAttribute

功能：返回ele元素的设置属性

说明：

ele是要操作的dom对象

attribute 要设置的属性名称

value 设置的attribute 属性的值

注：

1.setAttribute方法必须要有俩个参数

2.如果value是字符串，需加引号

3.setAttribute（）有兼容性问题

<p id='text' align='center' date-type='title'> 文本 </p>
<script>
    // 获取属性
    var p = document.getElementById("text");
    // 设置属性
    p.setAttribute("data-color","red");
   // 给P 设置一个 isRead 属性
   p.setAttribute("isRead","false");
</script>

删除属性 removeAttribute

语法：ele.removeAttribute( “attribute” );

功能：删除ele上的 isRead 属性

说明： 1. ele 要操作的DOM对象 2. attribute 要删除的属性名称

<p id='text' align='center' date-type='title'> 文本 </p>
<script>
    // 获取属性
    var p = document.getElementById("text");
    // 设置属性
    p.setAttribute("data-color","red");
    // 设置 isRead 属性
    p.setAttribute("isRead","false");
    // 删除 isRead 属性
    p. removeAttribute('isRead');
    
</script>

JavaScriptDOM 事件

DOM 0级事件绑定

语法：ele.事件 = 执行脚本

功能：在 DOM对象上绑定事件

说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用

<div class="lock" id="btn">锁定</div>

// 方法一 判断文本内容是否更改
    // 获取按钮
    var btn = document.getElementById('btn');
    // 给按钮绑定点击事件，this是对该DOM元素对引用
	     btn.onclick = function () {
        // 判断如果按钮是锁定，则显示为解锁，灰色。否则显示为锁定，蓝色
        if (this.innerHTML == '锁定'){
            this.className = 'unlock';
            this.innerHTML = '解锁'
        }else {
            this.className = 'lock';
            this.innerHTML = '锁定';
        }
}


// 方法二，判断类是否更改
    // 获取按钮
    var btn = document.getElementById('btn');
    // 给按钮绑定点击事件，this是对该DOM元素对引用
    btn.onclick = function () {
        // 判断如果按钮是锁定，则显示为解锁，变为灰色。否则显示为锁定，蓝色
        if (this.className == 'lock'){
            this.className = 'unlock';
            this.innerHTML = '解锁'
        }else {
            this.className = 'unlock';
            this.innerHTML = '锁定';
        }
    }


// 注意⚠️
function clickBtn(){
	   alert('我是按钮🔘');
}
// 使用这种方式调用函数，函数后面千万别写 （）；不然函数会自动执行。
btn.onclick = clickBtn;

案例

// 获取按钮
var btn1 = document.getElementById('btn1');
btn1.onclick = function () {
    // 存储
    var Str = [];
    // 用户输入
    var jieshoue = prompt('输入员工姓名');
    // 判断是否继续循环
    while (jieshoue != '-1') {
        // 继续输入
        jieshoue = prompt('输入员工姓名');
        // 往数组末尾追加 XX 内容
        Str.push(jieshoue);
    }
    // 删掉数组末尾到 结束关键字
    Str.pop();

    // 循环拿到数组每个内容
    for (var i = 0; i < Str.length; i++) {
        // 输出到页面
        document.write("这是录入的第" + (i + 1) + "个员工信息:" + Str[i] + "<br/>");
    }

}

事件类型

onload: 页面加载时触发

// 页面加载时执行
window.onload = function(){
			    
}

onclick: 鼠标点击时触发

// 绑定点击的事件
box.onclick = funciton(){
    console.log('我被点击了');
}

onmouseover : 鼠标滑过时触发

// 绑定移动的事件
box.onmousemove = funciton(){
    console.log('我被移动了');
}

onmuouseout: 鼠标离开时触发

// 绑定松开的事件
box.onmuouseout = funciton(){
    console.log('我离开了');
}

onfocus: 获得焦点时触发

noblur:失去焦点时触发

一般作用于 input 标签 type 为，text ，password textarea 标签

1 2	<input type="text" id="phone" placeholder="请输入手机号码"> <div id="tip">请输入有效手机号码</div>

/*
*  获得焦点时，提示文字”请输入11位的手机号码“
*  失去焦点时，判断条件，必须是11位数字
*             如果是，  则显示  对号 图标
*             如果不是，则显示  错号 图标
* */

// 获取文本框
var phone = document.getElementById('phone');

// 获取文本
var tip = document.getElementById('tip');

// 绑定焦点事件
 phone.onfocus = function () {
     // 获得焦点时，文字提示用户输入XXXX
     tip.style.display = 'block';
 };
 // 失去焦点时
phone.onblur = function () {
    // 获取用户输入的内容
    var phoneVue = this.value;
    // 判断，内容长度是不是 11位数？并且 是不是数字？
    if (phoneVue.length == 11 && isNaN(phoneVue) == false){
        // 显示正确的图片，这里用文字代替  <img src="xxxx.jpg" alt="图片">
        tip.innerHTML = '正确';
    } else {
        // 显示错误的图片，这里用文字代替  <img src="xxxx.jpg" alt="图片">
        tip.innerHTML = '错误';
    }
};

onchange: 域的内容改变时发生

html:

<div class="box">
    请选择你喜欢的背景颜色
    <select name="" id="menu">
        <option value="#fff">请选择颜色</option>
        <option value="#f00">红色</option>
        <option value="#0f0">绿色</option>
        <option value="#00f">蓝色</option>
        <option value="#ff0">黄色</option>
        <option value="#ccc">灰色</option>
    </select>
</div>

JS:

// 获取菜单
var menu = document.getElementById('menu')
// 给菜单绑定change 事件，一般作用域select 或者checkbox
menu.onchange = function () {
    // 获取当前选中的value值
    var bgcolor = this.value;
    // 改变body 背景颜色
    document.body.style.backgroundColor = bgcolor;
}

onsubmit 提交事件

onsubmit 事件，不是加在按钮上，而是表单上，别称：提交按钮

onresize 窗口事件

// onresize: 当调整浏览器窗口的大小时触发
        window.onresize = function () {
             console.log('我的尺寸被改变了！')
        }

on scroll 拖动事件

//拖动滚动条滚动时触发
window.onscroll = function () {
             console.log('我被拖动了');
        }

keyCode 属性与键盘事件

onkeydown: 在用户按下一个键盘按键时发生

onkeypress: 在按下键盘按键时发生（只会响应字母与数字符号）

onkeyup: 在键盘按键被松开时发生

keyCode：返回 onkeypress ,onkeydown或 onkeyup 事件触发的键值的字符代码，或键的代码

键盘事件触发顺序：

onkeydown
onkeypress
onkeyup

案例

<div>
     <p>字数限制在30字内<span><em id="count"></em></span> </p>
     <div class="input">
         <textarea name="" id="text" cols="30" rows="10"></textarea>
     </div>
 </div>

// 页面延时加载
window.onload = function () {
    // 获取文本框
    var text = document.getElementById('text');
    //  字符总数变量
    var totlal = 30;
    var ct = document.getElementById('count');
    // 绑定键盘事件
    document.onkeyup = function () {
        // 获取文本框值的长度
        var len = text.value.length;
        // 还能输入多少字符
        var allow = totlal -len;

        if ( len <= totlal){
            // 更改 text 的文本内容
            ct.innerHTML = ",您还可以输入"+  allow;
        }else {
            ct.innerHTML = ",您已经超出了"+  (len - totlal) + "字";
        }
    }
}

JavaScriptDOM操作

DOM查找方法

获取 ID

获取 类

DOM元素的样式

inner HTML

className

DOM 元素添加属性

获取属性 getAttribute

设置属性 setAttribute

删除属性 removeAttribute

JavaScriptDOM 事件

DOM 0级 事件绑定

案例

事件类型

onload: 页面加载时触发

onclick: 鼠标点击时触发

onmouseover : 鼠标滑过时触发

onmuouseout: 鼠标离开时触发

onfocus: 获得焦点时触发

noblur:失去焦点时触发

onchange: 域的内容改变时发生

onsubmit 提交事件

onresize 窗口事件

on scroll 拖动事件

keyCode 属性与键盘事件

案例

获取类

DOM 0级事件绑定