JavaScript 操作—— HTML DOM、计算器实现

最新推荐文章于 2023-04-11 10:52:51 发布

衣冠小兽

最新推荐文章于 2023-04-11 10:52:51 发布

阅读量545

点赞数 4

本文链接：https://blog.csdn.net/maojiaolin/article/details/117711259

版权

一、HTML DOM 介绍

HTML DOM（ Document Object Model ），即文档对象模型。
HTML DOM 定义了访问和操作 HTML 文档的标准方法(接口)。
HTML DOM 以树状结构表达 HTML 文档
HTML DOM 是 W3C（万维网联盟）制定的关于HTML的标准

二、HTML DOM 树
在这里插入图片描述
三、HTML DOM 节点

在HTML DOM中，所有事物都是节点，整个HTML就是以节点构建的一个DOM树。
整个 HTML 文档是一个文档节点
每个 HTML 元素是元素节点
每个 HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

四、HTML DOM 节点层级关系

根结点：最顶端结点称为根结点，其没有父节点，如：
父节点：其可以拥有子节点，如：
子节点：父节点下一级的节点
同胞节点：拥有相同父节点的同级节点，如：与

五、JavaScript 访问 DOM 元素
利用以下 JavaScript 方法获取 DOM 信息：

document.getElementById() 方法
document.getElementsByName() 方法
document.getElementsByTagName() 方法
document.getElementsByClassName() 方法

1.getElementById()

<h1 id="title">JS访问DOM</h1>    
<script type="text/javascript">    
//获取 id="title" 的元素    
var title = document.getElementById("title");  
// 打印 title 元素的内容    
document.write("打印输出：" + title.innerHTML);   
</script>

2.getElementsByName()，以数组形式返回获取的所有元素

<input type="text" name="user" value="zhangsan1">
<input type="text" name="user" value="zhangsan2">

<script type="text/javascript">    

//获取 name="user" 的所有元素(数组)    
var users = document.getElementsByName("user");    
// 打印 users 数量    
document.write("数量：" + users.length);    document.write("<br>");    
// 打印值    
document.write(" 第一个值：" + users[0].value);
document.write(" 第二个值：" + users[1].value); 

</script>

六、JavaScript 修改 DOM 元素
利用 JavaScript 可以修改以下 DOM 信息：

修改 HTML 元素内容
修改 CSS 样式
修改 HTML 元素属性
增加或删除 HTML 元素

1.修改元素内容

 <h1 id="title">JS访问DOM</h1>
        
<script type="text/javascript">    

//获取 id="title" 的元素，并修改其内容    document.getElementById("title").innerHTML = "Hello";    

</script>

2.修改元素样式

<h1 id="title">JS访问DOM</h1>    

<script type="text/javascript">
   //获取 id="title" 的元素        
    var title = document.getElementById("title");     
   
    //修改其颜色        
    title.style.color = "red";        

    //修改其字体大小        
    title.style.fontSize = "46px";    
</script>

七、根据本节内容实现简易计算器
1.代码实现

<!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>Document</title>
    <script>
        function test(){
            var x1=document.getElementById("x1").value;
            var x2=document.getElementById("x2").value;
            //var x3=document.getElementById("x3").value;
            var op = document.getElementById("op").value;
            var x3;
           /* if(x1==null||x2==null){
                alert("输入错误！")*/
           
            switch(op){
                case '+':x3=x1+x2;break;
                case '-':x3=x1-x2;break;
                case '*':x3=x1*x2;break;
                case '/':x3=x1/x2;break;
            }
            document.getElementById("x3").value = x3;
        }

    </script>
</head>
<body> 
        <table align="center">
            <tr>
                <td ><input type="text" id="x1"/></td>

               <td>
                   <select id="op">            
                <option value=“+” id="jia">+</option>                
                <option value="-" id="jian">-</option>            
                <option value="*" id="cheng">*</option>   
                <option value="/" id="chu">/</option>        
            </select>   </td>

                <td ><input type="text" id="x2"/></td>

                <td>=</td>
                <td ><input type="text" id="x3" /></td>
            <td><input type="button" id="jisuan" onclick="test()" value="计算" /></td>
</body>
</html>