JavaScript之DOM的几个操作

其他 2019-01-24 21:54:42 阅读次数: 0

点击按钮禁用文本框

<!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
可以移除元素自带的属性，也可以移除自定义的属性

猜你喜欢

转载自www.cnblogs.com/hzdwwzz/p/10316991.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022