第七天

03-对象模型-第01天{DOM、常用属性}

• 第七天
  • DOM相关概念
    • 什么是DOM
    • DOM内容概念
  • DOM操作
    • 获取元素
    • 设置属性
    • 绑定事件
  • 阻止a标签默认行为
  • 文本属性
    • innerText
    • innerHtml
    • textContent
  • innerText的兼容性处理（封装）
    • 获取文本
    • 设置文本

DOM相关概念

什么是DOM

• DOM: Document Object Model 文档对象模型
• 作用: 可以把HTML文档模型化,当作对象来处理

DOM内容概念

• 文档(document): HTML或XML文件
• 节点(node):HTML文档中的所有内容都可以称之为节点，常见的节点有 元素节点 属性节点 文本节点 注释节点
• 元素(element): HTML文档中的标签可以称为元素

DOM操作

获取元素

• document.getElementById: 通过id寻找一个元素（找到的是一个元素对象） 该方法只能被document对象调用（同一个文档中id不能重复）

  <div id="box"></div>
  var box = document.getElementById(“box”);
  
  

• document.getElementsByTagName: 通过标签名寻找一类元素（找到的是由元素对象组成的伪数组,既可以被document调用，又可以被元素对象调用，被元素对象调时表示在该元素对象内部执行查找

  <div class="cl" id=“cl”>
      <div class="cl2"></div>
      <div class="cl2"></div>
  </div>
  <div class="cl"></div>
  <div class="cl"></div>
  
  var divs = document.getElementsByTagName("div");// 获取页面上所有的div,divs是一个伪数组
  var cl = document.getElementById("cl");// 获取id为cl的元素
  var cl2s = cl.getElementsByTagName("div");// 获取cl元素下面所有的div标签,cl2s是一个伪数组
  
  

• document.getElementsByClassName通过类名寻找一类元素

  <div class="cl" id=“cl”>
      <p class="cl"></div>
      <span class="cl"></div>
  </div>
  <a class="cl"></a>
  
  var cls = document.getElementsByClassName("cl");//获取到的是一个伪数组,里面装的是div p span a这四个元素对象
  
  

设置属性

• 获取到的本来就是对象,所以设置属性可以直接以对象设置属性的方式来写

  <div id="box"></div>
  var box = document.getElementById(“box”);
  
  box.属性名 = “属性值”;
  
  等价于 <div id="box" 属性名="属性值"></div>
  
  

绑定事件

• 事件三要素: 事件源 事件 事件处理程序

  事件源.事件 = function(){
      // 事件处理程序
  }
  
  <!--小猫发威-->
  ![](cat.jpg)
  var img = document.getElementById("img");
  
  img.onclick = function(){
      img.src = "tiger.jpg";
  }
  
  // img是事件源 事件是点击onclick 事件处理程序是函数体中的内容
  
  

阻止a标签默认行为

<a href="http://www.baidu.com" onclick="return false">想要阻止我？</a>

<a href="http://www.baidu.com" onclick="return stop()">谁都阻止不了我？</a>

function stop(){
    return false;
}

<a href="http://www.baidu.com" onclick="javascript:void(0)">人类已经阻止不了我了?</a>

文本属性

innerText

• 获取和设置标签中的内容，设置的内容会被当作普通文本（有兼容性问题，旧版ff不支持）

  <div id="box"></div>
  var box = document.getElementById("box");
  box.innerText = "这段文本可以显示在div中";
  
  

innerHtml

• 获取和设置标签中的内容，设置的内容会当作节点对象被解析到DOM树上

  <div id="box"></div>
  var box = document.getElementById("box");
  box.innerHtml = "<h1>这段文本会h1标题的形式显示在div中</h1>"
  
  

textContent

• 获取和设置标签中的内容，设置的内容会被当作普通文本（有兼容性问题，旧版IE不支持）

  <div id="box"></div>
  var box = document.getElementById("box");
  box.textContent = "这段文本可以显示在div中";
  
  

innerText的兼容性处理（封装）

获取文本

function getInnerText(element) {
        // 能力检测 判断是否有这一属性
    if (typeof element.innerText === "string") {
        return element.innerText;
    } else {
        return element.textContent;
    }
}

设置文本

function setInnerText(element, content) {
        // 能力检测 判断是否有这一属性
    if (typeof element.innerText === "string") {
        element.innerText = content;
    } else {
        element.textContent = content;
    }
}