javascript的DOM增删改查基本操作

DOM简介
DOM -> Document Object Model
DOM定义了表示和修改文档所需的方法. DOM对象即为宿主对象和, 有浏览器厂商决定, 用来操作HTML和XML功能的一类对象的集合. 也有人称DOM是对HTML以及XML的标注接口.
DOM操作对结点的增删改查
查看结点元素document 代表整个文档
document.getElememtByld( )//元素再IE8

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();查看属性
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!