前端（六）

2022/2/14 23:43:46

编程Tag： 前端标签 function var 获取 document classList

本文主要是介绍前端（六），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一.DOM操作之查找标签

//前缀关键字>>>:docment

// 基本查找（核心）
document.getElementById  // 根据id获取一个标签
document.getElementsByClassName  //根据class属性获取
document.getElementsByTagName  //根据标签属性查找

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

//间接查找（重要）
parentElement            //父节点标签元素
children                     //所有子标签
firstElementChild        //第一个子标签元素
lastElementChild         //最后一个子标签元素
nextElementSibling       //下一个兄弟标签元素
previousElementSibling   //上一个兄弟标签元素

二.节点操作

innerText
    //不加赋值符号是获取内部文本
    //加了赋值符号是设置内置文本
    # 不可以识别HTML标签
innerHTML
    //不加赋值符号是获取内部标签+文本
    //加了赋值符号是设置内置标签+文本
    //可以识别HTML标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">我是div标签</div>
<p class="c1">我是p标签</p>
<script>
    var aELe = document.createElement('a')  //创建a标签
    aELe.setAttribute('href','https://www.baidu.com')  //设置属性
    aELe.innerText = '点我有你好看！！！'  //设置文本内容
    document.getElementsByTagName('p')[0].append(aELe)  //动态添加
    imgEle.getAttribute('title')
</script>
</body>
</html>

四.获取值操作

// 普通的文本数据获取
    标签对象.value
// 特殊的文件数据获取
    标签对象.value  '''仅仅获取一个文件地址而已'''
    标签对象.files[0]  '''获取单个文件数据'''
    标签对象.files  '''获取所有文件数据'''

五.class操作

classList  查看所有的类
classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

六.样式操作

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

七.绑定事件的两种方法

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="d1">点我</button>
<script>
    var divEle = document.getElementById('d1')
    divEle.onclick = function (){
        alert('欢迎登录修车网')
    }
</script>
</body>
</html>

方法二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="func()">点我</button>
<script>
        function func() {
            alert(123)
        }
</script>
</body>
</html>

八.内置参数this

//this指代的就是当前被操作对象本身
在事件的函数体代码内部使用
    btnEle.onclick = function () {
            alert(456)
            console.log(this)
        }

九.事件练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="d1">
<button id="d2">查看</button>
<button id="d3">停止</button>
<script>
    //获取数据
    var btnEle = document.getElementById('d2')
    var btnEle1 = document.getElementById('d3')
    var t=null
    function showtime() {
        //获取当地事件
        var localtime = new Date().toLocaleString()
        //给
        var tELe = document.getElementById('d1')
        tELe.value = localtime
    }
    //绑定点击事件
    btnEle.onclick = function (){
        if(!t) {
            t = setInterval(showtime, 1000)
        }
    }
    //绑定点击事件
    btnEle1.onclick = function (){
        clearInterval(t)
        t=null
    }
</script>
</body>
</html>