2019.8.13节点的选取

节点类型

// DOM：核心DOM 能够操作所有结构化文档（HTML，XML）万能复杂繁琐
// HTML DOM 专门操作HTML内容的API 常用的API进行简化 -- 简单不是万能
// 实际开发中：先用简单，如果简单的不能解决问题、实现不了在用核心DOM补充
// 网页中一切在内存中都是以树形结构存储的存储上下级包含关系最直观的结构
// HTML中的每一个元素：元素，属性，文本都是一个节点对象（Node） document对象是整棵树的根节点

// 节点对象（Node）三大属性：
// 1.nodeType number
专门区分节点的类型：
9 document
1 element
2 attribute
3 text
需要区分节点类型的时候使用
// 2.nodeName 节点名字符串
document #document
element 全大写的标签名
attribute 属性名
文本节点 #text
进一步区分元素的名称时使用
// 3.nodeValue 节点值
document null
element null
attribute 属性值
text 文本的内容
DOM操作 --->对DOM树的内容做增删改查

节点查找

1.三个元素不需要找，直接获得：
<html> document.documentElement
<head> document.head
<body> document.body
2.节点之间的关系：
1）父子关系
node.parentNode 获得node的父节点
node.childNodes 获得node的所有子节点
node.firstChild 获得node下的第一个子节点
node.lastChild 后的node下最后一个子节点
2）兄弟关系
node.preivousSibling: 返回当前节点的前一个兄弟节点
node.nextSibling:返回当前节点的下一个兄弟节点
问题：网页中的一切都是节点，包括换行和空字符

用元素树:仅包含元素节点的树结构 ---不是一颗新树，仅是节点数的子集
1）父子关系
elem.parentElement 返回一个父元素对象
elem.childen IE8支持返回子元素对象集合
elem.firstElementChild 返回第一个子元素对象
elem.lastElementChild 返回最后一个子元素
2）兄弟关系
返回当前节点的前一个兄弟元素
elem.preivousElementSibling
返回当前节点的下一个兄弟元素
elem.nextElementSibling

eg：

<body>
<div id="box">1
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</div>
<div>2</div>
<a href="#">aaa</a>
<span></span>
<ul id="nav">
<li>aa</li>
<li class="active">bb
<ul>
<li>b1</li>
<li class="active sub">b2</li>
<li>b3</li>
</ul>
</li>
<li>cc</li>
</ul>
<form action="#" id="form1">
<input type="text" name="username" placeholder="请输入用户名" id="username">
<input type="checkbox" name="sex">男
<input type="checkbox" name="sex">女
</form>
<script>
// 按照HTML查找在整个页面或者父元素下，查找属性或标签符合条件的元素对象
// 4种
// 1.id 只能用document调用仅返回一个元素
var div = document.getElementById("box");
console.log(div);
// 2.tagName 查找指定父元素下的指定标签元素任何父元素都可以调用
// 返回值哪怕只有哦一个，也放在集合中没有找到符合要求的子节点返回一个空数组
// 查找不仅只查直接子节点，而且查找所有子代节点
var divs = document.getElementsByTagName("div");
var aLinks = div.getElementsByTagName("a");
console.log(document.getElementsByTagName("span"));
console.log(document.getElementsByTagName("p"));
//3.name属性查找查找表单只能用document调用返回：动态数组
// var form1 = document.getElementById("form1");
var chks = document.getElementsByName("sex");
//4.按class属性查找只能通过任意父元素上调用查找的子代只要标签中class属性值符合要求的就被选中
var lis = nav.getElementsByClassName("active");

作业：

<body>
<table width="500px" border="1" cellspacing="0" align="center">
<thead>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</thead>
<tbody>
<tr>
<td>商品1</td>
<td>￥1000</td>
<td>
<button><</button>
<span>1</span>
<button>></button>
</td>
<td>
￥1000
</td>
</tr>
<tr>
<td>商品2</td>
<td>￥600</td>
<td>
<button><</button>
<span>1</span>
<button>></button>
</td>
<td>
￥600
</td>
</tr>
<tr>
<td>商品3</td>
<td>￥12000</td>
<td>
<button><</button>
<span>1</span>
<button>></button>
</td>
<td>
￥12000
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">Total：</td>
<td>
￥13600
</td>
</tr>
</tfoot>
</table>

js页面

//找到所要选用的table标签
//通过标签找到要获取的按钮
var btns = document.getElementsByTagName('button');
//遍历btns中的每个btn
for(var i = 0;i < btns.length;i++){
//给单击事件赋个值方便后面使用
btns[i].onclick = calc;
}
//响应单击事件
function calc(){
//找到span标签，通过先过去父元素节点，再找子代的span，这样快速一些,this指btns[i]
var span = this.parentNode.getElementsByTagName('span')[0];
//span.innerHTML是个字符串，改成数字方便计算，把内容给n作计算
var n = parseInt(span.innerHTML);
//如果btn[i]里面是大于号，那么就作n++，否则，就是n--，不过n=0时，就不减了
this.innerHTML == '>'? n++: n > 0? n--: n == 0;
//把修改之后的内容给到页面中
span.innerHTML = n;
//小计的变化，先获取单价
var price = parseInt(this.parentNode.previousElementSibling.innerHTML.slice(1));
//把单价*数量的数字放入小计中，并呈现
this.parentNode.nextElementSibling.innerHTML = ('￥' + price*n);
//获取三个小计的标签
var tds = document.querySelectorAll('table>tbody td:last-child');
// 遍历小计，将总和给总计,先要定义一个sum接受
for(var i = 0,sum = 0;i < tds.length;i++){
sum += parseInt(tds[i].innerText.slice(1));
}
//获取总计的标签
var td = document.querySelector('table>tfoot td:last-child');
//将总计写入td中，并呈现
td.innerHTML = '￥' + sum;
}

转载于:https://www.cnblogs.com/awei313558147/p/11377334.html

2019.8.13节点的选取相关推荐

matlab13节点线路模型,13节点配电网的建模与仿真.doc
. . 大学生课外创新实验竞赛总结报告项目简介: 在配电网的正常运行中,随着用电负荷的变化和系统运行方式的改变,网络中的损耗也将发生变化.要严格保证所有的用户在任何时刻都有额定的电压是不可能的,因此 ...
训练日志 2019.1.13
成功的起晚了...醒了快 12 点半了... 下午把 STL 常用的容器和算法过了一遍,晚上把之前做过的几个跟 STL 有关的题重新看了下,看了大约三分之一,明天晚上继续吧下个星期正式开始训练,数学 ...
2019.11.13
2019.11.13 wf = wave.open(file_name, 'wb') # wf = wave.open("sine.wav", 'wb') wf.setnchann ...
训练日记2019.11.13 冬至日
2019.11.13 星期三今天记下日记,不过没训练,作业量又上来了,哭死,大学最恐怖的不是作业,而是今天过完还有明天.我的作业大部分写完了,就差几个quiz和一个pa,基本这周就算圆满了.不过还是 ...
18天精读掌握《费曼物理学讲义卷一》第2天 2019.6.13
18天精读掌握<费曼物理学讲义卷一> 第2天 2019/6/13 1. 18日掌握<费曼物理学讲义>卷一计划概览 2. 今日学习成果 3. 今日时间表 4.Atimelogge ...
每日启程——2019.12.13（古人学问无遗力，少壮工夫老始成）
每日启程--2019.12.13(古人学问无遗力,少壮工夫老始成) 昨天,可以说是放飞了自我.好在今天又按时回来工作了,算是收好了心.不过我觉得,真的需要一个良好的睡眠.不然的话,我真的容易被自己心中 ...
基于MATLAB Simulink的IEEE 13节点潮流馈线仿真模型
Thirteen_Bus_Load_Flow:基于MATLAB Simulink的IEEE 13节点潮流馈线仿真模型. 十二个潮流总线用于计算IEEE 13节点馈线电路的不平衡潮流. 仿真条件:MAT ...
java9新特性 2017_Java 9 ← 2017，2019 → Java 13 ，来看看Java两年来的变化
作者 l Hollis来源 l Hollis(ID:hollischuang)距离 2019 年结束,只剩下 35 天了.你做好准备迎接 2020 年了吗?一到年底,人就特别容易陷入回忆和比较之中,比 ...
Java 9 ← 2017，2019 → Java 13 ，来看看Java两年来的变化
距离 2019 年结束,只剩下 10 几天了.你做好准备迎接 2020 年了吗? 一到年底,人就特别容易陷入回忆和比较之中,比如说这几天, 的对比挑战就火了! 这个话题登上了微博的热搜榜,也刷爆了朋 ...

2019.8.13节点的选取

2019.8.13节点的选取相关推荐

最新文章

热门文章