1-2 JS HTML DOM

DOM简介与查找

DOM == Document Object Model

查找元素：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");（查找id为main的元素下的所有p元素）
var z=document.getElementsByClassName("container");（查找id为main的元素下所有class为container的元素）

通过类名查找HTML元素在ie5、6、7、8中无效

改变DOM内容

改变html元素内容：document.getElementById("content").innerHTML = "newText"

改变html元素属性：document.getElementById("img").src = "qingdao.jpg"

改变html元素样式：document.getElementById("p1").style.color = "blue"

HTML事件

常用的事件类型有：

  1. 当用户点击鼠标时
  2. 当网页已加载时
  3. 当图像已加载时
  4. 当鼠标移动到元素上时
  5. 当输入字段被改变时
  6. 当提交 HTML 表单时
  7. 当用户触发按键时

一个鼠标移入移出的事件例子：onmouseover="style.color='red'" onmouseout="style.color='blue'"

请把鼠标移到这段文本上

HTML元素的节点

添加节点的步骤：

  1. 创建一个新的元素var strong = document.createElement("strong");
  2. 创建一个新的文本节点var txt = document.createTextNode("这是新添加的文本节点; ");
  3. 将文本节点添加到创建的元素里strong.appendChild(txt);
  4. 向已有元素追加新元素document.getElementById("addHtmlNode").appendChild(strong);

删除节点的步骤：

  1. 获取子元素节点（这里是数组）var strong = document.getElementsByClassName("willBeRm");(生成元素时已添加此类名)
  2. 获取父元素节点var parent = document.getElementById("addHtmlNode");
  3. 从父节点中删去子节点if(strong[0]) parent.removeChild(strong[0]);
  4. 也可以没有步骤2，直接查找自己的父元素然后删掉自己if(strong[0]) strong[0].parentNode.removeChild(strong[0]);