`
neil-jh
  • 浏览: 147793 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

DOM操作以前的学习笔记

阅读更多
这两天整理一下以前的学习笔记,上一篇简单整理了一点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); 
分享到:
评论

相关推荐

    Dom4j学习笔记

    **标题解析:** "Dom4j学习笔记" 这个标题明确指出了我们要探讨的主题——Dom4j。Dom4j是一个流行的Java库,用于处理XML文档。它提供了丰富的API,使得XML的读取、写入、操作变得简单易行。在学习笔记中,通常会涵盖...

    XML DOM4J学习笔记

    本篇笔记将深入探讨XML DOM4J的学习要点。 一、XML基础知识 1. XML结构:XML文档由元素(Element)、属性(Attribute)、文本内容(Text)、注释(Comment)等组成。每个XML文档都有一个根元素,其他元素嵌套在根...

    dom4j 学习笔记

    **DOM4J学习笔记** DOM4J是一个强大的Java XML API,它提供了丰富的XML处理功能,包括文档构建、解析、修改和查询。作为一个开源项目,DOM4J在XML处理领域具有广泛的用户基础,因其简单易用和高效性能而备受青睐。...

    JavaScript HTML DOM学习笔记.emmx

    从菜鸟教程上学习的关于js的学习笔记,可以用于参考学习使用,脑图样式,浏览更方便,有需要的同学可以带走

    dom4j学习笔记

    **DOM4J学习笔记** DOM4J是一个Java库,它提供了强大的XML处理功能,包括解析、操作和生成XML文档。这个库是开源的,广泛应用于Java应用程序中,特别是在需要处理XML数据时。DOM4J的设计目标是易于使用,同时保持高...

    DOM4J学习笔记

    **DOM4J学习笔记** DOM4J是一个Java库,它提供了强大的XML处理功能,包括解析、操作和生成XML文档。这个库是开源的,广泛应用于Java项目中,因其易用性和灵活性而备受开发者喜爱。这篇笔记将深入探讨DOM4J的核心...

    dom编程学习笔记.pdf

    dom编程学习笔记.pdf

    dom4j学习笔记.txt

    ### DOM4J学习笔记 #### 一、DOM4J简介 DOM4J是一个Java库,用于处理XML数据。它提供了一种非常灵活的方式来解析、创建和修改XML文档。DOM4J是一个开源项目,由Red Hat公司支持。相较于其他XML解析器如DOM、SAX等...

    传播智客扬中科老师讲的DOM 学习笔记

    根据给定的文件信息,我们可以总结出以下关于DOM(Document Object Model)操作的关键知识点: ### DOM简介 DOM是一种处理HTML和XML文档的标准接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM...

    DOM - 学习笔记

    此外,DOM还允许开发者访问和操作CSS样式,结合CSS(级联样式表)和JavaScript,可以实现动态HTML(DHTML),使得网页不仅有静态内容,还能根据用户交互改变样式和内容,提供丰富的用户体验。例如,通过改变元素的...

    传播智客杨中科DOM51-60学习笔记

    根据给定的文件信息,我们可以总结出一系列与DOM(Document Object Model)操作相关的知识点,主要集中在HTML元素的选择、样式修改以及动态元素创建等方面。以下是详细的知识点解析: ### 一、选择并修改DOM元素 #...

    JS基本功DOM学习笔记

    在JS基本功DOM学习笔记中,我们将深入探讨以下几个核心知识点: 1. **DOM树**:DOM将网页内容表示为一棵由节点构成的树形结构,其中每个节点代表HTML元素、属性、文本等。根节点通常是`document`,其他节点如`&lt;div&gt;...

    Dom编程学习笔记

    韩顺平老师的javascript之dom编程的笔记

    Dom4j学习教程+API+xml实用大全+xml学习笔记+htc

    标题"Dom4j学习教程+API+xml实用大全+xml学习笔记+htc"提及了几个关键主题,包括Dom4j的学习资源、API文档,以及关于XML的实用指南和学习笔记,还提到了一个名为"htc"的文件,可能是关于HTC设备或技术的文档。...

    JavaScript dom操作 dom元素查询 示例代码

    JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...

    js_HTML_Dom操作练习

    这个练习项目会涵盖以上这些基本概念,通过实际操作,学习者可以掌握如何使用JavaScript操纵HTML页面,从而实现交互性和动态效果。随着对DOM操作的熟练掌握,开发者能够更好地理解前端开发的核心原理,为后续的Web...

    jQury-DOM篇学习笔记

    jQuery DOM篇的学习主要涵盖了解DOM(Document Object Model)节点的创建、插入、删除以及相关的操作方法。DOM是HTML和XML文档的结构化表示,通过DOM,我们可以方便地访问和修改文档内容。 首先,jQuery提供了简便...

Global site tag (gtag.js) - Google Analytics