围绕DOM元素节点的增删改查

HTML 文档中的所有内容都是节点:

  • 整个文档是一个文档节点 document
  • 每个 HTML 元素是元素节点 element
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

围绕DOM节点的操作可以概括为四种:增、删、改、查

一、增:

增加新元素

如需向 HTML DOM 添加新元素,您首先必须创建该元素,然后把它追加到已有的元素上。

document.createElement(“标签名”);  创建元素节点  并返回该元素  但此时  并没有添加到文档中

 parent.appendChild(newChild) 方法,将新元素作为父元素的最后一个子元素进行添加 若将要插入的节点 在文档中已经存在  则相当于剪切功能

parentNode.insertBefore(a,b在指定的子节点前面插入新的子节点。  在b之前插入a,a b 都是parentNode的子元素

除此之外也可以:

document.createTextNode(“文本内容”);  创建文本节点

document.createComment();  创建注释节点

document.createDocumentFragment();  创建文档片段

二、删:

parentNode.removeChild(子节点);  删除被选节点的子节点    返回的为被删除的节点  相当于剪切

Node.remove()删除被选节点的所有内容,返回null,相当于移除

三、改:

(1)改变元素

  替换 HTML DOM 中的子节点 replaceChild()

parent.replaceChild(newNode,originNode); 用newNode替换到parent中的originNode

改变元素内容
element.innerHTML="新内容";

(2)改变属性

  setAttribute("prop","value")把指定属性设置或修改为指定的值。

(3)改变样式

 element.style.prop="newValue";

(4)改变事件

 element.onxxx=function(){

//函数体

}

xxx为事件类型 如:click、dbclick、mouseup等

四、 查:

element.innerHTML 会返回元素的内容

element.style.prop 会返回元素的样式 ,注意只能获得设置在行间的样式

window.getComputedStyle(element,null).prop 会返回元素的样式 ,注意只能获得设置在行间的样式,且该方法为只读的,IE9以下不兼容

elementNode.getAttribute("属性名");

查询DOM节点的方法,点这里

注意一点:DOM 根节点

有两个特殊的属性,可以访问全部文档:

  • document.documentElement - 全部文档
  • document.body - 文档的主体

HTML DOM 对象参考手册

posted @ 2018-06-05 17:43  心晴安夏  阅读(405)  评论(0编辑  收藏  举报