DOM应用
2017-10-30 本文已影响17人
想做一个画家
DOM简介:
//DOM - document object model 文档对象模型
//其实dom的作用就是给了我们一些属性和方法，让我们可以操作页面中的标签
//页面元素 ： 标签
获取元素的第一种方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天气不错</title>
<script>
//书写方式，驼峰命名法
//传入一个字符串类型的id名即可
//console.log(document.getElementById("box"));
//发现获取结果为null，说明没有获取到对应的元素
//入口函数：
window.onload = function () {
//作用：内部书写的所有代码，会在页面完全加载（结构，图片）后执行。
console.log("这是入口函数中获取的标签");
console.log(document.getElementById("box"));
};
</script>
</head>
<body>
<div id="box"></div>
<script>
// 标签的获取方式：
// 方式1：可以将js代码书写在body的最底部，可以保证所有的标签先进行加载。
console.log(document.getElementById("box"));
// 方式2：可以使用入口函数的形式(见head中的代码)
</script>
</body>
</html>
样式操作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天气不错</title>
</head>
<body>
<div id="box"></div>
<script>
//1 获取元素
var box = document.getElementById("box");
//2 样式操作
//通过js设置的样式，在标签的行内生效
//第一步需要先用标签.style，可以获取到这个标签的所有样式
//console.log(box.style);
//第二步是用标签.style.具体的样式名
//设置的样式值为字符串类型，如果有单位，加单位
box.style.width = "100px";
box.style.height = "100px";
//在css中加-的样式名，在js中使用时去除-，并且后面的首字母大写（驼峰命名法）
//z-index zIndex font-size fontSize
box.style.backgroundColor = "red";
</script>
</body>
</html>
文本操作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天气不错</title>
</head>
<body>
<div id="box">
我是内容
<p>我是p标签</p>
</div>
<script>
var box = document.getElementById("box");
//1 标签设置文本使用innerHTML属性
//1.1 设置纯文本
//box.innerHTML = "我是box的内容";
//1.2 设置文本和标签
//如果在设置的内容中含有标签的形式，innerHTML属性执行时会进行标签的生成
box.innerHTML = "我是内容<p>我是子标签p</p>";
//2 获取内容
console.log(box.innerHTML);
//覆盖的问题：
//当我们使用innerHTML属性进行内容设置时，会对原内容进行覆盖
//box.innerHTML = "我是新的内容";
//解决的方式：
//可以使用innerHTML+=的方式防止覆盖
//box.innerHTML = box.innerHTML + "我是新的内容";
box.innerHTML += "我是新的内容";//简化后
//新的问题：虽然新旧内容同时存在，但是实际上内部的子标签新旧是不同的（重新生成，长得一样）。
</script>
</body>
</html>
getElementsByTagName的基本使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天气不错</title>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
//注意：我们在DOM中获取的所有数组形式的数据，均为伪数组形式
//元素的获取方式2：根据标签名获取元素（可以同时操作多个标签）
// 基本语法： document.getElementsByTagName("标签名");
//var divs = document.getElementsByTagName("div");
//console.log(divs);
//我们发现，获取的结果调用数组方法报错，说明不支持数组方法，是伪数组。
arr= [1,2,4,5]
arr.push();
/*//需求：给每个div设置样式
//1 遍历divs
for (var i = 0; i < divs.length; i++) {
//2 取出伪数组divs中的每个标签后才能进行样式操作
divs[i].style.width = "100px";
divs[i].style.height = "100px";
divs[i].style.backgroundColor = "red";
divs[i].style.marginBottom = "10px";
}*/
</script>
</body>
</html>
在某个标签内部根据标签名获取元素:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天气不错</title>
</head>
<body>
<div id="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
//getElementsByTagName前面的元素是可以更改的
//如果使用 标签.getElementsByTagName() 表示在这个标签内部根据标签名获取元素
var box = document.getElementById("box");
var divs = box.getElementsByTagName("div");//只获取到了box内部的div
//console.log(divs);
for (var i = 0; i < divs.length; i++) {
divs[i].style.width = "100px";
divs[i].style.height = "100px";
divs[i].style.backgroundColor = "red";
divs[i].style.marginBottom = "10px";
}
</script>
</body>
</html>
其他需要注意的问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天气不错</title>
</head>
<body>
<div id="box"></div>
<p></p>
<script>
//1 根据id名,由于id名具有唯一性，获取的时候getElementById的前面的元素不能修改
// document.getElementById()
//2 由于id名的唯一性，所以浏览器允许不获取直接使用
// 不是规范写法，不推荐使用
//console.log(box);
//3 我们也可以使用标签名的获取元素获取单一的一个元素
//var text = document.getElementsByTagName("p");
//console.log(text);
////注意，尽管获取的标签只有一个，结果依然是伪数组，需要取出内部的标签后再进行操作。
////text.style.width = "100px";
//text[0].style.width = "100px";
//简化方式：
var text = document.getElementsByTagName("p")[0];
</script>
</body>
</html>
隔行变色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天气不错</title>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
//1 获取元素
var lis = document.getElementsByTagName("li");
//2 遍历取出所有li
for (var i = 0; i < lis.length; i++) {
//lis[i] 是每个li
//3 需要根据奇偶不同，设置不同背景色
if (i % 2 == 0) {
//i为偶数，lis[i]是奇数行
lis[i].style.backgroundColor = "red";
} else {
//i为奇数，lis[i]是偶数行
lis[i].style.backgroundColor = "blue";
}
}
</script>
</body>
</html>
效果展示
隔行变色.png
常用功能的封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天气不错</title>
</head>
<body>
<div id="box"></div>
<script>
//为什么要封装函数功能?
//1 方便代码的使用（写起来更方便）
//2 增加代码的可读性
//根据id名获取元素的封装：
var box = id("box");
/**
* 根据id名获取元素
* @param idName 传入字符串的id名
* @returns {Element} 返回获取到的标签
*/
function id(idName) {
return document.getElementById(idName);
}
//样式设置操作的基本封装：
//box.style.width = "100px";//原生的书写方式
// setCss(box, "width", "100px");//我们期望的使用方式
// setCss(box, "height", "100px");
// setCss(box, "backgroundColor", "red");
function setCss(tag, styleName, styleValue) {
//注意，styleName的值是用户传入的字符串，所以使用的时候需要使用[]的属性访问方式
tag.style[styleName] = styleValue;
}
//同样的功能，在使用时需要多次调用，对性能的消耗较大
//所以需要对setCss功能进行修改，使这个函数可以一次进行多个样式的设置
//setCss(box, "width", "100px", "height", "100px");
//我们发现，传入多个需要修改的样式时，参数个数不定，使用时不太方便
//可以采用对象的传入方式
setCss(box, {
width: "150px",
height: "150px",
backgroundColor: "red"
});
function setCss(tag, obj) {
//需要将用户设置的每一组数据取出，依次进行样式设置操作即可
for (var k in obj) {
//k - 属性名 - 字符串类型 - 也就是需要设置的样式名
//obj[k] - 属性值 - 代表了要设置的样式值
tag.style[k] = obj[k];
}
}
//关于返回值问题的说明：
//1 所有的设置操作不需要返回值。
//2 所有的获取操作均需要返回值。
</script>
</body>
</html>
事件
<script>
//事件：用于捕捉用户操作的一种方式
//事件的三个组成部分：
//1 触发事件的东西
//2 如何触发的
//3 触发后什么结果
//车撞树的这个例子中，车是触发事件的东西，触发方式是撞，结果(树倒了，车坏了，人被砸了，但是没事)
//事件三要素：
//1 事件源(被动触发的)
//2 事件类型(点击，移入。。。)
//3 事件处理程序：类型为函数（只有函数才可以保存一部分代码）
//语法：
//事件源.事件类型 = function () {
//事件处理程序
//}
</script>
点击事件效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天气不错</title>
</head>
<body>
<button id="btn">按钮</button>
<script>
//点击按钮，弹出一个提示框，提示今天天气不错
//事件源 - 按钮
//事件类型 - 点击 - onclick
//事件处理程序 - 弹出一个提示框，提示今天天气不错
var btn = document.getElementById("btn");
//事件源.事件类型 = function () {
//事件处理程序
//}
btn.onclick = function () {
alert("今天天气不错");
};
</script>
</body>
</html>
标签行内属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天气不错</title>
</head>
<body>
<div id="box" title="呵呵"></div>
<script>
//标签行内自带的属性
//可以通过 标签.属性名 的方式进行访问
var box = document.getElementById("box");
//获取操作:
console.log(box.id);
//设置操作:
box.id = "box3";
console.log(box.title) // 呵呵
</script>
</body>
</html>
图片切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天天气不错</title>
</head>
<body>
<button id="btn1">切换为图片2</button>
<button id="btn2">切换为图片1</button>
<script>
//1 获取元素
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var pic = document.getElementById("pic");
//2 按钮1 点击后切换图片为222.jpg
btn1.onclick = function () {
pic.src = "images/222.jpg";
};
//3 按钮2 点击后切换为111.jpg
btn2.onclick = function () {
pic.src = "images/111.jpg";
};
</script>
</body>
</html>
