HTML DOM

HTML DOM

• 通过 id 查找 HTML 元素：document.getElementById();

• 通过标签名查找 HTML 元素：document.getElementsByTagName(“name”) = document.names

• 通过类名查找HTML元素：document.getElementsByClassName();

• 通过CSS选择器查找HTML元素：

  • document.querySelector(’#id’)

  • document.querySelectorAll(div.highlighted > p)

• 获取属性值：object.getAttribute(“src”) = object.src

• 设置属性值：object.setAttribute(“src”,source) = object.src = source

• 获取子元素：

  • childNodes所有子元素 = node.childNodes
  • childNodes第一个元素 = node.firstChild
  • childNodes最后一元素 = node.lastChild
  • 添加新的子节点：appendChild()

• nodeType属性：node.nodeTyoe

  • 元素节点的nodeType属性值是1
  • 属性节点的nodeType属性值是2
  • 文本节点的nodeType属性值是3
  • 注释节点的nodeType属性值是8

• 得到/设置节点的值：node.nodeValue

• 鼠标悬停：onmouseover

• 鼠标离开：onmouseout

• 鼠标点击：onclick

• window.onload = func;

• 按照制定时间调用函数或表达式：setInterval(func,3000)

通过js改变li的值：

var ulNode = document.getElementsByTagName(“ul”)[0];
var liNode = document.createElement(“li”)
ulNode.appendChild(liNode);
document.getElementsByTagName(“li”)[2].innerHTML = currentDate;