JavaScript 编程
2015-08-12 22:13
681 查看
第五章 文档对象模型DOM
面向对象:1、
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> var arr = [ {name: "张三", age: 20}, {name: "李四", age: 21}, {name: "赵武", age: 22}, {name: "钱千", age: 23}, {name: "李颖", age: 24}, {name: "周瑶", age: 25}, {name: "吴赛", age: 26}, {name: "郑斌", age: 27}, {name: "王琦", age: 28}, {name: "冯峥", age: 29}, ] function Student(name, age, count) { this.name = name; this.age = age; this.count = count; } var tableEle = document.createElement("table"); tableEle.setAttribute("border", "1"); var _1RowEle = tableEle.insertRow(0); var _1Row1CellEle = _1RowEle.insertCell(0); _1Row1CellEle.appendChild(document.createTextNode("序号")); var _1Row2CellEle = _1RowEle.insertCell(1); _1Row2CellEle.appendChild(document.createTextNode("姓名")); var _1Row3CellEle = _1RowEle.insertCell(2); _1Row3CellEle.appendChild(document.createTextNode("年龄")); document.body.appendChild(tableEle); Student.prototype.showInfo = function () { var _2RowEle = tableEle.insertRow(this.count + 1); var _2Row1CellEle = _2RowEle.insertCell(0); _2Row1CellEle.appendChild(document.createTextNode(this.count + 1)); var _2Row2CellEle = _2RowEle.insertCell(1); _2Row2CellEle.appendChild(document.createTextNode(this.name)); var _2Row3CellEle = _2RowEle.insertCell(2); _2Row3CellEle.appendChild(document.createTextNode(this.age)); document.body.appendChild(tableEle); } for (var count = 0; count < 10; count++) { var p = new Student(arr[count].name, arr[count].age, count); p.showInfo(); } </script> </html>
结果显示:
2、操作文本:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div> <p>haha</p> <p>hehe</p> </div> </body> <script type="text/javascript"> //选择元素 var pEle = document.getElementsByTagName("p")[0]; //改变文本 pEle.firstChild.nodeValue = "heihei"; pEle.firstChild.data = "xixi"; </script> </html>
相关文章推荐
- [持续更新]JavaScript学习笔记(二)
- Accessing the System Clipboard with JavaScript
- javaScript-事件
- 事件模型
- MVC中从Controller像View层传值
- js如何验证用户输入的只能是数字?
- JS学习十二天----正则表达式的模式匹配
- JSP学习笔记(七):session
- JSP学习笔记(六):cookie的读写
- 解析JSON数据,并从其中的图片地址取图片
- Js实现排序算法
- The JavaScript Event Loop: Explained
- jsoup html
- jstree动态生成树
- JS学习十一天----类和模块
- JSP学习笔记(五):web.xml中的url-pattern的映射规则
- JavaScript基础学习之-JavaScript权威指南-第三章类型、值和变量(2)
- JavaScript基础学习之-JavaScript权威指南-第三章类型、值和变量
- BZOJ 题目1016: [JSOI2008]最小生成树计数(Kruskal+Matrix_Tree)
- 如何按照顺序执行异步ajax的回调函数