[作特效, 学JS] -- 12 加餐-DOM扩展

什么是DOM

• 文档对象模型(document object model)
• 网页里面的各个元素都是树形结构

js操做网页

• 找对象

  • document.getElementById() 经过id来找对象
  • document.getElementsByTagName() 经过标签名来找对象, 返回的是一个数组, 即使只有一个元素
  • document.querySelector() 经过css选择器来找对象, 只找第一个
  • document.querySelectorAll() 经过css选择器来找对象, 找到全部对象, 返回"数组"
  • document.getElementsByClassName() 经过类名来找对象, 返回的是一个"数组"

• 操做对象

  • 改内容, object.innerHTML, object.innerText
  • 改属性, 对象.属性名 = 属性值

  document.getElementById("image").src="landscape.jpg";
  复制代码

  • 改样式, 对象.style.样式名 = 样式值
  • css怎么写, js就怎么写, 可是若是有-, 须要改为驼峰命名

  document.getElementById("p2").style.color="blue";
  document.getElementById("p2").style.fontFamily="Arial";
  document.getElementById("p2").style.fontSize="larger";
  复制代码

  dom事件

  • onclick 鼠标点击触发

  • onmouseover 鼠标移入触发

  • onmouseout 鼠标移出触发

  • 追加的方式

    • 对象.onclick = function(){}

  • onfocus, input框获取焦点时触发

  • 事件监听 addEventListener

  • 如下两行, 效果同样

  document.getElementById("myBtn").addEventListener("click", displayDate);
  document.getElementById("myBtn").onclick = displayDate;
  复制代码

  • 还有onmouseover, onmouseout

  element.addEventListener("mouseover", myFunction);
  element.addEventListener("mouseout", myThirdFunction);
  复制代码

  • 移除监听事件
  • removeEventListener()

  element.removeEventListener("mousemove", myFunction);
  复制代码

  节点操做

  • appendChild() 追加一个子元素到最后
  • insertBefore(a,b) 把子元素, 插入到某个特定的子元素以前, 把a插到b以前
  • 删除子元素parentNode.removeChild(子元素对象), 须要父元素来调用
  • 替换子元素parentNode.replaceChild(a,b), 用a把b换掉, a和b都是子元素

  var para = document.createElement("p");
  var node = document.createTextNode("这是一个新的段落。");
  para.appendChild(node);
  复制代码

  以上三行, 至关于建立<p>这是一个新的段落。</p>

  • document.createTextNode, 建立一个文本节点
  • 注意一点, document.getElementsByTagName(), 能够用下标来获取值, 可是, 不是一个数组.

  引荐一位前端大神阮一峰

  • 我的博客:www.ruanyifeng.com/home.html
  • js教程:wangdoc.com/javascript/…

专栏地图

• [作特效, 学JS] -- 00 开篇
• [作特效, 学JS] -- 01 超连接鼠标移入变大变红, 鼠标移除还原
• [作特效, 学JS] -- 02 鼠标移入, div变大变红, 鼠标移出, 回复原貌
• [作特效, 学JS] -- 03 网页换肤
• [作特效, 学JS] -- 04 复选框全选
• [作特效, 学JS] -- 05 复选框全选/全不选
• [作特效, 学JS] -- 06 复选框全选/全不选/反选
• [作特效, 学JS] -- 07 网页选项卡
• [作特效, 学JS] -- 08 倒计时
• [作特效, 学JS] -- 09 正经的 全选和反选
• [作特效, 学JS] -- 10 自动生成表格
• [作特效, 学JS] -- 11 加餐-神奇的正则表达式
• [作特效, 学JS] -- 12 加餐-DOM扩展
• [作特效, 学JS] -- 13 加餐-聊聊BOM