JavaScript学习总结(七)
2018-02-27 18:26
218 查看
这一讲我们来学习DOM编程(十分重要),有了DOM编程,我们就可以操作任意的HTML元素了。
浏览器在解析HTML页面的时候,每遇到一个html标签就会创建一个此标签的对象(任何标签都会有一个对应的对象),当解析完成的时候就会创建一个完整的文档树。使用JavaScript寻找标签结点的时候,我们应当在文档树中获取。而文档树的每一个标签对象都称为Node。
我们可以通过如下的方式获取HTML的所有标签对象:
请记住一个基本原则:我们想要操作哪个标签对象,就要找到对应的属性,看如何来操作这些属性即可。(JavaScript的标签文档可以去百度下载,如果没有也可以加我的QQ1247525776跟我要,广交朋友嘛)。
1. 通过标签属性找标签
这种方法的几种寻找方式如下:
练习:实现选择部分商品或者全选商品,并且对选择的商品进行总金额的计算。
下面的代码实际上就是对复选框进行一些列的操作,实现我们平时所看见的全选或者不选的功能,以及最后实现计算总价的功能,仅此而已,没有我们想象的那么复杂。下面直接贴代码。
2. 通过关系找标签
学过数据结构与算法的同学会感到非常的亲切。。。。
这里我就默认大家都学过了数据结构与算法,如果你没学过最好马上就学了,因为这部分的用途十分广大。我们这里讲的虽然不是数据结构与算法,但是能够帮助你理解节点之间的关系还是非常有用处的。
父子关系:一个标签可以有多个子标签,一个子标签只能有一个父标签,下面这些只是值,后面没有括号。
还有一点内容,虽然一般情况下,我们会将< script >标签写在外面,但是执行的时候,浏览器会自动将标签挪入< body >标签中, 并且在处理文档的过程中,会将HTML代码中的空文本和注释也当成节点。
那么,我们现在只想要标签对象,如何处理呢?
实际上,节点还有一个nodeType的属性,标签对象的nodeType均为1,在得到所有的节点之后判断一下这个属性就可以了;还有另外一种处理方式,不常用,就不介绍了。
上面的这些内容相当于一个节点的属性,直接用“.”调用即可
应用如下:
应用这种方法,就可以添加一个按钮了。
应用如下:添加或者删除附件的功能。
DOM,文档对象模型
一个html页面被浏览器加载的时候,浏览器就会对整个html页面上的所有标签都会创建一个对应的对象进行描述,我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到对应的对象操作对象的属性,则可以改变浏览器当前显示的内容。浏览器在解析HTML页面的时候,每遇到一个html标签就会创建一个此标签的对象(任何标签都会有一个对应的对象),当解析完成的时候就会创建一个完整的文档树。使用JavaScript寻找标签结点的时候,我们应当在文档树中获取。而文档树的每一个标签对象都称为Node。
我们可以通过如下的方式获取HTML的所有标签对象:
var allNodes = document.all; for(var i=0;i<allNodes.length;i++){ alert(allNodes[i].nodeName); }
请记住一个基本原则:我们想要操作哪个标签对象,就要找到对应的属性,看如何来操作这些属性即可。(JavaScript的标签文档可以去百度下载,如果没有也可以加我的QQ1247525776跟我要,广交朋友嘛)。
找结点的方法
想要找HTML标签共有两种方法。1. 通过标签属性找标签
这种方法的几种寻找方式如下:
document.getElementById("html元素的id") /*这个方法要注意一点,当我们找到这个标签后,并且想向这个标签中插入内容,使用的方法有两个。 一是innerHtml,使用情况为存在标签体;另外一个是value,使用情况为无标签体,直接设置的是标签的value值。*/ document.getElementsByTagName("标签名") document.getElementsByName("html元素的name")
练习:实现选择部分商品或者全选商品,并且对选择的商品进行总金额的计算。
下面的代码实际上就是对复选框进行一些列的操作,实现我们平时所看见的全选或者不选的功能,以及最后实现计算总价的功能,仅此而已,没有我们想象的那么复杂。下面直接贴代码。
<script type="text/javascript"> function checkAll(allNode){ var nodes = document.getElementsByName("item"); //实现全选的功能,只需要点击全选,然后循环将所有item的checked(true为选中,false为不选中)属性置为选择状态即可。 for(var i=0;i<nodes.length;i++){ nodes[i].checked = allNode.checked; } } function 4000 getSum(){ var nodes = document.getElementsByName("item"); //总金额 var sum = 0; for(var i=0;i<nodes.length;i++){ if(nodes[i].checked){ sum += parseInt(nodes[i].value); } } alert(sum); var sumNode = document.getElementById("sumid"); //¥人民币的标识 sumNode.innerHTML = (" ¥"+sum).fontcolor("green"); } </script>
2. 通过关系找标签
学过数据结构与算法的同学会感到非常的亲切。。。。
这里我就默认大家都学过了数据结构与算法,如果你没学过最好马上就学了,因为这部分的用途十分广大。我们这里讲的虽然不是数据结构与算法,但是能够帮助你理解节点之间的关系还是非常有用处的。
父子关系:一个标签可以有多个子标签,一个子标签只能有一个父标签,下面这些只是值,后面没有括号。
还有一点内容,虽然一般情况下,我们会将< script >标签写在外面,但是执行的时候,浏览器会自动将标签挪入< body >标签中, 并且在处理文档的过程中,会将HTML代码中的空文本和注释也当成节点。
那么,我们现在只想要标签对象,如何处理呢?
实际上,节点还有一个nodeType的属性,标签对象的nodeType均为1,在得到所有的节点之后判断一下这个属性就可以了;还有另外一种处理方式,不常用,就不介绍了。
parentNode 获取当前元素的父节点。 childNodes 获取当前元素的所有下一级子元素,返回的是一个数组 firstChild 获取当前节点的第一个子节点。 lastChild 获取当前节点的最后一个子节点
nextSibling 获取当前节点的下一个节点(兄节点) previousSibling 获取当前节点的上一个节点(弟节点)
上面的这些内容相当于一个节点的属性,直接用“.”调用即可
创建与插入节点、设置节点的属性
用到的方法如下:document.createElement("标签名") 创建新元素节点 elt.setAttribute("属性名", "属性值") 设置属性 elt.appendChild(e) 添加元素到elt中最后的位置
应用如下:
应用这种方法,就可以添加一个按钮了。
function add(){ var inputNode = document.createElement("input"); inputNode.setAttribute("type","button"); inputNode.setAttribute("value","按钮"+num); num++; var bodyNode = document.getElementsByTagName("body")[0]; bodyNode.appendChild(inputNode); }
插入目标元素的位置 elt.insertBefore(newNode, oldNode); 添加到elt中,child之前。 注意: elt必须是oldNode的直接父节点。 elt.removeChild(child) 删除指定的子节点 注意: elt必须是child的直接父节点。
应用如下:添加或者删除附件的功能。
<head> <meta charset="utf-8"> <title>应用:增加附件</title> </head> <script type="text/javascript"> //添加附件 function addFile(){ var trNode = document.createElement("tr"); var tdNode1 = document.createElement("td"); var tdNode2 = document.createElement("td"); //这里直接使用html语言作为插入的内容即可,浏览器依然可以解析出来 tdNode1.innerHTML = "<input type='file'/>"; tdNode2.innerHTML = "<a href='#' onclick='delFile(this)'>删除附件</a> "; trNode.appendChild(tdNode1); trNode.appendChild(tdNode2); //table标签并非tr标签的直接父节点,tr的直接父节点应该是tbody,不信可以自己动手试一下 var tbodyNode = document.getElementsByTagName("tbody")[0]; var lastRow = document.getElementById("lastRow"); //tableNode.appendChild(trNode); tbodyNode.insertBefore(trNode,lastRow); } //删除附件,传入的this表示的是a标签 function delFile(aNode){ var trNode = aNode.parentNode.parentNode; var tbodyNode = document.getElementsByTagName("tbody")[0]; tbodyNode.removeChild(trNode); } </script> <body> <table> <tr id="file"> <td><input type="file"/></td><td><a href="#" onclick="delFile(this)" >删除附件</a></td> </tr> <tr id="lastRow"> <td colspan="2"><input onclick="addFile()" type="button" value="添加附件"/></td> </tr> </table> </body>
相关文章推荐
- javascript中的事件学习总结
- JavaScript第五天学习--事件总结
- 前端学习总结(十八)ES6——新一代的javascript
- JavaScript 学习总结 (四)
- 关于javascript中的事件学习及总结
- xml学习总结收藏-C# 操作Xml,Javascript操作xml
- 如何理解AMD ,CMD,CommonJS规范--javascript模块化加载学习总结
- JavaScript学习总结(十五)——Function类
- JavaScript学习总结(一)基础部分
- JavaScript 对象深入学习总结
- JavaScript中的undefined学习总结
- Javascript学习总结--数据类型
- JavaScript学习总结(7)——JavaScript基础知识汇总
- Lession 20 Javascript 学习总结
- javascript中this的学习总结
- JavaScript学习总结(七)Ajax和Http状态字
- js总结示意图、javascript总结、javascript 学习线路图
- JavaScript学习总结二:js闭包(Closure)概念
- Javascript学习总结-基本语法-(二)
- 近期学习javascript和jquery遇到一些问题的技巧知识总结