JavaScript学习笔记6

最新推荐文章于 2024-10-09 00:58:21 发布

此间诗意杀人地

最新推荐文章于 2024-10-09 00:58:21 发布

阅读量255

点赞数

分类专栏：笔记文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43763188/article/details/122322287

版权

笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

DOM文档对象模型

一、什么是DOM

DOM：文档：文档表示的是整个HTML网页文档；对象：对象表示将网页中的每一个部分都转换为一个对象；模型：使用模型来表示对象之间的关系，这样方便我们获取对象。
DOM文档对象模型是针对HTML和XML文档的一个API(应用程序编程接口)，JS通过DOM来对HTML文档进行操作。

二、节点和事件

节点是构成我们网页的最基本的组成部分，网页中的每一部分都可以称为一个节点
常用节点分为四类：文档节点、元素节点(HTML文档中的HTML标签)、属性节点、文本节点(HTML标签中的文本内容)。
节点属性：nodeName、nodeType、nodeValue(文本节点的nodeValue属性是文本内容)。
事件就是文档或浏览器窗口中发生的一些特定的交互事件，JavaScript与HTML之间的交互式通过事件实现的。如：点击某个元素、将鼠标移到某个元素上方等等。

三、DOM查询

通过document对象调用方法:getElementById();getElementsByTagName();getElementsByName();
通过具体的元素节点调用 getElementsByTagName()方法：返回当前节点的指定标签名后代节点。
属性：childNodes(当前节点的所有子节点)、firstChild、lastChild。childNodes属性会获取包括文本节点在内的所有节点。children属性可以获取当前元素的所以子元素。firstElementChild可以获取当前元素第一个子元素。
获取父节点和兄弟节点（通过具体的节点调用）：parentNode属性：表示当前节点的父节点；previousSibling属性：表示当前节点的前一个兄弟节点；nextSibling属性：表示当前节点的后一个兄弟节点。
innerHTNL:获取元素内部的代码;innnerText:获取到元素内部的文本内容。

四、DOM查询的剩余方法

document.body保存的是body的引用，document.documentElement保存的是HTML标签，document.all代表页面中所有的元素。
根据元素的class属性查询一组元素节点对象：document.getElementByClassName(),但该方法不支持IE8及以下的浏览器。
document.querySelector():返回文档中匹配指定 CSS 选择器的一个元素。该方法需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素的节点对象。使用该方法总会返回唯一的元素，如果满足条件的元素有多个，那么它只会返回第一个。IE8中没有getElementByClassName()方法，但可以使用querySelector()代替。
document.querySelectorAll():该方法与querySelector()类似，不同的是它会将符合条件的元素封装在一个数组中返回。

//找class为box1里的div
var div=document.querySelector(".box1 div");
console.log(div.innerHTML);

五、DOM增删改

创建节点：creatElement()创建元素节点、creatAttribute()创建属性节点、creatTextNode()创建文本节点。

  //插入一个新的li节点
   <div>
      <ul id="ul1">
         <li id="bj">北京</li>
         <li>上海</li>
         <li>长沙</li>
         <li>武汉</li>
      </ul>
   </div>
   <script type="text/javascript">
      var li=document.createElement("li");
      var text=document.createTextNode("广州");
      //appendChild()向1一个父节点中添加新的子节点。
      li.appendChild(text);
      //将li添加到id为ul1的元素节点下
      var ul1=document.getElementById("ul1");
      ul1.appendChild(li);
      var bj=document.getElementById("bj");
      //insertBefore()在指定子节点之前插入新的节点
      ul1.insertBefore(li,bj);
   </script>

removeChild():删除子节点；replaceChild():替换子节点；insertBefore():在指定子节点前插入新节点。
使用innerHTML也可以完成DOM的增删改的相关操作。但一般情况下会两种方式结合使用。

   <script type="text/javascript">
      var ul1=document.getElementById("ul1");
      ul1.innerHTML+="<li>广州</li>";
   </script>

   <script type="text/javascript">
      var li =document.createElement("li");
      li.innerHTML="广州";
      var ul1=document.getElementById("ul1");
      ul1.appendChild(li);
   </script>

五、DOM操作内联样式

通过JS修改元素的样式：语法：元素.style.样式名=样式值。注意：如果CSS的样式中含有-，这种名称在JS中是不合法的，需要将这种样式名修改为驼峰命名法，去掉-，然后-后的单词首字母大写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 25px auto;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div id="box1">
        <button id="button">按钮</button>
    </div>
    <script type="text/javascript">
        var div1=document.getElementById("box1");
        var button=document.getElementById("button");
        button.onclick=function(){
            box1.style.backgroundColor="blue";
        }
    </script>
</body>
</html>

我们通过style属性设置的样式往往是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示，但是如果在样式中写了!important，此时样式会有更高级别的优先级，即使JS也不能覆盖该样式。
获取元素当前显示的样式：语法;元素.currentStyle.样式名。但这个方法只有IE浏览器支持，其他浏览器都不支持。
在其他浏览器中可以使用getComputedStyle()这个方法来获取元素的样式，这个方法需要两个参数：要获取样式的元素；伪元素(null),这个方法会返回一个对象，对象里封装了当前元素对应的样式，可以通过对象.样式名获取来读取样式。

//其他浏览器的方式
alert(getComputedStyle(box1.null).backgroundColor);
//IE8的方式
alert(box1.currentStyle.backgroundColor);
//这两种方法都是只读的，不能修改

5.自定义getStyle()方法

//参数：obj:要获取样式的元素;name:要获取的样式名
function getStyle(obj,name){
      if(window.getComputedStyle){
         return getComputedStyle(obj,null)[name];

      }else{
          return obj.currentStyle[name];
            }
        }

其他样式相关属性:
- clientWidth和clientHeight:这两个属性可以获取元素的可见宽度和高度(包括内容区和内边距)，这些属性都是不带px的，返回都是一个数字，可以直接进行计算。
- offserWidth和offsetHeight:获取元素整个的高度和宽度，包括内容区、内边距和边框。
- offsetParent:获取当前元素的定位父元素，会获取到离当前元素最近的开启了定位的祖先元素(position不是static)。
- offsetLeft和offsetTop:获取当前元素相对于其定位父元素的水平偏移量和垂直偏移量。
- scrollWidth和scrollHeight:可以获取元素整个滚动区域的宽度和高度。scrollLeft和scrollTop:可以获取水平或垂直滚动条滚动的距离。当满足scrollHeight-scrollTop == clientHeight说明垂直滚动条滚动到底了，当满足scrollWidth-scrollLeft ==clientWidth时说明水平滚动条滚动到底了。