DOM相关概念

饥人谷_李栋


1.节点的属性
2.节点的方法
3.节点的集合


一、node属性

  • nodeName://节点的名字

  • nodeType://节点的常数值

ELEMENT_NODE-> 1
TEXT_NODE-> 3
DOCUMENT_NODE-> 9
ATTRIBUTE_NODE-> 2

  • ownerDocument://拥有他的文档

  • nextSibling://下一个兄弟节点(后面有空格则返回一个文本节点内容为空格)

  • previousSibling://前一个兄弟

  • parentNode:父节点

  • parentElement://父Element节点

  • textContent://返回当前节点和后代节点的文本内容

注意,会忽略节点内部的标签,如果不是直接包含文本会一直往里走直到找到文本为止


document.getElementById('div').textContent='

hello!

' //会把

hello!

整体当作文本 document.getElementById('div').innerHTML ='

hello!

' //会把hello!当作文本
  • nodeValue://返回/设置节点的值(字符串)

  • childNodes:// 返回一个子节点集合(类似array)

  • firstNode://返回 第一个子节点

  • lastChild://返回最后一个子节点

  • baseURI://当前网页的绝对路径

注意,不是URL


二、节点的方法

  • appendChild(节点对象)://在子节点后 插入节点对象

var p=document.createElement('p')//创建一个p标签

document.body.appendChild(p)//在body的子节点后加p


var p=document.createTextNode('你好')

document.body.appentchild(p)//在body的子节点后加p内容为你好

  • cloneNode(参数)://克隆一个节点

注意,参数为true,则克隆子节点

添加的事件回调不会被克隆

  • insertBefore(): //将某个节点插入当前节点的指定位置

target.insertBefore(插入的元素,插入的位置)

  • removeChild(参数)://删除子节点

注意,参数必须是当前节点的儿子

删除所有子节点://循环删,直到为空

  • replaceChild()://将一个新节点替换某一个子节点

target.replaceChlid(新儿子,旧儿子)

注意,id区分大小写,标签不分大小写

等号左边可以随便,右边就要区分了

  • contain()://是否包含这个内容

  • compareDocumentPosition(): //同contain返回7bit二进制值表示参数节点和当前节点的位置

0相同1不在同一个文档2在前面4在后面8包含16被包含32浏览

器私有

  • isEqualNode()://节点是否相等,同===

  • normalize()://处理节点内部的文本节点(去除空文本节点,其他的合并为一个文本节点)

三、节点的集合

  1. NodeList
    注意,他是一个对象,不是数组,只含有索引和length两个属性
  2. HTMLCollection
    注意,也是个节点集合,成员是element (不包含文本节点)
  3. parentNode //获取Element子节点
    Element节点、document节点、DocumentFrangment节点
  • children //返回所有Element子节点
  • firstElementChild //返回第一个Element子节点
  • lastElementChild //返回最后一个Element子节点
  • childElementCount //返回所有Element子节点的数目
  1. ChildNode处理子节点
  • remove()//移除当前节点

你可能感兴趣的:(DOM相关概念)