JS基础操作之DOM基础

最新推荐文章于 2022-05-16 22:34:29 发布

JerryXZR

最新推荐文章于 2022-05-16 22:34:29 发布

阅读量282

点赞数

分类专栏： JS基础

本文链接：https://blog.csdn.net/qq_37779333/article/details/86581109

版权

JS基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

基本概念解析：
（1）文档对象模型（Document Object Model），它定义了访问和处理HTML文档的标准方法。现在我们主要接触到的是HTML DOM。这个主要是由Window.document提供，通过这个我们可以进行操作页面。
HTML文档中的每个成分都是一个节点。HTML文档中的所有节点组成了一个文档树（节点树）。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续延伸枝条，直到处于这棵树最低级别的所有文本节点为止。学习DOM，就是学习一些操作页面元素的API（方法）。
（2）DOM用途
通过JavaScript，我们可以重构整个HTML页面文档。可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西（即动态改变），JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型（DOM）来获得的。

页面获取元素的几种方法：
//通过ID来进行抓取元素的值
document.getELementById(idStr);
//通过标签来进行抓取元素
document.getElementsByTagName(tagStr);
//通过CSS 中的class来进行抓取元素
document.getElementsByClassName(classStr);

JS中的事件处理过程机制：
a，事件源 //要注册事件的对象
b，事件名称 //要注册哪种事件，click、mouseover等等
c，事件处理程序 // 要执行的函数

（1）通过点击事件来进行处理事件

<div id="box" style="width: 100px; height: 100px; "></div>
<input type="button" value="点击切换颜色" onclick="toggle();"/>
<script>
     var box = document.getElementById("box");
     function toggle() {
         box.style.backgroundColor = "#f00"; 
     }
</script>

（2）内嵌式绑定事件–通过获取ID来进行绑定事件

<div id="box" style="width: 100px; height: 100px; " id="box"></div>
<input type="button" value="点击切换颜色" id="btn"/>
<script>
    var box = document.getElementById("box");
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        box.style.backgroundColor = "#f00";
    }
</script>

(3)内嵌式进行添加事件的监听器
方法API调用说明：
addEventListener(type, listener, useCapture);
//type，事件名称（注意不带on）
//listener，时间的监听者–事件处理函数
//useCapture，是否捕获，true（捕获） false（冒泡）

<input type="button" value="button" id="btn"/>
<script>
     var btn = document.getElementById("btn");
     btn.addEventListener("click", function () {
         alert("我说：哈哈哈"); 
     },false);
     btn.addEventListener("click", function () {
          alert("她说：23333");
     }, false);
     //两次事件都会执行，这是区别于on方式的
</script>

与attachEvent方法解析的区别主要为方法入参的以及this的作用域问题解析：
（1）事件名称的区别：
addEventLisener中第一个参数type是click、load，不带on
attachEvent中一个参数type是onclick、onload
（2）this的区别：
addEventLisener：事件处理程序会在当前对象的作用域运行，因此事件处理程序的this就是当前对象
attachEvent：事件处理程序是在全局作用域下运行,因此this就是window
注意事项：函数方法的使用过程之中，尽量进行避免使用匿名函数方法的使用。因为匿名函数进行调用的过程中会占用内存。不易释放。因此建议写在事件之外。
事件释放：
element.onclick = null
removeElementListener
（4）标签内容获取

第一种方式，innerText
第二种方式，innerHTML
     两者的区别：
     1，两者都可以获得页面元素之间的内容
     2，innetText只会获取文本信息，而innerHTML会将标签之间的标签获取到，
     并会原样输出
     3，innerText在火狐早期版本不支持，早期火狐只支持textContent，新版
     4，innerText设置带有标签内容的时候，会正常输出；
     innerHTML会将里面的标签渲染成HTML标签显示（转义）

（5）DOM基本页面操作
5.1 给元素添加类名以改变样式
5.2 用JS改变标签的单属性值
5.3 修改元素背景色
5.4 动态改变元素的宽高
5.5 改变元素的位置（定位）
5.6 改变元素的层级
5.7 改变元素的透明度

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: rebeccapurple;
            position: absolute;
        }
    </style>
</head>
<body>
<input type="button" id="btn" value="button">
<input type="button" value="按钮1" id="btn" aa="自己设置的类名">
<div id="box"></div>
<script>
    var btn = document.getElementById("btn");
    //设置属性，改变了原来的属性值
    btn.value = "我是辛小俊";     
    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    btn.onclick = function () {
       //设置背景颜色
        box.style.backgroundColor = "blue"; 
       //设置行内样式宽度
        box.style.width = " 400px"; 
        //设置行内样式高度
        box.style.top = "200px";    
        //改变元素层级关系
        box.style.zIndex = "1"; 
        //设置样式的透明度
        box.style.opacity = .5; 
    };
</script>
</body>