JavaScript之DOM的几个操作

Posted 2021-02-05 hzdwwzz

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript之DOM的几个操作相关的知识，希望对你有一定的参考价值。

点击按钮禁用文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" value="我是文本框" id="txt"/>
<input type="button" value="禁用文本框" id="btn"/>
<script>
    //先根据id获取按钮,为按钮注册点击事件,添加事件处理函数
    document.getElementById("btn").onclick = function () {
        //根据id获取文本框,设置disabled属性
        document.getElementById("txt").disabled = true;
    };
</script>
</body>
</html>

阻止超链接跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="http://www.baidu.com" id="link">去百度</a>
<script>
    document.getElementById("link").onclick = function () {
        alert("阻止跳转");
        return false;
    };
</script>
</body>
</html>

列表高亮显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style-type: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    //鼠标进入和鼠标离开两个事件
    var list = document.getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
        //为li注册鼠标进入事件
        list[i].onmouseover = function () {
            this.style.backgroundColor = "#ccc";
        };
        list[i].onmouseout = function () {
            this.style.backgroundColor = "";
        };
    }
</script>
</body>
</html>

根据name属性值来获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<input type="button" id="btn" value="改变文本"/></br>
<input type="text" name="txt1" value="Hello"/></br>
<input type="text" name="txt2" value="Hello"/></br>
<input type="text" name="txt1" value="Hello"/></br>
<input type="text" name="txt2" value="Hello"/></br>
<input type="text" name="txt1" value="Hello"/></br>
<input type="text" name="txt2" value="Hello"/></br>
<input type="text" name="txt1" value="Hello"/></br>

<script>
    document.getElementById("btn").onclick = function () {
        var txts = document.getElementsByName("txt1");
        for (var i = 0; i < txts.length; i++) {
            txts[i].value = "你好";
        }
    };
</script>
</body>
</html>

根据类样式的名字来获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .color {
            background-color: red;
            height: 20px;
        }

        .color2 {
            background-color: yellow;
            height: 20px;
        }
    </style>
</head>
<body>
<input type="button" id="btn" value="显示效果"/></br>
<div class="color2"></div>
<div class="color"></div>
<div class="color2"></div>
<div class="color"></div>
<script>
    document.getElementById("btn").onclick = function () {
        var divs = document.getElementsByClassName("color");
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.backgroundColor = "#ccc";
        }
    };
</script>
</body>
</html>

根据选择器的方式获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .color {
            background-color: red;
            height: 20px;
        }

        .color2 {
            background-color: yellow;
            height: 20px;
        }
    </style>
</head>
<body>
<input type="button" id="btn" value="显示效果"/></br>
<div class="color2"></div>
<div class="color"></div>
<div class="color2"></div>
<div class="color"></div>
<script>
    document.querySelector("#btn").onclick = function () {
        var divs = document.querySelectorAll(".color2");
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.backgroundColor = "skyblue";
        }
    };

// 根据选择器获取元素,返回来的是一个元素对象
// document.querySelector("选择器的名字");

// 根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象
// document.querySelectorAll("选择器的名字")

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

div边框高亮显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 150px;
            background-color: #cccccc;
            float: left;
            margin-left: 10px;
            border: 2px solid green;
        }
    </style>
</head>
<body>
<input type="button" id="btn" value="显示效果"/></br>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
    var divs = document.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++) {
        divs[i].onmouseover = function () {
            this.style.border = "2px solid red";
        };
        divs[i].onmouseout = function () {
            this.style.border = "";
        };
    }
</script>
</body>
</html>

模拟搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input {
            color: gray;
        }
    </style>
</head>
<body>
<input type="text" value="请输入搜索内容" id="search"/>
<script>
    //注册获取焦点的事件
    document.getElementById("search").onfocus = function () {
        if (this.value == "请输入搜索内容") {
            this.value = "";
            this.style.color = "black";
        }
    };
    document.getElementById("search").onblur = function () {
        if (this.value.length == 0) {
            this.value = "请输入搜索内容";
            this.style.color = "gray";
        }
    };

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

根据密码长度显示文本框颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="password" id="pwd"/>
<script>
    document.getElementById("pwd").onblur=function () {
        if (this.value.length>0&&this.value.length<=10){
            this.style.border="1px solid red";
        }else{
            this.style.border="1px solid green";
        }
    };
</script>
</body>
</html>

innerText和textContent

  //设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持
  //设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持
  //如果这个属性在浏览器中不支持,那么这个属性的类型是undefined
  //判断这个属性的类型 是不是undefined,就知道浏览器是否支持

兼容代码

    function setInnerText(element,text) {
    if (typeof element.textContent=="undefined"){//不支持textContent
        element.innerText=text;
    }else{
        element.textContent=text;
    }
}

  //获取任意标签中间的文本内容
  function getInnerText(element) {
    if(typeof element.textContent=="undefined"){
     return element.innerText;
    }else{
      return element.textContent;
    }
  }

innerText和innerHTML的区别

如果使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="button" id="btn"/>
<div id="dv"></div>
<script>
    document.getElementById("btn").onclick=function () {
        //document.getElementById("dv").innerText="<p>我是一个p标签</p>"
        //显示<p>我是一个p标签</p>
        document.getElementById("dv").innerHTML="<p>我是一个p标签</p>"
        //显示"我是一个p标签"
    };
</script>
</body>
</html>

自定义属性的设置和获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style-type: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<ul id="u1">
    <li>语文成绩</li>
    <li>数学成绩</li>
    <li>生物成绩</li>
    <li>化学成绩</li>
</ul>
<script>
    var liobj = document.getElementById("u1").getElementsByTagName("li");
    for (var i = 0; i < liobj.length; i++) {
        //先为每个li添加自定义属性
        liobj[i].setAttribute("score", (i + 1) * 10);
        //点击每个li标签,显示对应的自定义属性值
        liobj[i].onclick = function () {
            alert(this.getAttribute("score"));
        };
    }
</script>
</body>
</html>

如果要移除元素的属性就使用removeAttribute
可以移除元素自带的属性，也可以移除自定义的属性

以上是关于JavaScript之DOM的几个操作的主要内容，如果未能解决你的问题，请参考以下文章

web前端开发需要掌握的几个必备技术

JavaScript单行代码，也就是代码片段

JavaScript,DOM之 querySelect() 和 querySelectAll()

2014年辛星解读Javascript之DOM之事件及其绑定

第十五篇：JavaScript 之 Dom操作

JavaScript之DOM树