前端猫

# 操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性。

# - 元素内容操作

element.innerHTML:设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)

element.outerHTML:设置或获取标签自身及其所包含的HTML+文本信息（包括自身）

element.innerText:设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）

element.outerText:设置或获取标签自身及其所包含的文本信息（包括自身）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>innerHTML</button>
<button>outerHTML</button>
<button>innerText</button>
<button>outerText</button>

<div id="app">1</div>
</body>
<script>
    const btns = document.querySelectorAll("button");
    // 设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)
    btns[0].onclick = function () {
        const app = document.querySelector("#app");
        console.log(app.innerHTML);
        app.innerHTML = '<a href="http://www.baidu.com">百度</a>';
    }
    // element.outerHTML:设置或获取标签自身及其所包含的HTML+文本信息（包括自身）
    btns[1].onclick = function () {
        const app = document.querySelector("#app");
        console.log(app.outerHTML);
        app.outerHTML = '<a href="http://www.alibaba.com">阿里</a>';
    }
    // element.innerText:设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）
    btns[2].onclick = function () {
        const app = document.querySelector("#app");
        console.log(app.innerText);
        app.innerText = '<a href="http://www.qq.com">腾讯</a>';
    }
    // element.outerText:设置或获取标签自身及其所包含的文本信息（包括自身）
    btns[3].onclick = function () {
        const app = document.querySelector("#app");
        console.log(app.outerText);
        app.outerText = '<a href="http://www.jd.com">京东</a>';
    }
</script>
</html>

# - 元素属性操作

元素属性主要分为内置属性与自定义属性。

内置属性：标签本身自带的属性。

自定义属性：程序员自己定义的属性。

# - 内置属性基本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="app">
      <h3>内置属性操作</h3>
      <hr/>
      <button>获取内置属性</button>
      <button>修改内置属性</button>
      <button>将图片变大</button>
      <hr/>
      <img id="img" suibian="abcdefg" src="./img/1.gif" width="500" title="这是一张图片" alt="这是一张未加载完的图片">
  </div>
</body>
<script>
    var btns = document.querySelectorAll("button");
    var img = document.querySelector("img");
    btns[0].onclick = function(){
        // 获得img元素的内置属性。
        console.log("id",img.id);
        console.log("src",img.src);
        console.log("width",img.width);
        console.log("title",img.title);
        console.log("alt",img.alt);
        // 获取自定义的属性。
        console.log("suibian",img.suibian);// undefined
    }
    btns[1].onclick = function(){
        img.id = "myImg";
        img.suibian = "xixixi";
        console.log(img.suibian)
    }
    btns[2].onclick = function(){
        img.width+=10;
    }
</script>
</html>

# - 获取自定义属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div>
      <h3>获取自定义属性</h3>
      <hr/>
      <img src="./img/1.gif" a="1" b="2" width="400px" alt="加载失败时的提示">
  </div>
</body>
<script>
    /*1-获取内置属性 element.属性名
    * */
    var img = document.querySelector("img");
    console.log("src",img.src);// 完整的图片地址
    console.log("width",img.width);// 400 number
    console.log("alt",img.alt);

    /*2-自定义属性获取：element.getAttribute(属性名)
    * 注意：getAttribute也可以获取内置属性，常用于获取自定义属性。
    * */
    console.log(img.a);// undefined
    console.log(img.b);// undefined
    console.log(img.getAttribute("a"));// 1
    console.log(img.getAttribute("b"));// 2
    console.log(img.getAttribute("src"));// ./img/1.gif
    console.log(img.getAttribute("width"));// 400 string
</script>
</html>

# - 设置自定义属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h3>设置自定义属性</h3>
    <hr/>
        <button>修改自定义属性</button>
    <hr/>

    <img src="./img/1.gif" a="1" b="2" width="400px" alt="加载失败时的提示">
</div>
</body>
<script>
    var btn = document.querySelector("button");
    var img = document.querySelector("img");
    btn.onclick = function(){
        // 第一个参数是属性的名字，第二个参数是设置的值
        img.setAttribute("a",100);
        img.setAttribute("b",200);
        img.setAttribute("src","./img/2.gif");
        img.setAttribute("width","500");
    }
</script>
</html>

# - 删除自定义属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h3>删除自定义属性</h3>
    <hr/>
    <button>删除自定义属性</button>
    <hr/>

    <img src="./img/1.gif" a="1" b="2" width="400px" alt="加载失败时的提示">
</div>
</body>
<script>
    var btn = document.querySelector("button");
    var img = document.querySelector("img");
    btn.onclick = function(){
        // removeAttribute接收属性的名字，可以删除DOM元素对应的属性。
       // img.removeAttribute("a");
       // img.removeAttribute("b");
       // img.removeAttribute("src");
       // img.removeAttribute("width");
       // img.removeAttribute("alt");

        delete img.src;// 无法删除属性
        console.log(img.src);
    }
</script>
</html>

# - 自定属性data-*

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="one" data-index="1" data-username="laowang"></div>
  <div id="two"></div>
  <div id="three"></div>
</body>
<script>
    // 由于程序员会经常将数据保存在元素的属性中，所以需要自定义属性。
    // 但是不熟悉HTML的人会容易将内置属性与自定义属性混淆。
    // 为了更加方便，高效的实现这个需求 ，我们可以使用data-* 属性。

    // 增加属性index
    // 1- 直接在标签中增加
    // <div data-index="1"></div>
    // 2- 可以通过setAttribute方法来增加
    // var twoDiv = document.querySelector("#two");
    // twoDiv.setAttribute("data-index",2);
    // 3- 建议：可以通过 element.dataset.index
    // var threeDiv = document.querySelector("#three");
    // threeDiv.dataset.index = 3;
    // threeDiv.dataset["a"] = 33;// data-a="33"

    // 获取index
    // var oneDiv = document.querySelector("#one");
    // console.log(oneDiv.getAttribute("data-index"));// 1
    // console.log(oneDiv.dataset.index);// 1
    // console.log(oneDiv.dataset["index"]);// 1
    // console.log(oneDiv.dataset["username"]);// laowang
    // console.log(oneDiv.dataset);

    // 获取id=two元素下的index
    // console.log(twoDiv.getAttribute("data-index"));
    // console.log(twoDiv.dataset.index);
    // console.log(twoDiv.dataset["index"]);

    // 删除id=one元素下的index
    var oneDiv = document.querySelector("#one");
    // oneDiv.removeAttribute("data-index");
    delete oneDiv.dataset.index;
    delete oneDiv.dataset.username;

</script>
</html>
  • 表单元素属性获取与设置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form name="myForm">
    <p>姓名：<input name="userName" type="text"></p>
    <p>性别：
        <input name="gender" value="1" type="radio">男
        <input name="gender" value="2" type="radio">女
    </p>
    <p>城市：
        <select name="city">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">深圳</option>
            <option value="4">武汉</option>
            <option value="5">西安</option>
        </select>
    </p>
    <p>爱好：
        <input name="hobby" value="1" type="checkbox">游戏
        <input name="hobby" value="2" type="checkbox">学习
        <input name="hobby" value="3" type="checkbox">游泳
    </p>
    <input name="getInfo" type="button" value="获取表单信息">
    <input name="setInfo" type="button" value="设置表单信息">
    <input type="reset" value="清空">
</form>
<script>
    var myForm = document.myForm;
    myForm.getInfo.onclick = function(){
        console.log("姓名:",myForm.userName.value);
        console.log("性别:",myForm.gender);
        console.log("性别选中:",myForm.gender.value);

        console.group("select-start")
        console.log("城市:",myForm.city.value);
        console.log("城市索引值:",myForm.city.selectedIndex);
        console.log("城市索引值:",myForm.city.select);
        console.log("城市options:",myForm.city.options);
        console.log("城市option的文本内容:",myForm.city.options[myForm.city.selectedIndex].text);
        console.log("城市option的文本内容:",myForm.city.options[myForm.city.selectedIndex].innerText);
        console.log("城市option的文本内容:",myForm.city.options[myForm.city.selectedIndex].innerHTML);
        console.log("城市option的文本内容:",myForm.city.options[myForm.city.selectedIndex].textContent);
        console.groupEnd();


        console.group("hobby-start")
        console.log("爱好:",myForm.hobby);
        var hobbyArr = [];
        myForm.hobby.forEach(function(info){
            if(info.checked) hobbyArr.push(info.value);
        })
        console.log("爱好选中:",hobbyArr);

    }
    myForm.setInfo.onclick = function(){
        myForm.userName.value = "张培跃";
        myForm.gender.value = 1;
        myForm.city.value = 2;
        var hobbyArr = [2,3];
        myForm.hobby.forEach(function(info,index){
            if(hobbyArr.indexOf(info.value/1)) info.checked = true;
            else info.check=false;
        })
    }
</script>
</body>
</html>

# - 样式属性操作

我们可以通过JS修改元素的大小、颜色、位置等

# - 行内样式操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="warp">
    <select id="color" name="">
        <option value="0">字体颜色</option>
        <option value="red">红</option>
        <option value="yellow">黄</option>
        <option value="blue">蓝</option>
    </select>
    <select id="bgColor" name="">
        <option value="0">背景颜色</option>
        <option value="red">红</option>
        <option value="yellow">黄</option>
        <option value="blue">蓝</option>
    </select>
    <select id="size" name="">
        <option value="0">字体大小</option>
        <option value="12px">12px</option>
        <option value="13px">13px</option>
        <option value="14px">14px</option>
        <option value="15px">15px</option>
        <option value="16px">16px</option>
    </select>
    <p id="val">程序员最讨厌的四件事：写注释、写文档、别人不写注释、别人不写文档……</p>
</div>
</body>
<script type="text/javascript">
    // 注意：1-JS里面的样式采取驼峰命名法比如：fontSize backgroundColor
    // 注意：2-修改style样式操作，产生的行内样式，css权重比较高

    var color = document.querySelector("#color");
    var bgColor = document.querySelector("#bgColor");
    var size = document.querySelector("#size");
    var val = document.querySelector("#val");
    color.onchange = function () {
        if (this.value !== "0") val.style.color = this.value;
    }
    size.onchange = function () {
        if (this.value !== "0") val.style.fontSize = this.value;
    }
    bgColor.onchange = function () {
        if (this.value !== "0") val.style.background = this.value;
    }
</script>
</html>

# - 类名样式操作

  • className:会直接更改元素的类名，并覆盖原来的类名
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .one{
            width: 100px;
            height: 100px;
            background: red;
        }
        .two{
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
<button>one</button>
<button>two</button>
<div id="app">你好</div>
</body>
<script>
    var btns = document.querySelectorAll("button");
    var app = document.querySelector("#app");
    btns[0].onclick = function(){
        app.className = "one"
    }
    btns[1].onclick = function(){
        app.className = "two"
    }
</script>
</html>
  • classList: 该属性用于在元素中添加，移除及切换 CSS 类 。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .one {
            width: 500px;
            height: 50px;
            padding: 15px;
            border: 1px solid black;
        }
        .two {
            background-color: coral;
            color: white;
        }
        .three {
            text-align: center;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <button>add</button>
    <button>remove</button>
    <button>container</button>
    <button>value</button>
    <button>toggle</button>
    <button>其它</button>
    <div id="app">我爱你中国，我亲爱的母亲</div>
</body>
<script>
    const btns = document.querySelectorAll("button");
    const app = document.querySelector("#app");
    btns[0].onclick = function(){
        // 为 app 元素添加多个类
        app.classList.add("one","two","three");
    }
    btns[1].onclick = function(){
        // 为 app 元素移除一个类
        app.classList.remove("one","two","three");
    }
    btns[2].onclick = function(){
        // 查看元素是否存在 "one" 类:
        console.log(app.classList.contains("one"));
    }
    btns[3].onclick = function(){
        // 获取 app 元素的类名::
        console.log(app.classList.value);
        console.log(app.className);
    }
    btns[4].onclick = function(){
        // 为 app 元素切换类::
        app.classList.toggle("one");
    }
    btns[5].onclick = function(){
        // 查看 app 元素有多少个类名:
        console.log(app.classList.length);
        // 获取 app 元素的第一个类名（索引为0）:
        console.log(app.classList.item(0));
    }
</script>
</html>

# - 案例：猜字游戏

# - css

*{
    padding:0;
    margin:0;
}
#app{
    position: relative;
    width: 600px;
    height: 400px;
    border:2px dashed black;
    margin:20px auto;
}
#timed{
    position: absolute;
    top:20px;
    left:20px;
    font-size:20px;
}
#score{
    position: absolute;
    top:20px;
    right:20px;
    font-size:20px;
}
#main{
    font-size: 100px;
    text-align: center;
    line-height: 300px;
}
p{
    font-size: 12px;
    position: absolute;
    bottom:120px ;
    width: 100%;
    text-align: center;
}
ul{
    width: 100%;
    text-align: center;
    line-height: 50px;
    font-size: 40px;
    list-style: none;

}
li{
    display: inline-block;
    margin:0 20px;
    cursor: pointer;
}
.mask{
    position: absolute;
    background: rgba(1,1,1,0.8);
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mask button{
    width: 100px;
    height: 100px;
    font-size: 20px;
    color:wheat;
    background: gray;
    border:none;
}
.mask button:hover{
    background: red;
    cursor: pointer;
}

# - js

// 规范1：所有获取dom元素并赋值的语句写到最上面
// 规范2：在函数与函数之间不允许出现其它语句
// 获得开始按钮元素
var startBtn = document.querySelector("#start");
// 获得遮罩层元素
var mask = document.querySelector(".mask");
// 获得显示汉字的main元素
var main = document.querySelector("#main");
// 获得li
var lis = document.querySelectorAll("ul li");
// 获得存放分数的score
var scoreDiv = document.querySelector("#score");
// 获得存放倒计时的元素
var timedDiv = document.querySelector("#timed span");
// 定义数组，用于存储显示的汉字
var fonts = ["红","蓝","绿","黄","黑"];
// 定义数组，用于存储颜色
var colors = ["red","blue","green","yellow","black"];
// 分数统计
var scoreNum = 0;
// 倒计时的时间
var timeNum = 10;
// 点击按钮事件,隐藏遮罩层
startBtn.onclick = function(){
    // 隐藏遮罩层
    mask.style.display = "none";
    // 分数初始化
    scoreDiv.innerHTML = scoreNum;
    // 倒计时初始化
    timedDiv.innerHTML = timeNum;
    //初始化main元素内容
    initMain();
    // 初始化LI
    initLi();
    // 开始倒计时
    countDown();
}
function countDown(){
    var timer = setInterval(function (){
        // 倒计时减1
        timedDiv.innerHTML = --timeNum;
        // 判断时间已结束
        if(timeNum === 0){
            // 移除定时器
            clearInterval(timer);
            // 倒计时的时间重置
            timeNum = 10;
            if(scoreNum>=3) alert("你的眼睛非常棒");
            else if(scoreNum>=1) alert("您 有点色弱")
            else alert("你的眼睛瞎了")
            // 分数重置
            scoreNum = 0;
            scoreDiv.innerHTML = scoreNum;

            mask.style.display = "flex"
        }
    },1000)
}
// 初始化LI
function initLi(){
    // 将ul->li 内的汉字以及汉字颜色随机。
    // 1->先复制一份数组出来
    var copyFonts = fonts.slice();
    var copyColors = colors.slice();
    // 2->将数组copyFonts,copyColors内的元素随机排序
    copyFonts.sort(function (){
        return Math.random()-0.5
    })
    copyColors.sort(function (){
        return Math.random()-0.5
    })
    // 3->将数组的内容放置到li内。
    lis.forEach(function (item,index){
        item.innerHTML = copyFonts[index];
        item.style.color = copyColors[index];
        // 为li增加点击事件
        item.onclick = function(){
            // 判断当前的文字是否与main当中的文字 颜色一致
            var mainIndex = main.dataset.index/1;
            // 如何得到li文字的下标
            var liIndex = fonts.indexOf(this.innerHTML);
            if(mainIndex === liIndex){
                scoreDiv.innerHTML = ++scoreNum;
                console.log("成功")
            }else{
                scoreDiv.innerHTML = --scoreNum;
                console.log("失败")
            }
            //初始化main元素内容
            initMain();
            // 初始化LI
            initLi();
        }
    })
}
// 初始化main元素内容
function initMain(){
    // 将id为main元素的内容设置为随机的红蓝绿黄黑
    main.innerHTML = fonts[getRandom()];
    // 自定义属性用于保存颜色下标
    main.dataset.index =getRandom();
    // 将id为main元素的文字颜色设置为随机的red,blue,green,yellow,black
    main.style.color = colors[main.dataset.index ];
}
// 写一个方法用获得随机数组下标
function getRandom(){
    return Math.floor(Math.random()*fonts.length);
}

# - html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="app">
        <div id="timed">倒计时：<span>60</span></div>
        <div id="score">0</div>
        <div id="main">黑</div>
        <p>请根据上面的文字的颜色在下方选择正确的文字</p>
        <ul>
            <li>红</li>
            <li>蓝</li>
            <li>绿</li>
            <li>黄</li>
            <li>黑</li>
        </ul>
        <div class="mask">
            <button id="start">开始</button>
        </div>
    </div>
</body>
<script src="index.js"></script>
</html>

← 排它思想 →