js交互（新手）

最新推荐文章于 2024-08-27 21:01:56 发布

脆皮煎蛋

最新推荐文章于 2024-08-27 21:01:56 发布

阅读量139

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_73304951/article/details/127544831

版权

获取标签

通过id名获取

document.getElementById("id名")

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box" id="wrap">1</div>
<script>
// 通过id名获取 document.getElementById("id名");
var oDiv = document.getElementById("wrap");
console.log(oDiv);
</script>
</body>
</html>

类名获取

document.getElementsByClassName("类名")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <ul class="wrap" id="list">
        <li class="box">4</li>
        <li class="box">5</li>
        <li class="box">6</li>
    </ul>
    <script>
        // 通过类名获取
        // document.getElementsByClassName("class名字") 获取整个文档下的对应标签
        var oDiv = document.getElementsByClassName("box");
        console.log(oDiv);//HTMLCollection(6) 元素集合
        //获取元素集合中的具体某一个标签  语法 元素集合[下标]
        console.log(oDiv[0]);
        console.log(oDiv[2]);
        // 父元素.getElementsByClassName("class名字")  获取父元素下的对应标签
        // 先获取父元素 通过class命名
        var oUl = document.getElementsByClassName("wrap");
        console.log(oUl[0]);//元素中哪怕只有一个也要通过下标的形式获取
        // 获取ul下的box
        var wrap = oUl[0].getElementsByClassName("box");
        console.log(wrap);


    </script>
</body>
</html>

标签名获取

document.getElementsByTagName("标签")

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<ul class="" id="">
<li>4</li>
<li>
<div>5</div>
</li>
<li>6</li>
</ul>
<script>
// 通过标签名获取
// document.getElementsByTagName("标签名") 获取整个文档下的对应标签
var oDiv = document.getElementsByTagName("div");
console.log(oDiv);//HTMLCollection(3)
console.log(oDiv[1]);
// 父元素.getElementsByTagName("标签名") 获取整个文档下的对应标签
var oUl = document.getElementsByTagName("ul")[0];
console.log(oUl);
var xDiv = oUl.getElementsByTagName("div");
console.log(xDiv);
</script>
</body>
</html>

鼠标事件

鼠标事件类型

语法

元素.事件类型 = function(){ 要做的事情 }

            onclick   鼠标左键单击
            ondbclick  鼠标双击
            onmouseover/onmouseenter  鼠标移入
            onmouseout/onmouseleave    鼠标移出
            onmousemove    鼠标移动
            onmousedown     鼠标按下
            onmouseup      鼠标抬起
            oncontextmenu    鼠标右键显示菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        /* 
        需求  点击div盒子   输出今天周三

        添加事件
        元素.事件类型 = function(){
            要做的事情
        }
        // 获取元素
        var oDiv = document.getElementsByTagName("div")[0];
        console.log(oDiv);
        // 添加事件  鼠标单击onclick
        oDiv.onclick = function () {
            console.log("单击");
            }
            // 鼠标双击    ondbclick
            oDiv.ondblclick = function () {
                console.log("双击");
            }
            // 鼠标移入
            oDiv.onmouseover = function () {
                console.log("移入");
            }
            // 鼠标移动
            oDiv.onmousemove = function () {
                console.log("移动");
            }
              // 鼠标移出
              oDiv.onmouseout = function () {
                console.log("移出");
            }
              // 鼠标按下
              oDiv.onmousedown = function () {
                console.log("按下");
            }
            // 鼠标抬起
            oDiv.onmouseup = function () {
                console.log("抬起");
            }
            // 鼠标右键显示菜单
            oDiv.oncontextmenu = function () {
                console.log("右键显示菜单");
            }
              // onmouseenter         onmounseleave 移入移除
              oDiv.onmouseenter = function () {
                console.log("移入");
            }
            oDiv.onmounseleave = function () {
                console.log("移出");
            }
    </script>
</body>
</html>

操作内容

闭合标签

获取

元素.innerHTML

元素.innerText

设置

元素.innerHTML = 值

元素.innerText = 值

元素.innerHTML 与元素.innerText区别

相同点:都是重写闭合标签上的内容不同点:innearHTML可以识别标签 innerText不识别标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>这是一个div标签</div>
    <script>
        var oDiv = document.getElementsByTagName("div")[0];
    //    闭合标签的内容  获取与设置
    // 获取   元素.innerHTML    元素.innerText
    console.log(oDiv.innerHTML);
    console.log(oDiv.innerText);
    // 设置    元素.innerHTML  = 值   元素.innerText = 值   重写之前的内容
    oDiv.innerHTML = "这是一个新的文本内容";
    oDiv.innerText = '123';
    /*  innerHTML   innerText 的区别
        相同点:都是重写闭合标签上的内容
        不同点:innearHTML可以识别标签  innerText不识别标签
    */
    //区别
    oDiv.innerHTML = "<em>可识别</em>"//可识别
    oDiv.innerText = "<em>不可识别</em>"//不可识别
    // 在原有的文本内容上追加内容    字符串数据类型遇到+是拼接
    oDiv.innerHTML = oDiv.innerText +"1234567890";
    </script>
</body>
</html>

表单元素

获取

console.log(元素.value)

设置

元素.value = 值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text" placeholder="请输入文本" value="文本">
    </form>
    <script>
        var  oInp = document.getElementsByTagName("input")[0];
        // 表单元素的设置与获取

        // 获取

        console.log(oInp.value);

        //  设置   元素.value = 值

        oInp.value = "密码"
    </script>
</body>
</html>

操作样式

获取

元素.style.样式名

设置

元素.style.样式名 = 值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div  style="width:300px;height:300px;background-color:red;"></div>
    <script>
        // 
        var oDiv = document.getElementsByTagName("div")[0];

        // 获取样式    元素.style.样式名
        console.log(oDiv.style.width);
        console.log(oDiv.style.height);
        console.log(oDiv.style.backgroundColor);

        // 设置样式    元素.style.样式名 = 值
        console.log(oDiv.style.width = "500px");
        console.log(oDiv.style.height = "600px");
        console.log(oDiv.style.backgroundColor = "orange");
    </script>
</body>
</html>

操作属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box" id="wrap"></div>
    <img src="../images/pic1.JPG" alt="狗头">
    <input type="text">
    <script>
        var oDiv = document.getElementsByTagName("div")[0];
        var oImg = document.getElementsByTagName("img")[0];
        var oInput = document.getElementsByTagName("input")[0];

        console.log(oDiv,id);
        console.log(oDiv.className);
        console.log(oImg.src);
        console.log(oInput,type);

        oDiv.className = "box";
        oInput.type = "password";
    </script>
</body>
</html>

数据类型

概念

根据数据的特征及功能分为不同的数据类型,不同的数据类型有不同的操作

五种基本数据类型

number  数值类型  1234

string     字符串类型   "文字"  '文字'

boolean  布尔类型    true  false

undefined  未定义

null   空对象

特殊数据类型(复杂数据类型引用数据类型对象数据类型)

object  对象类型   { "name":"张三" }

array  数组类型    [1,2,3,4]

function   函数       function(){}

检测数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
       var a = 10;
        // 1.语法1  typeof(要检测的数据)
        console.log(typeof (a));//number
        // 2.语法2  typeof 要检测的数据类型
        console.log(typeof a);//number
        console.log("结果", typeof a);
        console.log(1, typeof a);//1 'number'

        console.log(typeof "文字");//string
        console.log(typeof true);//boolean
        console.log(typeof undefined);//undefined
        console.log(typeof null);//object
        console.log(typeof {});//object
        console.log(typeof [1, 2, 3]);//object
        console.log(typeof function () { });//function


        </script>
</body>
</html>

脆皮煎蛋

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js交互（新手）

document.getElementById("id名") document.getElementsByClassName("类名")document.getElementsByTagName("标签") 语法元素.事件类型 = function(){ 要做的事情 }获取元素.innerHTML元素.innerText设置元素.innerHTML = 值元素.innerText = 值元素.innerHTML 与元素.innerText区别相同点:都是重写闭合标签上的内容不同点:innearHTML
复制链接

扫一扫