第七天
03-对象模型-第01天{DOM、常用属性}
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(){ // 事件处理程序 } <!--小猫发威-->  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;
}
}
