『前端学习笔记』 JavaScript 事件与对象、DOM与BOM

最新推荐文章于 2024-03-13 11:11:16 发布

大熊软糖M

最新推荐文章于 2024-03-13 11:11:16 发布

阅读量272

点赞数

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

本文链接：https://blog.csdn.net/GLZX_HM/article/details/107252478

版权

前端学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

参考视频：【极客学院】Web前端开发教学 - 第一部分：H5+CSS+JS

参考文档：JavaScript 教程 W3school

DOM对象

HTML DOM

网页被加载时，浏览器会创建网页的文档对象模型DOM（Document Object Model）。
在这里插入图片描述

操作HTML

改变HTML输出流：通过write()方法：

<script>
  document.write("hello");
</script>

不要在文档加载完成之后使用，会覆盖文档：

<script>
  function f(str){
    document.write(str);
  }
</script>

<h1>内容1</h1>
<button onclick="f('内容2')">按钮</button>

代码结果（初始状态）：

在这里插入图片描述

代码结果（点击按钮）：

获取HTML元素：通过get相关方法

获取Tag(标签名)是"p"的元素：

  document.getElementsByTagName("p");

获取Class(类名)是"c1"的元素：

  document.getElementsByClassName("c1");

获取id是"i1"的元素：

  document.getElementById("i1");

获取name是"p1"的元素：

<p name="p1"></p>
<p name="p1"></p> //同名

<script>
  function getName(){
    var count = document.getElementsByName("p1");
    alert(count.length); //输出变量个数 结果为2
  }
  getName(); //调用函数
</script>

可以取到多个同名的元素。
其它get方法也都可以获取多个同值元素。

可以使用下标来索引获取到的集合：

<p name="p1"></p>
<p name="p1"></p> //同名

<script>
  function getName(){
    var count = document.getElementsByName("p1");
    //alert(count.length); //输出变量个数
    var c1 = count[0];
    var c2 = count[1]; //使用下标操作
  }
  //getName(); //调用函数
</script>

改变HTML内容：通过innerHTML属性

<script>
  function f(str){
    var nv = document.getElementById("p1"); //获取元素
    nv.innerHTML = str; //改变内容
  }
</script>

<p id="p1">内容1</p>
<button onclick="f('内容2')">按钮</button>

代码结果（初始状态）：
代码结果（点击按钮）：

改变HTML属性：通过.访问属性

<script>
  function f(){
    document.getElementById("i1").src="image/2.jpg"; //修改属性值
  }
</script>

<button onclick="f()">按钮</button><br>
<img id="i1" src="image/1.jpg">

代码结果（初始）：
代码结果（点击按钮）：

获取和设置HTML属性：getAttribute()、setAttribute()

<a id="a1" title="t1">hello</a>

<script>
  function getAttr(){
    var anode = document.getElementById("a1");
    var aattr = anode.getAttribute("titie"); //值为t1
    anode.setAttribute("title", "t2"); //title值被修改为t2
  }
</script>

获取父子节点：通过childNodes、parentNode属性

<!--父子节点：li是ul的子节点，ul是li的父节点-->
<ul>
  <li>1</li>
</ul>

<script>
  function getNode(){
    var node = document.getElementsByTagName("ul");
    var child = node[0].childNodes; //第0个该元素的子节点集合
    alert(child.length); //长度，计算方式包含了空区域
    alert(child[0].nodeType);

    var node2 =  document.getElementsByTagName("li");
    var parent = node2[0].parentNode;
    alert(parent.nodeName); //结果：UL
  }
  getNode();
</script>

创建元素：createElement()

<script>
  function create(){
    var input = document.createElement("input"); //创建元素
    input.type = "button"; //添加属性方式1：成员运算符.
    input.setAttribute("value", "按钮"); //添加属性方式2：setAttribute

    var body = document.body; //获取body
    body.appendChild(input); //添加
  }
  create();
</script>

为当前HTML界面添加了按钮。

创建文本：createTextNode()

<script>
  function create(){
    var h=document.createElement("h1") //创建元素h1
    var t=document.createTextNode("Hello World"); //创建内容
    h.appendChild(t);
    //h.innerHTML = "Hello World"; //等价写法

    var body = document.body;
    body.append(h);
  }
  create();
</script>

为当前HTML界面添加了h1标题，内容为"hello world"。

插入元素：insertBefore()

<div id="d1">
  <p id="p1">内容</p>
</div>

<script>
  function insert(){
    var d1 = document.getElementById("d1");
    var p1 = document.getElementById("p1");
    var node = document.createElement("p"); //创建p元素
    node.innerHTML = "添加";
    d1.insertBefore(node, p1); //在当前对象中，将参数1，插入到参数2的前面
  }
  insert();
</script

在div标签下，p标签前面，新插入一个p标签。内容为innerHTML中设置的内容。

删除元素：removeChild()

<div id="d1">
  <p id="p1">内容</p>
</div>

<script>
  function remove(){
    var d = document.getElementById("d1");
    d.removeChild(d.childNodes[1]); //删除子节点，索引1
  }
  remove();
</script>

p标签和内容被删除。

网页尺寸

<script>
  function getSize(){
    var width = document.documentElement.offsetWidth; //网页宽度
    var height = document.documentElement.offsetHeight; //网页长度
  }
  getSize();
</script>

offsetHeight不包含滚动条。
scrollHeight包含滚动条。

操作CSS

获取HTML元素对象后，使用.style获取其CSS对象。
随后的对象可以使用.访问其CSS属性。

<script>
  function f(){
    document.getElementById("d1").style.background = "blue";
  }
</script>

<style type="text/css">
  div{
    background-color: #b3d4fc;
    width: 100px;
    height: 100px;
  }
</style>

<button onclick="f()">按钮</button><br>
<div id="d1">
  content
</div>

代码结果（初始）：
代码结果（点击按钮）：

EventListener

事件句柄/监听器。

添加：addEventListener()

<button id="b1">按钮</button>

<script>
  document.getElementById("b1").addEventListener("click", function () {
    alert("hello")
  });
</script>

先后顺序敏感，JS脚本放在button后面。

参数1："click"，表示为点击触发。
参数2：function，调用一个函数，可以现场定义。

代码结果（点击按钮）：
在这里插入图片描述

一种逻辑清楚的写法

<script>
  function f(){ //定义函数
    alert("hello");
  }
  var bt = document.getElementById("b1"); //获取对象
  bt.addEventListener("click", f); //调用函数
</script>

第一种写法直接定义句柄，没有为获取元素创建对象。并且直接在创建时直接定义了函数体。类似Java匿名类。
第二种写法逻辑更清楚，代码可读性较强。更方便代码复用。

添加句柄具有不覆盖的特性

<button id="b1">按钮</button>

<script>
  function f(str){
    alert(str);
  }
  var bt = document.getElementById("b1");
  bt.addEventListener("click", f("效果1"));
  bt.addEventListener("click", f("效果2"));
</script>

代码结果（初始）：
代码结果（点击确定后）：

删除：removeEventListener()

<button id="b1">按钮</button>

<script>
  function f(str){
    alert(str);
  }
  var bt = document.getElementById("b1");
  bt.addEventListener("click", f("效果1"));
  bt.addEventListener("click", f("效果2"));
  bt.removeEventListener("click", f("效果2"));
</script>

参数和add相同，移除单个句柄，
例子中移除了效果2，但是没有移除效果1。

事件

常用键盘事件

事件	描述
onkeydown	当按下按键时运行脚本
onkeypress	当按下并松开按键时运行脚本
onkeyup	当松开按键时运行脚本

常用鼠标事件

事件	描述
onClick	鼠标单击
onMouseOver	鼠标经过
onMouseOut	鼠标移出
onChange	文本内容改变
onSelect	文本内容选中
onFocus	光标聚集
onBlur	光标移出
onLoad	网页加载
onUnload	网页关闭

在HTML相应元素中使用以上事件属性，参数取值为JavaScript函数，函数内部可以进行很多操作，例如**提示、修改值、显示结果(背景颜色文本数值)**等等。

用法详解

事件：onClick鼠标单击

<button onclick="f()">按钮</button>
<script>
  function f(){
    alert("hello");
  }
</script>

代码结果（单击按钮）：

事件：onMouseOver鼠标经过、onMouseOut鼠标移出

<!--JavaScript：定义函数-->
<script>
  //obj为对象名，调用时传入this关键字
  //text为字符串，调用时传入字符串参数
  function f(obj, text){
    obj.innerHTML = text; //内置HTML显示，设置为参数text的值
  }
</script>

<!--CSS：定义样式-->
<style type="text/css">
  .d1{
    width: 100px;
    height: 100px;
    background-color: #b3d4fc;
  }
</style>

<!--HTML：定义内容-->
<div class="d1" onmouseover="f(this, 'in')" onmouseout="f(this, 'out')">
  <!--字符串参数使用单引号，防止符号冲突-->
  first
</div>

代码结果（初始）：
代码结果（鼠标移入）：
代码结果（鼠标移出）：

事件：onChange文本内容改变

<script>
  function f(obj){
    alert("already changed!");
  }
</script>

<form>
  <input type="text" onchange="f(this)">
</form>

代码结果（改变输入框内容）：
在这里插入图片描述

事件：onSelect文本内容选中

<script>
  function f(obj){
    obj.style.background="red"; //修改背景颜色
  }
</script>

<form>
  <input type="text">
  </br>
  <input type="text" onselect="f(this)">
</form>

代码结果（输入内容后，选中）：

事件：onFocus光标聚集、onBlur光标移出

<script>
  function f(obj){
    obj.style.background="red"; //修改背景颜色
  }
  function g(obj){
    obj.style.background="blue"; //修改背景颜色
  }
</script>

<form>
  <input type="text">
  </br>
  <input type="text" onfocus="f(this)" onblur="g(this)">
</form>

代码结果（单击输入框）：
代码结果（鼠标移出）：

事件：onLoad网页加载、onUnload网页关闭
在body标签使用。

<script>
  function f(str){
    alert(str);
  }
</script>

<body onload="f('打开')" onunload="f('关闭')">

</body>

代码结果（打开网页）：

事件流

事件流：描述页面中接受事件的顺序。事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）。
事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接受事件。

事件处理

HTML级

定义：直接添加到HTML文件结构中。
顺序：不敏感（两块代码区域可以互换，无所谓先后）。

<script>
  function f() {
    alert("hello");
  }
</script>

<button onclick="f()">按钮</button>

优点：简单易用。
缺点：修改函数名或参数列表，就要在HTML中所有调用处修改。

DOM0级

定义：把一个函数赋值给一个事件处理程序属性。
顺序：敏感。

<div>
  <button id="b1">按钮</button>
</div>

<script>
  var bt = document.getElementById("b1");
  bt.onclick = function () {
    alert("hello");
  }
  bt.onclick = function () {
    alert("world");
  } //覆盖
  bt.onclick = null; //清空
</script>

优点：在HTML文档中去掉调用过程，修改方便。
缺点：事件处理会互相覆盖。

DOM2级

定义：使用句柄。
顺序：敏感。

<button id="b1">按钮</button>

<script>
  var bt = document.getElementById("b1");
  bt.addEventListener("click", function () {
    alert("hello");
  })
  bt.addEventListener("click", function () {
    alert("world"); //不会覆盖
  })
  //bt.removeEventListener("click", f); //移除
</script>

优点：句柄不会互相覆盖，依次处理。

IE级

定义：IE8之前使用。

<button id="b1">按钮</button>

<script>
  function f() {
    alert("hello");
  }

  var bt = document.getElementById("b1");

  if(bt.addEventListener) //如果支持DOM2级则执行
    bt.addEventListener("click", f);
  else if(bt.attachEvent){ //如果支持IE级则执行
    bt.attachEvent("onclick", f);
  else //都不支持，使用DOM0级
    bt.onclick = f();
</script>

事件对象

在触发DOM事件时都会产生一个事件对象event。

type：获取事件类型

<button id="b1">按钮</button>

<script>
  function f(e){
    alert(e.type); //获取事件类型
  }
  //调用时没有显式为函数添加参数 
  document.getElementById("b1").addEventListener("click", f); //结果：click
  document.getElementById("b1").addEventListener("mouseover", f); //结果：mouseover
</script>

target：获取事件目标

<button id="b1">按钮</button>

<script>
  function f(e){
    alert(e.target); //获取事件目标
  }
  document.getElementById("b1").addEventListener("click", f); //结果：[object HTMLButtonElement]
</script>

stopPropagation()：阻止事件冒泡

事件冒泡：

<div id="d1">
  <button id="b1">按钮</button>
</div>

<script>
  function f(e){
    alert(e.target); 
  }
  document.getElementById("b1").addEventListener("click", f); //事件1 基于button
  document.getElementById("d1").addEventListener("click", f); //事件2 基于button外层div
</script>

I. 代码结果（点击按钮）：
在这里插入图片描述
II. 代码结果（点击确定）：

点击按钮时，会先触发事件1，再触发事件2，称为事件冒泡。

阻止事件冒泡（函数中加一行代码）：

<div id="d1">
  <button id="b1">按钮</button>
</div>

<script>
  function f(e){
    alert(e.target); 
    e.stopPropagation(); //阻止事件冒泡
  }
  document.getElementById("b1").addEventListener("click", f); //事件1 基于button
  document.getElementById("d1").addEventListener("click", f); //事件2 基于button外层div
</script>

点击确定后不会再弹出冒泡。

preventDefault()：阻止默认行为

<!--href取值为默认行为-->
<a id="a1" href="http://www.baidu.com">链接</a>

<script>
  function f(e){
    e.preventDefault(); //阻止默认行为
  }
  document.getElementById("a1").addEventListener("click", f);
</script>

点击链接将不再跳转。

对象

面向对象

一切事物皆对象
对象具有封装和继承特性
信息隐藏

定义对象

使用Object：

  /*定义对象*/
  var p = new Object(); //所有类都是Object的子类
  /*定义属性和方法*/
  p.name = "abc"; 
  p.age = 30;

不推荐使用new，加大内存消耗，减慢网页加载速度。

使用字典：

  /*定义对象、属性和方法*/
  var q = {name:"abc", age:30};

需要初始化。

使用变量：

  /*对象*/
  var Person={
    /*属性*/
    name:"abc",
    age:30,
    /*方法*/
    echo:function(str){
      alert(str);
    }
  }

需要初始化。

使用函数（构造器）：

  /*contructor*/
  function Person(nameText, ageText) {
    this.name = nameText;
    this.age = ageText;
  }
  
  var p = new Person("abc", 30);
  
  document.write(p.name);
  document.write(p.age);

方便复用，推荐使用。后续可以通过原型来添加属性和方法。

使用函数（原型）：

  /*prototype*/
  function Person(){
  }
  Person.prototype={
    name:"abc",
    age:30,
    echo:function(str){
      alert(str);
    }
  }

  var p = new Person();

  /*prototype*/
  function Person(){
  }
  Person.prototype.echo = function(str){
    alert(str);
  }
  
  var p = new Person();

使用函数（不使用new）：

  function Person(){
    var _this = {};
    _this.echo = function(){
      alert("Person");
    }
    return _this;
  }

继承

继承：

  function Person(){ //父类
  }
  Person.prototype.echo = function(){ //父类方法，使用原型定义
    alert("Persion");
  }

  function Student(){ //子类
  }
  Student.prototype = new Person(); //继承父类

  var s = new Student();
  s.echo(); //继承父类方法，可以调用

重写：

  function Person(){ //父类
  }
  Person.prototype.echo = function(){ //父类方法，使用原型定义
    alert("Person");
  }

  function Student(){ //子类
  }
  Student.prototype = new Person(); //继承父类
  Student.prototype.echo = function(){ //重写父类方法
    alert("Student");
  }

  var s = new Student();
  s.echo(); //结果为子类重写方法

不使用new方式定义函数的继承：

  function Person(){
    var _this = {};
    _this.echo = function(){
      alert("Person");
    }
    return _this;
  }

  function Student(){
    var _this = Person();
    return _this;
  }

  var s = Student();
  s.echo();

不使用new方式定义函数的重写：

  function Person(){
    var _this = {};
    _this.echo = function(){
      alert("Person");
    }
    return _this;
  }

  function Student(){
    var _this = Person();
    _this.echo = function(){ //重写方法
      alert("Student");
    }
    return _this;
  }

  var s = Student();
  s.echo();

封装

  (
    function(){
    var name = "abc";
    var age = 30;
    }()
  );

内置对象

字符串String

参考文档：JavaScript String 对象

和Java大致相似。

定义与索引：

  /*静态定义*/
  var str1 = "111"; //双引号
  var str2 = '222'; //单引号，有冲突必须使用单引号
  /*动态定义*/
  var str3 = new String();
  var str4 = new String("444");
  /*索引*/
  document.write(str1[0]);

常用属性与方法：

  str = "123,456,789";

  /*常用属性*/
  document.write(str.length); //长度

  /*常用方法*/
  document.write(str.charAt(0)); //索引，同Java。但是多了一个通过数组方式索引的方式str[0]
  document.write(str.indexOf("1")); //模式匹配(查找子串)，成功：返回索引，失败：返回-1
  document.write(str.match("1")); //模式匹配(查找子串)，成功：返回参数值，失败：返回null
  document.write(str.replace("1","2")); //字符串替换，将参数1替换为参数2，只替换模式匹配结果中的第一个
  document.write(str.toUpperCase()); //小写变大写
  document.write(str.toLowerCase()); //大写变小写
  document.write(str.concat("1", "2")); //字符串拼接
  var split = str.split(","); //以参数为分隔符，返回分割结果，列表形式

日期Date

参考文档：JavaScript Date 对象

定义：

  var dt = new Date();
  document.write(dt);

代码结果：
常用方法：

数组Array

参考文档：JavaScript Array 对象

  /*定义*/
  var arr1 = [1, 2.5, "3"];
  var arr2 = [5, 6, 7];
  
  /*索引*/
  document.write(arr1[0]);
  
  /*常用属性*/
  document.write(arr1.length); //长度
  
  /*常用方法*/
  arr1.sort(); //排序 按照字母顺序 如果需要按数值大小需要接收参数函数
  arr1.push("4"); //结尾添加元素 或可用arr1[arr1.length] = 4
  arr1.reverse(); //翻转
  arr1.concat(arr2); //拼接

数学Math(静态类)

参考文档：JavaScript Math 对象

方法简介：

  var a1 = Math.random(); //随机数 从0-1
  var a2 = Math.max(1, 2, 3); //最大值
  var a3 = Math.round(1.5); //取整四舍五入 向上有ceil() 向下有floor()
  var a4 = Math.abs(-1); //绝对值

在这里插入图片描述

浏览器对象BOM

Window对象

参考文档：JS window对象详解

指当前的浏览器窗口，BOM的核心。

所有JS全局对象函数和变量都是window对象的成员。

document也是window的属性：

  document.write("1"); //省略window
  window.document.write("1"); //实际上

获取长宽：

  var h1 = window.height;
  var h2 = window.innerHeight;
  var h3 = window.outerHeight;

打开关闭页面：

  window.open("http://www.baidu.com"); //打开新页面
  window.open("http://www.baidu.com", "window_name", "height = 200, width = 200") //url，名称，样式
  window.close(); //关闭当前页面

计时器

在设定的时间间隔后实现代码。
可以用来使代码一直执行(间隔执行)、延迟代码执行(延迟执行)等。

间隔执行：setInterval()：

<h1 id="h1"></h1>

<script>
  function f(){
    var d = new Date(); //日期
    var s = d.toLocaleTimeString(); //字符串
    document.getElementById("h1").innerHTML = s; //更改HTML内容
  }
  var time = setInterval(f, 1000); //每间隔1000ms,执行一次函数f
</script>

代码结果：每间隔1000ms执行一次输出时间。

停止：clearInterval()：

  clearInterval(time); //参数是之前定义setInterval的变量

延迟执行：setTimeout()

  var delay = setTimeout(f, 3000); //延迟3000ms,执行一次函数f

停止：clearTimeout()

  clearTimeout(delay); //清除延迟

例：设置一个每3秒调用一次自己的函数

<script>
  function myalert(){
    alert("!");
    win = setTimeout(function () {
      myalert();
    }, 3000);
  }
  myalert();
</script>

history对象

windows.history对象，包含浏览器历史url的集合。

跳转：

  history.go(1); //前进一个页面
  history.go(-1); //后退一个页面

跳转：后退一个界面：

  history.back();

跳转：前进一个界面：

  history.forward();

测试：

I. index.html

  <a href="index2.html">链接</a>
  <button onclick="goForward()">按钮</button>

  <script>
    function goForward() {
      history.forward(); //前进到下一个页面
    }
  </script>

II. index2.html

  <button id="b1" onclick="goBack()">按钮</button>

  <script>
    function goBack() {
      history.back(); //回退到上一个界面
    }
  </script>

index通过链接跳转到index2，index2通过按钮退回到index，index通过按钮前进到index2。

location对象

windows.location对象，获取当前页面的url，也可以将浏览器重定向到新的页面。

  var name = location.hostname; //web主机域名
  var path = location.pathname; //web的路径和文件名
  var port = location.port; //web主机端口
  var prot = location.protocol; //web协议
  var href = location.href; //返回url
  location.assign("index2.html"); //加载其他文档
  //可以写为window.location
  //window可省略

screen对象

windows.screen对象，包含用户屏幕的信息。做屏幕适配常用。

  var height = screen.height; //宽高
  var width = screen.width;
  var aheight = screen.availHeight; //可用宽高
  var awidth = screen.availWidth;

大熊软糖M

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
『前端学习笔记』 JavaScript 事件与对象、DOM与BOM

参考：【极客学院】Web前端开发教学 - 第一部分：H5+CSS+JS参考：JavaScript 参考手册-W3school文章目录常用事件用法DOM对象HTML DOM操作HTML操作CSSEventListener事件详解事件流事件处理HTML级DOM0级DOM2级IE级事件对象对象定义对象内置对象字符串String日期Date数组Array数学Math(静态类)浏览器对象Window对象计时器history对象location对象screen对象常用事件事件描述onCl
复制链接

扫一扫