DOM

Document Object Model

对象和方法

element

  • element.innerHTML = new html content
    改变元素的 inner HTML
  • element.attribute = new value
    改变 HTML 元素的属性值
  • element.setAttribute(attribute, value)
    改变 HTML 元素的属性值
  • element.style.property = new style
    改变 HTML 元素的样式

本例返回 class=”intro” 的所有 <p> 元素列表：

1
var x = document.querySelectorAll("p.intro");

window

  • setInterval() 设置间隔执行函数

dom对象

  • addEventListener\()当传递参数值时，请以参数形式使用调用指定函数的“匿名函数”

    在 addEventListener() 方法中，通过使用“useCapture”参数来规定传播类型：
    1
    2
    3
    4
    addEventListener(event, function, useCapture);
    /*默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。*/
    /*在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。
    在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。*/
    文本节点的值能够通过节点的 innerHTML 属性进行访问
    访问 innerHTML 属性等同于访问首个子节点的 nodeValue每个节点都有三个属性：nodeName,nodeType,nodeValue。

nodeType 属性：

  • 如果节点是元素节点，则 nodeType 属性将返回 1。
  • 如果节点是属性节点，则 nodeType 属性将返回 2。

nodeName 属性:

  • nodeName 属性规定节点的名称。
  • nodeName 是只读的
  • 元素节点的 nodeName 等同于标签名
  • 属性节点的 nodeName 是属性名称
  • 文本节点的 nodeName 总是 #text
  • 文档节点的 nodeName 总是 #document

nodeValue 属性:

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined

文本节点的 nodeValue 是文本文本

属性节点的 nodeValue 是属性值

html中的换行也算节点 ，但只有空白，可以封装函数，传入父节点，遍历所有子节点，找到nodeType==3并且满足/^s+$/正则的文>本节点，删除它，注意删除时必须倒序删除

parentNode返回父节点

previousSibling返回上一个同级节点

nextSibling返回下一个同级节点

node.attributes可以获得节点的属性集合(无序 不重复的)可以>使用中括号索引属性

parent.replaceChild()替换节点

插入一个已经存在的元素节点，会删除原节点，此时可以使用cloneNode函数，创建一个副本，参数为true时连同文本节点一起克隆，默认为false

insertBefore()插入节点