宗策

导航

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

 

posted on 2020-04-30 15:00  宗策  阅读(3006)  评论(0)  编辑  收藏  举报