JavaScript-如何元素id获取页面元素对象

Posted 宗策

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript-如何元素id获取页面元素对象相关的知识,希望对你有一定的参考价值。


1. 通过元素id获取页面元素对象
var d = document.getElementById("id");
2. 获取和修改元素的文本内容
获取:d.innerText 修改: d.innerText="xxx";
3. 获取和修改文本框的内容
获取: i.value 修改: i.value="xxx";
4. 获取和修改元素的html内容

案例1:

技术图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function myfn(){
        //得到文本框 和 div的元素对象
        var i = document.getElementById("i1");
        var d1 = document.getElementById("d1");
        var d2 = document.getElementById("d2");
        //获取和修改元素的文本内容
        d1.innerText=BBB;
        //把文本框的文本内容取出给到div
        d2.innerText = i.value;
    }
</script>
</head>
<body>
<input type="button" value="按钮" onclick="myfn()">
<input type="text" id="i1" value="AAA">
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
View Code

 案例2:

技术图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function myfn(){
        //获取文本输入框和div的元素对象
        var i = document.getElementById("i1");
        var d = document.getElementById("d1");
        //判断用户输入的内容是否是数
        if(isNaN(i.value)){
            //如果不是数显示xxx
            d.innerText="输入错误,请重新输入!";
        }else{
            d.innerText = i.value*i.value;
        }
    }
</script>
</head>
<body>
请输入一个数:<input type="text" id="i1">
<input type="button" value="平方" onclick="myfn()">
<div id="d1"></div>
</body>
</html>
View Code

 

以上是关于JavaScript-如何元素id获取页面元素对象的主要内容,如果未能解决你的问题,请参考以下文章

0158 JavaScript获取元素:id,标签名,类名,querySelector,querySelectorAll,获取bodyhtml

如何获取元素距离页面顶部的高度

如何用javascript 跨域获取iframe子页面的元素信息

JavaScript高级内容

干货JS相关知识点总结

javascript怎么操作iframe页面里面的dom元素?