实训第六天

最新推荐文章于 2024-10-10 11:15:29 发布

公子卿辞

最新推荐文章于 2024-10-10 11:15:29 发布

阅读量52

点赞数 1

分类专栏： html js 文章标签： html js javascript

本文链接：https://blog.csdn.net/qq_45647409/article/details/117692476

版权

html 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

本文介绍了HTMLDOM的基本概念，包括文档对象模型的节点层级关系，并展示了如何使用JavaScript访问和操作DOM元素，通过示例代码解释了getElementById等方法的用法。此外，提供了一个简易计算器的HTML和JavaScript实现，用于计算两个数的加减乘除。

摘要由CSDN通过智能技术生成

1.介绍
HTML DOM 是 W3C（万维网联盟）制定的关于HTML的标准
HTML DOM（ Document Object Model ），即文档对象模型
HTML DOM 定义了访问和操作 HTML 文档的标准方法(接口)
HTML DOM 以树状结构表达 HTML 文档
2.节点
在HTML DOM中，所有事物都是节点，整个HTML就是以节点构建的一个DOM树
整个 HTML 文档是一个文档节点
每个 HTML 元素是元素节点
每个 HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
…
3.节点层级关系
HTML DOM树中的节点彼此拥有层级关系
根结点：最顶端结点称为根结点，其没有父节点，如：html
父节点：其可以拥有子节点，如：head
子节点：父节点下一级的节点
同胞节点：拥有相同父节点的同级节点，如：head与body
4.js访问DOM元素
document.getElementById() 方法
document.getElementsByName() 方法
document.getElementsByTagName() 方法
document.getElementsByClassName() 方法
getElementById()

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

//获取 id="title" 的元素    
var title = document.getElementById("title");  
  
// 打印 title 元素的内容    
document.write("打印输出：" + title.innerHTML);   
 
</script>

5.练习——简易计算器

<!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>计算器</title>
</head>
 
<body>
    <div class="container">
        <input type="text" name="" id="opA">
        <select name="" id="select" onchange="selectChange()">
            <option selected="selected" value="0">--请选择-- </option>
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" name="" id="opB">
        <span>=</span>
        <input  type="text" name="" id="result"><br>
        <button onclick="btnClick()">计算</button>
    </div>
    <script>
        let opA = document.getElementById('opA');
        let opB = document.getElementById('opB');
        let result = document.getElementById('result');
        let operSignal = document.getElementById('select');
        let selectValue = operSignal.value;
        function selectChange(e) {
            selectValue = operSignal.value;
            btnClick();
        }
        function btnClick() {
            if (opA.value == '' || opB.value == '') {
                alert('请输入操作数!');
                return;
            }
            let a = parseFloat(opA.value);
            let b = parseFloat(opB.value);
            switch (selectValue) {
                case '+':
                    result.value = a + b;
                    break;
                case '-':
                    result.value = a - b;
                    break;
                case '*':
                    result.value = a * b;
                    break;
                case '/':
                    result.value = a / b;
                    break;
                default:
                    alert('计算错误')
                    break;
            }
        }
    </script>
</body>
 
</html>

效果：
在这里插入图片描述