Web前端之路

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>
![](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>
上一篇 下一篇

猜你喜欢

热点阅读