JS DOM

最新推荐文章于 2024-07-16 19:32:16 发布

li-chloe

最新推荐文章于 2024-07-16 19:32:16 发布

阅读量68

点赞数

本文链接：https://blog.csdn.net/weixin_51736721/article/details/117789613

版权

一、简介

1.定义：HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

（1）作为对象的 HTML 元素

（2）所有 HTML元素的属性

（3）访问所有 HTML 元素的方法

（4）所有 HTML 元素的事件

二、DOM方法

1.getElementById 方法：访问 HTML 元素最常用的方法是使用元素的 id。getElementById 方法可使用 id="demo" 来查找元素。

2.innerHTML 属性可用于获取或替换 HTML 元素的内容。innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。

三、DOM文档

1.查找HTML元素

document.getElementById(id)	通过元素ID寻找元素
document.getElementsByTagName(name)	通过标签名查找元素
document.getElementsByClassName(name)	通过类名查找元素

2.添加事件处理程序

document.getElementById(id).onclick = function(){code}

四、使用JS完成简易计算器要求：输入的值只能是数字，使用正则表达式 onchange():值改变时执行事件 onblur():鼠标移出时执行事件


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js计算器</title>
</head>
<br>
    <input type="number" id="1">
    <select id="test" size="1">
        <option selected="selected" value="0">--请选择-- </option>
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
     </select>
     <input type="number" id="2">=
     <input type="number" id="3">
     </br>
     <button id="b1" type="button" onclick="">计算</button>
</body>
<script>
    document.getElementById("b1").onclick = function() {
        var  myselect=document.getElementById("test");
        var index=myselect.selectedIndex ;  
        var temp=myselect.options[index].value;
        var a=document.getElementById("1");
        var b=document.getElementById("2");
        var c=document.getElementById("3");
        var d=a.value+temp+b.value;
        d=eval(d);
        c.value=d;
};
        
</script>
</html>

实现效果