JavaWEB笔记11 Javascript中的节点案例和JSON对象
文章目录
一.通过节点关系来查找/获取元素：
JS中获取标签元素的方法除了通过标签元素的id名，类名，标签类型等常用的获取方法之外，还可以通过节点关系来查找和获取元素，下面将介绍对应的几种通过节点关系来查找和获取元素的常用方法：
- 获取文档中所有的节点：
var nodeARR = document.all;
//all属性可以拿到全部的节点对象
for(var i=0;i<nodeARR.length;i++){
alert(nodeARR[i]); }
- 获取该标签下全部的子节点：
var all = document.body.childNodes;
- 获取该标签下不同类型的子节点：
firstChild 获取当前第一个子节点
lastChild 获取当前最后一个子节点
- 获取当前元素的父节点：
parentNode - 获取当前节点的兄弟节点：
nextSibling 获取当前节点的下一个节点：兄节点
previousSibling 获取当前节点的上一个节点：弟节点
- 上述获取节点的方法之间可以进行连缀和多次调用，因为得到的结果都是对应的节点
- 获取节点元素包括：标签，文本，属性
- 获取文本节点的节点值：
nodeValue
节点类型：nodeType
节点名称：nodeName - 获取元素的属性：（会忽略空文本和注释，更常用）
parentElement 获取当前元素的父元素对象
firstElementChild 获取当前父元素的第一个标签对象
lastElementChild 获取父元素的最后一个标签对象
previousElementSibling 获取上一个兄弟元素对象
nextElementSibling 获取下一个兄弟元素对象
二.计算器案例：
通过JS实现一个简易的网络计算器：
首先在html标签中需要建立一个输入框input以及一个表格，表格中的合并属性：colspan="2"，建立计算器的思路：
【1】 先实现简单的运算：点一个数，点一个运算符，再点一个数，最后点等号，显示结果
- 1）所有数字和小数点归为一类，添加class
- 2）所有运算符归为一类，添加class
- 3）其他按键单独添加id
- 4）数字的实现：
document.getElementsByClass("数字类");并绑定点击事件 - 5）简单运算实现：需要三个变量存储：第一个数 运算符 第二个数
- 6）点击时将第一个数的点击+=到存储第一个对象的innerText
- 7）给运算符绑定点击事件：点击运算符时要将显示框中清空：把第一个数给第二个数并将第一个数清空用来接下一个输入的数
- 8）计算函数：把字符串的数组转换成数字：Number(numValue)
- 9）归零：点击后展示0并将数字1数字2和运算符均清空
【2】 实现四则运算：主要思路：使用对应的两个参数之间的值传递等进行
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>网页版计算器</title>
<style type="text/css">
input {
height: 50px;
width: 400px;
font-size: 30px;
}
tr {
text-align: center;
font-size: 25px;
}
td:hover {
background-color: aquamarine;
cursor: pointer;
}
</style>
</head>
<body>
<center>
<input type="text" name="" value="0" disabled="disabled" id="showResult" />
</center>
<table border="1" align="center" cellspacing="0" cellpadding="0" height="500px" width="400px">
<tr>
<td id="clear">C</td>
<td id="del">退格</td>
<td id="pcnt">%</td>
<td class="opr">/</td>
</tr>
<tr>
<td class="num">7</td>
<td class="num">8</td>
<td class="num">9</td>
<td class="opr">*</td>
</tr>
<tr>
<td class="num"
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
