javascript学习之DOM模型(一)
来源:互联网 发布:java解析多层嵌套json 编辑:程序博客网 时间:2024/05/23 00:55
1.访问相关节点
var ohtml = document.documentElement;
\\\\\方法一
var ohead = ohtml.firstChild;
var obody = ohtml.lastChild;
\\\\\\方法二
var ohead = ohtml.childNodes[0]
var obody = ohtml.childNodes[1];
getElementsByTagname("xxx")
获取标签名称为xxx的tag的元素集合
getElementsByName("xxx")
获取元素名称为xxx的集合
元素.getAttribute("") setAttribute("xx" , newvalue) removeAttribute("xx")
对于属性的增删改查
getElementById("ddd")
获取id为ddd的元素
2.节点的增删改查
增
var op = document.createElement("p")
var otext = document.createTextNode("Helloworld")
op.appendChild(otextf)
document.body.appendChild(op)
删
var op = document.getElementById("aa")
document.body.removeChild(op)
不过 最好还是用父节点的方式保证每次都访问的目标节点的父节点 避免混乱 如下:
op.parentNode.removeChild(op);
改
var onew = 新的节点
var old = document.body.getElementById("aa")
old.parentNode.replaceChild(onew , old)
插
var onew = 新的节点
var old = document.body.getElementById("aa")
old.parentNode.insertBefore(onew , old)
3.文档碎片
当需要一次性建立多个内容然后插入到页面中时候 由于每一次插入会造成一次页面更新 ,所以需要
创建一个文档碎片 将新的文档插入进去 然后一次性加入到页面当中
var frag = document.createDocumentFragment();
for(var i = 0;i < 10;i++) {
var op = document.createElement("p")
var otext = document.createTextNode("oh!shit!")
var otext = document.createTextNode("oh!shit!")
op.appendChild(otext);
frag.appendChild(op);
}
document.body.appendChild(frag);
- javascript学习之DOM模型(一)
- javascript学习0---dom模型
- javascript学习六:DOM模型
- JavaScript之DOM事件模型
- JavaScript学习笔记(09)之文档对象模型DOM
- JavaScript学习笔记7 之DOM文档对象模型
- JavaScript---DOM模型之DOM树节点的增、删、改、查(一)
- javascript之DOM技术(一)
- javascript之DOM技术(一)
- JavaScript之DOM编程(一)
- javascript之DOM技术(一)
- javascript基础学习-dom模型(七)
- Javascript学习笔记(DOM 模型概述)
- JavaScript之 ------ 文档对象模型(DOM)
- JavaScript之------文档对象模型(DOM)
- Javascript学习笔记之DOM
- javascript学习之DOM操作
- JavaScript学习笔记之DOM
- Oracle Berkeley DB Dump实例
- 电脑上wap网
- c++ STL之通用编程技术
- Android NDK 开发
- 为什么井盖是圆的?工程派的回答
- javascript学习之DOM模型(一)
- CentOS 配置 tftp
- abstract class和interface的区别
- 迄今见过的最好的职业规划的文章
- (莱昂氏unix源代码分析导读-45) 文件与“资源”
- mysql新建用户的方法
- 公开募集催生Namco Bandai(南梦宫万代)的预售实验
- WCF足迹9:异常1
- html5 canvas入门帖