DOM基础 day1

Posted 2020-08-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM基础 day1相关的知识，希望对你有一定的参考价值。

一、什么是DOM

　　DOM的全称是Document Object Model(文档对象模型)，又称为文档树模型，是一套操作html和XML文档的API(应用程序接口)。其中“D”指的是document（文档），也可以理解成浏览器的页面，“O”指的是object（对象），对象包括属性和方法，“M”指的是model（模型）或是map（地图），代指某种事物的表现形式。“DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分，学习DOM就是学习封装好的操作页面的API。

二、DOM的组成

　　DOM由节点组成，文档是由节点构成的集合，每个文档的根节点都是html，节点又可以分为：元素节点（标签节点）、属性节点、文本节点和注释节点，分别代表着标签、属性、文本和注释，其中文档中的空白（换行、空格）均为文本节点。

三、获取页面元素的方法

3.1 document.getElementById(“id名”) ——返回唯一确定的对象

　　通过标签的Id获得元素，得到的是唯一的页面标签对象，其中id值必须由双引号或单引号包裹。一般情况下，我们会引入一个变量存储返回的对象，方便后期的使用。

var box = document.getElementById(“box”);

3.2 document.getElementsByTagName(“标签名”)；——返回标签名相同的数组

　　通过标签名获得对象，返回一个数组（即使只有一个也是数组），通过索引来获得想要操作的元素

扩展1：可以通过通配符来获得页面总共有多少个标签节点

alert(document.getElementsTagName(“*”).length);

扩展2：与id获取方式能过提高精度

var ul = document.getElementById(“ul”);
var lis = ul.getElementsByTagName(“li”);

3.3 document.getElementsByClassName(“标签类名”)——返回类名相同的数组

　　通过标签的类名获得元素，返回的也是一个数组，在Js中不推荐使用这种方式，存在兼容性问题，通过下面的函数封装后能够适用于新老浏览器，慎用。

function getElementsByClassName(node,classname){
              if(node.getElementsByClassName) {　　　　//如果浏览器支持，直接返回
                     return node.getElementsByClassName(classname);
              } else{　　　　　　　　　　　　　　　　　　　//如果浏览器不支持则先获得所有标签节点，然后遍历并返回类名相同的数组
                     var results = new Array();
                     var elems = node.getElementsByTagName(“*”);
                     if (var i=0;i<elems.length;i++){
                            if(eles[i].className.indexOf(classname) != -1) {
                                   results[results.length] = elems[i];
                            }
                     }
              }
         }

四、事件初涉

4.1 什么是事件

　　文档或浏览器窗口中发生的一些特定的交互瞬间

4.2 事件三要素

　　事件源要给谁注册事件

　　事件类型要给事件源注册什么样的事件

　　事件处理程序要执行的代码，去达到某种效果函数或是匿名函数

4.3 书写时间的位置

第一个是内嵌式就是写在一对script标签之间

<script>
　 var btn = document.getElementById(“btn”);
   btn.onclick = function(){
   　　alert(1);
   }
</script>

第二个是行内式，就是在标签之内写事件

<input type=”button” value=”确定” onclick=”fn();”/>

第三个是外链式，调用外部的js文件

<script src=”common.js”></script>//外部要有一个相同名称的js文件

注意：内嵌式的方式必须紧靠在</body>上方放置，而不是在<head>中。为了等待body中的元素加载完成再执行js文档，否则通过id的方式将无法获得正确的对象

4.4 注册事件的方式

第一种是使用on的方式注册事件

onclick	单击鼠标左键触发
ondblclick	双击鼠标左键触发
onmouseover	鼠标悬浮触发
onmouseout	鼠标离开触发
onmousemove	鼠标移动触发
onmousedown	鼠标按下的瞬间触发
onmouseup	鼠标按下后抬起的瞬间触发
onfocus	获取焦点时触发
onblur	失去焦点时触发

第二种是addEventListener(后面讲的，有兼容性的问题)

五、重点案例

5.1 两个按钮实现单击显示和隐藏一个盒子（box,btn1,btn2）

注：display用于更改个数较少时的样式，className用于批量更改

var box = document.getElementById(“box”);
var btn1 = document.getElementById(“btn1”);
var btn2 = document.getElementById(“btn2”);
btn1.onclick = function(){
       box.style.display = “none”;
}
btn2.onclick = function(){
        box.style.display = “block”;
}

5.2 一个按钮实现单击显示和隐藏一个盒子(box,btn)

var box = document.getElementById(“box”);
  var btn = document.getElementById(“btn”);
  btn.onclick = function(){
         if(btn.innerHTML == “隐藏”){//btn.value(input的方式写)
                box.style.display = “none”;
                btn.innerHTML = “显示”;//btn元素在的内容
         }else{
                box.style.display = “block”;
                btn.innerHTML = “隐藏”;
         }
  }

5.3 两个按钮实现单击现实和隐藏多个盒子(boxes,btn1,btn2)

var btn1 = document.getElementById(“btn1”);
var btn2 = document.getElementById(“btn2”);
var boxes = document.getElementsByTagName(“div”);
btn1.onclick = function(){
　　for(var i=0;i<boxes.length;i++){
　　　　boxes[i].style.display = “none”;
　　}
}
btn2.onclick = function(){
　　for(var i=0;i<boxes.length;i++){
　　boxes[i].style.display = “block”;
　　}
}

5.4 一个按钮实现单击显示和隐藏多个盒子(boxes,btn)

var btn = document.getElementById(“btn”);
var boxes = document.getElementsByTagName(“div”);
btn.onclick = function(){
　　if(btn.innerHTML == “隐藏”){
　　　　for(var i=0;i<boxes.length;i++){
　　　　　　boxes[i].style.display = “none”;
　　　　}
　　　　btn.innerHTML = “显示”;
　　}else{
　　　　for(var i=0;i<boxes.length;i++){
　　　　　　boxes[i].style.display = “block”;
　　　　}
　　　　btn.innerHTML = “隐藏”;
　　}
}

5.5 图片切换:点击小图片的链接在站位图片位置出现对应的大图并显示图片名称

<body>
　　<h1>美女相册</h1>
　　<a href=”images/1.jpg” title=”美女1”><img src=”images/1.jpg”></a>
　　<a href=”images/2.jpg” title=”美女2”><img src=”images/2.jpg”></a>
　　<a href=”images/3.jpg” title=”美女3”><img src=”images/3.jpg”></a>
　　<a href=”images/4.jpg” title=”美女4”><img src=”images/4.jpg”></a>
　　<a href=”images/5.jpg” title=”美女5”><img src=”images/5.jpg”></a>
　　<img id=”placeholder” src=”images/placeholder.jpg”>
　　<p id=”des”>请选择一张图片</p>
　　<script>

　　　　var links = document.getElementsByTagName(“a”);
　　　　var placeholder = document.getElementById(“placeholder”);
　　　　var des = document.getElementById(“des”);
     　for(var i=0;i<links.length;i++){
            links[i].onclick = function(){
                   placeholder.src = this.href;
                   des.innerHTML = this.title;//this指此时被点击的图片链接
                   return false;//返回值为false时，链接不跳转
            }
     }

　　</script>
</body>

以上是关于DOM基础 day1的主要内容，如果未能解决你的问题，请参考以下文章

DOM探索之基础详解——学习笔记

2.ReactJS基础(虚拟DOM,JSX语法)

python基础day1

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段

Python基础开发 day1

jQuery的DOM操作