DOM应用

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>
![](images/111.jpg)

<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>

最后编辑于：2017.12.11 06:41:23

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 218,386评论 6赞 506
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,142评论 3赞 394
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,704评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,702评论 1赞 294
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,716评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,573评论 1赞 305
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,314评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,230评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,680评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,873评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,991评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,706评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,329评论 3赞 330
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,910评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,038评论 1赞 270
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,158评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,941评论 2赞 355

DOM应用

推荐阅读更多精彩内容