这两天整理一下以前的学习笔记,上一篇简单整理了一点javascript的,这次简单整理下DOM操作的。
一、DOM模型分三种节点 元素节点(html) 文本节点 属性节点
二、访问节点的两种方式
a: getElementsByTagName() 例如:var a = document.getElementsByTagName("img"); 得到a 是所有页面中img的数组 a.length 有多少个img a[0].tagName a第一个原色的tagname,a[0].childNodes[0].nodeValue;
b: getElementById("id"); var a = document.getElementById("id") a.tagName a.childNodes[0].nodeValue
三、设置节点属性 getAttribute() setAttribute();
该方法不能通过document对象调用,只能通过一个元素节点对象来调用
<img src="01.jpg" title="abc"/>
var a = document.getElementsByTagName("img")[0];
alert(a.getAttribute("title"));
a.setAttribute("src","02.jpg");
四、创建节点 创建元素节点用 createElement() 创建文本节点 createTextNode()
三步
1、var op = document.createElement("p");
2、var oText = document.createTextNode("create text");
3、op.appendChild(oText);
document.body.appendChild(op);
五、删除节点 删除节点是通过父节点的removeChild()方法完成的。
var op = document.getElementsByTagName("p")[0];
op.parentNode.removeChild(op);
六、替换节点 替换节点通过replaceChild()完成也是需要针对节点的父节点来操作
var oldOp= document.getElementsByTagName("p")[0];
var newOp = document.createElement("p");
var newText = document.createTextNode("create Text");
newOp.appendChild(newText);
oldOp.parentNode.replaceChild(newOp,oldOp);
分享到:
相关推荐
自己的XML DOM4J学习笔记 自己的XML DOM4J学习笔记
从菜鸟教程上学习的关于js的学习笔记,可以用于参考学习使用,脑图样式,浏览更方便,有需要的同学可以带走
NULL 博文链接:https://hbiao68.iteye.com/blog/1520723
dom编程学习笔记.pdf
DOM学习笔记,DOM学习笔记,DOM学习笔记,DOM学习笔记,DOM学习笔记,DOM学习笔记,
dom操作帮助
博文链接:https://dingjun1.iteye.com/blog/210165
JS的重要部分DOM的学习笔记,基于传智播客前端培训视频所做的笔记以及相关案例代码,包括事件、DOM节点获取与操作、DOM实用案例、DOM属性操作、元素操作、BOM、内置对象
dom4j是目前比较主流的对xml文件进行解析的API。
jQury-DOM篇学习笔记,内容仅供参考。
韩顺平老师的javascript之dom编程的笔记
dom4jAPI帮助文档
NULL 博文链接:https://hbiao68.iteye.com/blog/1485776
JavaScript是在浏览器中运行的,如果它只限于加减乘除运算,而不能将运算结果实现在浏览器中,或者不能与用户进行交互操作,那么它就失去了存在的意义.
按照杨中科老师将的课一个一个做的笔记,并加以详细的注释
一、 Dojo学习笔记(1. 模块与包) 1 二、 Dojo学习笔记(2. djConfig解说) 4 三、 Dojo学习笔记(3. Dojo的基础对象和方法) 6 四、 Dojo学习笔记(4. dojo.string & dojo.lang) 9 五、 Dojo学习笔记(5. dojo.lang.array ...
达*js DOM课堂详细笔记PPT,DOM操作是JS的重要一环,只有熟练的操作DOM才能用好JS