前端之JS-DOM操作

阅读目录

• 1. DOM操作 之 标签查找
• 2. DOM操作 之 节点操作
• 3. DOM操作 之 获取值操作
• 4. DOM操作 之 class操作
• 5. DOM操作 之 指定css操作
• 6. 事件（最最核心）

回到顶部

1. DOM操作 之 标签查找

前缀关键字>>>: document

# 基本查找（核心）
document.getElementById        # 根据ID获取一个标签对象
document.getElementsByClassName# 根据class属性获取标签对象数组
document.getElementsByTagName  # 根据标签名获取标签对象数组

"""
如果js代码需要页面上的某个标签加载完毕，
那么该js代码应该写在 body 的最下方，或引入外部js文件

"""

# 间接查找（重要）
# 根据一个标签查找另外一个标签

parentElement          # 父系节点标签元素
children               # 所有子标签
firstElementChild      # 第一个子标签元素
lastElementChild       # 最后一个子标签元素
nextElementSibling     # 下一个兄弟标签元素
previousElementSibling # 上一个兄弟标签元素

回到顶部

2. DOM操作 之 节点操作

# 创建节点
var aEle = document.createElement('a')

# 添加属性
aEle.setAttribute('href', 'https://www.baidu.com')

# 获取标签内部属性
aEle.getAttribute('href')

# 设置内部文本
aEle.innerText = "好看吗"

# 动态添加
document.getElementsByTagName('p')[0].appendchild(aEle)

"""一定要明确手上获取到的类型是标签对象还是数组！！！"""


var pEle = document.getElementsByTagName('p')[0]
pEle.innerText = '好好学习'
pEle.innerHTML = '天天向上'

innerText
	纯文本！！！
	<h1>不会渲染成h1标签</h1>
	不加赋值符号是获取文本
	加赋值符号是设置/修改文本

innerHTML
	不加赋值符号获取内部标签+文本
	加赋值符号是设置内部标签+文本
	可以识别HTML
	<h1>可以识别html标签</h1>

回到顶部

3. DOM操作 之 获取值操作

<form>
    <p>username:
        <input type="text" id="d1">
    </p>
    
    <p>file:
        <input type="file" id="d2">
    </p>

</form>

var ipEle = document.getElementById('d1')

# 普通的文本数据获取
ipEle.value
标签对象.value


var ipfEle = document.getElementById('d2')
# 特殊的文件数据获取
标签对象.value  # 仅仅能获取文件地址而已
应该：
ipfEle.files[0]
标签对象.files[0]  # 获取单个文件数据
以自定义对象（字典）形式获取文件数据

标签对象.files  # 获取多个文件数据，是一个数组。

回到顶部

4. DOM操作 之 class操作

classList              # 查看所有的class
classList.remove(cls)  # 删除指定的class
classList.add(cls)     # 添加class
classList.contains(cls)# 存在就返回true
classList.toggle(cls)  # 存在就删除，不存在就添加

var divEle = document.getElementById('d1')

divEle.classList  # 查看全部class

divEle.classList.add('c3')

回到顶部

5. DOM操作 之 指定css操作

var pEle = document.getElementByTagName('p')[0]

pEle.style.backgroundColor = 'red'
pEle.style.fontSize = '48px'

标签对象.style.属性名 = 属性值

回到顶部

6. 事件（最最核心）

给标签绑定一个自定义功能。

# 就是给html元素添加自定义的功能

"绑定方式1（不常用）"
<button onclick="func()">点我</button>

<script>
    function func(){
        alert(123)
    }
</script>

"绑定方式2（常用）"
<button id="d1">选我</button>

<script>
    # 1. 先 查找标签
    var btnEle = document.getElementById('d1')
    
    # 2. 绑定事件
    btnEle.onclick = function(){
        alert('xxx')
    }

</script>

6.1 this参数

this 就是指当前被操作对象本身
# 只能在事件的函数体代码内使用

<button id="d1">选我</button>

<script>
    # 1. 先 查找标签
    var btnEle = document.getElementById('d1')
    
    # 2. 绑定事件
    btnEle.onclick = function(){
        alert('xxx')
        console.log(this)
    }

</script>

6.2 常见事件

onclick    # 单击事件
ondbclick  # 双击事件

onfocus    # 聚焦事件  输入框
onblur     # 失焦事件  表单验证，用户离开输入框时代表输入完成
onchange   # 文本域变化事件  表单元素内容被改变时触发select联动

onkeydown    # 某个键盘按键被按下
onkeyup      # 某个键盘按键被松开
onkeypress   # 某个键盘按键被按下并松开

onload       # 一张页面或者一幅图像完成加载
"等待...加载完毕之后执行的事件"
window.onload
标签.onload
# 具体看是谁 .点onload

onmousedown    # 鼠标按钮被按下
onmousemove    # 鼠标被移动
onmouseout     # 鼠标从某个元素移开
onmouseover    # 鼠标移动到某个元素之上

onselect       # 在文本框中的文本被选中时发生
onsubmit       # 确认按钮被点击，使用的对象是form


"""如果某个标签已经有事件了，那么绑定会冲突"""
例如 form 表单的提交

6.3 事件案例

案例1：定时器

<input type="text" id="d2">
<button id="d1">开始</button>
<button id="d3">停止</button>


<script>
    // 1. 先查找标签
    var btnEle = document.getElementById('d1')
    var btn1Ele = document.getElementById('d3')
    // 2. 定义一个存储定时器的全局变量
    var t = null

    // 3. 单独编写一个展示时间的函数
    function showtime(){
        // 4. 获取当前时间
        var ctime = new Date().toLocaleString()
		
        // 5. 将时间添加到input文本框中
        var iEle = document.getElementById('d2')
        iEle.value = ctime
    }
	
    // 6. 绑定点击事件，设置定时
    btnEle.onclick = function(){
        if (!t){
            t = setInterval(showtime, 1000)
        }
    }

    // 6. 绑定点击事件，清空定时
    btn1Ele.onclick = function(){
        clearInterval(t)
        // 把 t 清空
        t = null
    }

</script>

案例2：数据校验

<div>
    <p>username
        <input type="text" id="d1">
        <span id="username"></span>
    </p>
    
    <p>password
        <input type="pwd" id="d2">
        <span id="pwd" color="red"></span>
    </p>
    
    <button id="d3">登录</button>
</div>


<script>
    // 1. 查找按钮标签
    var btnEle = document.getElementById('d3')
	
    // 2. 绑定事件
    btnEle.onclick = function(){
        // 3. 获取input数据
        var userNameEle = document.getElementById('d1').value
        var passWordEle = document.getElementById('d2').value
	
        // 4. 判断数据是否合法
        if (!userNameEle){
            // 5. 查找span标签
            var sp1Ele = document.getElementById('username')
            sp1Ele.innerText = "用户名不能为空"
        }
  
        if (!passWordEle){
            // 查找span标签
            var sp2Ele = document.getElementById('pwd')
            sp2Ele.innerText = "密码不能为空"
        }
    }

</script>

案例3：聚焦失焦

<script>
    var ipEle = document.getElementById('d1')

    // 聚焦事件
    ipEle.onfocus = function(){
        this.style.backgroundColor = 'red'
    }

    // 失焦事件
    ipEle.onblur = function(){
        alert('我走了')
    }



</script>

onload应用：

// 当想要把script标签放在head当中时
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onload</title>
    <script>
        window.onload = function () {
            var doc = document.querySelector(".c1");
            console.log(doc);
        };
    </script>
</head>
<body>

<div class="c1">div</div>

</body>
</html>