前端（六）

2022-02-14 22:04:36 阅读：183 来源： 互联网

标签：function 标签前端获取 classList var document

一.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>

标签：function,标签,前端,获取,classList,var,document
来源： https://www.cnblogs.com/liuwang999/p/15894291.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9