常用的dom的操作方法

##1.访问/获取节点


document.getElementById(id);           //返回对拥有指定id的第一个对象进行访问


document.getElementsByName(name);      //返回带有指定名称的节点集合   注意拼写:Elements


document.getElementsByTagName(tagname);  //返回带有指定标签名的对象集合   注意拼写:Elements


document.getElementsByClassName(classname);  //返回带有指定class名称的对象集合 注意拼写:Elements


##2.创建节点/属性


document.createElement(eName);  //创建一个节点


document.createAttribute(attrName); //对某个节点创建属性


document.createTextNode(text);   //创建文本节点


##3.添加节点


document.insertBefore(newNode,referenceNode);  //在某个节点前插入节点


parentNode.appendChild(newNode);        //给某个节点添加子节点


##4.复制节点


cloneNode(true | false);  //复制某个节点  参数:是否复制原节点的所有属性


##5.删除节点


parentNode.removeChild(node);  //删除某个节点的子节点 node是要删除的节点


注意:为了保证兼容性,要判断元素节点的节点类型(nodeType),若nodeType==1,再执行删除操作。通过这个方法,就可以在 IE和 Mozilla 完成正确的操作。


nodeType属性可返回节点的类型.最重要的节点类型是:


元素类型节点类型

元素element        1

属性attr        2

文本text        3

注释comments        8

文档document        9

##6.修改文本节点


方法作用

appendData(data);将data加到文本节点后面

deleteData(start,length);将从start处删除length个字符

insertData(start,data);在start处插入字符,start的开始值是0;

replaceData(start,length,data);在start处用data替换length个字符

splitData(offset);在offset处分割文本节点

substringData(start,length);从start处提取length个字符

##7.属性操作


getAttribute(name)    //通过属性名称获取某个节点属性的值


setAttribute(name,value);  //修改某个节点属性的值


removeAttribute(name);  //删除某个属性



##8.查找节点


parentObj.firstChild;  //如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使用 parentObj.firstChild.firstChild.....


parentObj.lastChild;  //获得一个节点的最后一个节点,与firstChild一样也可以进行递归使用 parentObj.lastChild.lastChild.....


parentObj.childNodes;   //获得节点的所有子节点,然后通过循环和索引找到目标节点


##9.获取相邻的节点


curtNode.previousSibling;  //获取已知节点的相邻的上一个节点


curtNode.nextSlbling;    // 获取已知节点的下一个节点


##10.获取父节点


childNode.parentNode;  //得到已知节点的父节点


##11.替换节点


replace(newNode,oldNode);

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 本章内容 理解包含不同层次节点的 DOM 使用不同的节点类型 克服浏览器兼容性问题及各种陷阱 DOM 是针对 HT...
    闷油瓶小张阅读 769评论 0 1
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,858评论 0 7
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,913评论 0 8
  • 本篇是基于《JavaScript高级程序设计(第3版)》DOM相关章节做的整理与归纳,概述了DOM的常见节点类型及...
    查查查查查查克阅读 2,637评论 2 7
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,502评论 0 21

友情链接更多精彩内容