javascript的DOM增删改查基本操作

DOM

DOM简介

1. DOM -> Document Object Model
2. DOM定义了表示和修改文档所需的方法. DOM对象即为宿主对象和, 有浏览器厂商决定, 用来操作HTML和XML功能的一类对象的集合. 也有人称DOM是对HTML以及XML的标注接口.

---

DOM操作

对结点的增删改查

1. 查看结点元素

   • document 代表整个文档
   • document.getElememtByld( )//元素再IE8以下的浏览器, 不去分id大小写, 而且也返回匹配name属性的元素

   • .getElementsByTagName()//标签名

     返回的是一个类数组, 单独操作时后面加[ ]中括号

   • .getElelementsByName();//需注意, 只有部分标签name可生效(表单, 表单元素, img, ifname)

   • .getElementByClassName();//类名->ie8和ie8以下的ie版本没有, 可以多个ckass一起

     返回的是一个类数组

   • querySelector();//css选择器, 在ie7和ie7以下版本中没有, css怎么写, 括号里怎么写 注意：它只能选择一个元素静态, 以上是实时

   • .querySelcetorAll()//css选择器 在ie7和ie7以下版本中没有

遍历结点树

• parentNode->父节点(最顶端的parentNode为#document)
• childNodes -> 子节点们
• firstChild -> 第一个子节点
• lastChild -> 最后一个子节点
• nextSibling -> 后一个兄弟节点
• previousSibling -> 前一个兄弟节点

基于元素节点树的遍历

• parentElement -> 返回当前元素的父元素节点
• children -> 只返回当前元素的元素子节点
• node. childElementCount === node.children.length当前元素节点的子元素节点个数(IE不兼容)
• firstElementChild->返回的是第一个元素节点(IE不兼容)
• lastElementChild -> 返回的是最后一个元素节点(IE不兼容)
• nextElementSibling/ previousElementSibling -> 返回后一个/ 前一个兄弟元素节点(IE不兼容)

节点的类型

• 元素节点——–1
• 属性节点——–2
• 文本节点——–3
• 注释节点——–8
• doucument——–9
• DoucumentFragment——–11
• 获取节点类型 nodeType

节点的4个属性

• nodeName
  元素的标签名, 以大写形式表示, 只读
• nodeValue
  Text节点或Comment节点的文本内容, 可读写
• nodeType
  该节点的类型, 只读
• attributes
  Element 节点的属性集合
• 节点的最后一个方法 Node.hasChildNodes();

DOM结构树

• getElementByld方法定义在Doucument.prototype上, 即Element节点上不能使用
• getElementsByName方法定义在HTMLDocument.prototype上, 即非html中的document以外不能使用(xml, document, Element)
• getElementByTagName方法定义在Document.prototype和Element.prototype上
• HTMLDoucument.prototype定义了一些常用属性, body, head, 分别指代HTML的文档中的< head >< body >标签
• Doucument.prototype上定义了document.Element属性, 指代文档的根目录, 在HTML文档中, 他总是指代< html >元素
• getElementByClassName\ querySelectorAll\ querySelector在Document.prototype, Element.prototype类中均有定义

增删改查

增

• document.createElement();创建标签
• document.createTextNode();创建文本
• document.createComment();创建注释节点
• document.createDocumentFragment();

插

• PARENTNODE.appendChild();插入节点, 在parentNode下插入. (例 parentNode换成div )
• PARENTNODE.insertBefore(a, b);

删

• parent.removeChild();剪切, 返回删除的节点
• parent.remove( )真.删除

替换

• parent.replaceChild(new//新的, origin//老的);

Element节点的一些属性

• parent.innerHTML查看/修改文本(带标签)
• innerText(火狐不兼容)/ textContent(老版本IE不兼容)可读可写(不带标签)

Element节点的一些方法

• ele.setAttribute();设置属性
• ele.getAttribute();查看属性