JavaScript学习笔记（四)

最新推荐文章于 2024-07-29 11:53:27 发布

Shavwv

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量55

点赞数

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

本文链接：https://blog.csdn.net/weixin_43894527/article/details/114680262

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

JavaScript学习笔记（四)

DOM相关部分
仅为个人学习记录所用，学习内容为菜鸟联盟JavaScript

JavaScript HTML DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM (文档对象模型)

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树
- HTML DOM树
- 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
  - JavaScript 能够改变页面中的所有 HTML 元素
  - JavaScript 能够改变页面中的所有 HTML 属性
  - JavaScript 能够改变页面中的所有 CSS 样式
  - JavaScript 能够对页面中的所有事件做出反应

查找HTML元素

通过 JavaScript操作 HTML 元素。
首先找到该元素。有三种方法来做这件事：
- 通过 id 找到 HTML 元素
  - 查找 id=“intro” 元素
    - var x=document.getElementById("intro");
  - 如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
  - 如果未找到该元素，则 x 将包含 null。
- 通过标签名找到 HTML 元素
  - 查找 id=“main” 的元素，然后查找 id=“main” 元素中的所有
    元素
    - var x=document.getElementById("main");
    - var y=x.getElementsByTagName("p");
- 通过类名找到 HTML 元素
  - 查找 class=“intro” 的元素
    - var x=document.getElementsByClassName("intro");

如何改变 HTML 元素的内容 (innerHTML)

document.getElementById(*id*).innerHTML=*新的 HTML*

如何改变 HTML 元素的样式 (CSS)

document.getElementById(*id*).style.*property*=*新样式*

如何对 HTML DOM 事件做出反应

onload 和 onunload 事件
onchange 事件
onmouseover 和 onmouseout 事件
onmousedown、onmouseup 以及 onclick 事件

JavaScript HTML DOM EventListener

addEventListener() 方法

addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
可以向一个元素添加多个事件句柄。
可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件。
可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。
可以使用 removeEventListener() 方法来移除事件的监听。

语法

第一个参数是事件的类型 (如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

向原元素添加事件句柄

  当用户点击元素时弹出 "Hello World!" :
  
  element.addEventListener("click", myFunction);
  
  function myFunction() {
      alert ("Hello World!");
  }

向同一个元素中添加多个事件句柄

addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件

可以向同个元素添加不同类型的事件

  element.addEventListener("click", myFunction);
  element.addEventListener("click", mySecondFunction);
  
  element.addEventListener("mouseover", myFunction);
  element.addEventListener("click", mySecondFunction);
  element.addEventListener("mouseout", myThirdFunction);

向 Window 对象添加事件句柄

当用户重置窗口大小时添加事件监听

  window.addEventListener("resize", function(){
      document.getElementById("demo").innerHTML = sometext;
  });

传递参数

当传递参数值时，使用"匿名函数"调用带参数的函数
- *element*.addEventListener("click", function(){ myFunction(p1, p2); });

事件冒泡/事件捕获

事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。如果你将
元素插入到

元素中，用户点击
元素, 哪个元素的 “click” 事件先被触发呢？
在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：
元素的点击事件先触发，然后会触发

元素的点击事件。
在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：
元素的点击事件先触发，然后再触发
元素的点击事件。
addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型：
- addEventListener(event, function, useCapture);
- 默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
document.getElementById("myDiv").addEventListener("click", myFunction, true);

removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄
- element.removeEventListener(“mousemove”, myFunction);

JavaScript HTML DOM 元素 (节点)

创建新的 HTML 元素 (节点) - appendChild()

用于添加新元素到尾部

  //以下代码是用于创建 <p> 元素:
  
  var para = document.createElement("p");
  为 <p> 元素创建一个新的文本节点：
  
  var node = document.createTextNode("这是一个新的段落。");
  //将文本节点添加到 <p> 元素中：
  
  para.appendChild(node);
  //最后，在一个已存在的元素中添加 p 元素。
  
  //查找已存在的元素：
  
  var element = document.getElementById("div1");
  //添加到已存在的元素中:
  
  element.appendChild(para);

创建新的 HTML 元素 (节点) - insertBefore()

将新元素添加到开始位置

  <div id="div1">
  <p id="p1">这是一个段落。</p>
  <p id="p2">这是另外一个段落。</p>
  </div>
   
  <script>
  var para = document.createElement("p");
  var node = document.createTextNode("这是一个新的段落。");
  para.appendChild(node);
   
  var element = document.getElementById("div1");
  var child = document.getElementById("p1");
  element.insertBefore(para, child);
  </script>

移除已存在的元素

要移除一个元素，需要知道该元素的父元素

  //HTML 文档中 <div> 元素包含两个子节点 (两个 <p> 元素):
  
  <div id="div1">
  <p id="p1">这是一个段落。</p>
  <p id="p2">这是另外一个段落。</p>
  </div>
  //查找 id="div1" 的元素:
  
  var parent = document.getElementById("div1");
  //查找 id="p1" 的 <p> 元素:
  
  var child = document.getElementById("p1");
  //从父元素中移除子节点：
  
  parent.removeChild(child);
  
  //以下代码是已知要查找的子元素，然后查找其父元素，再删除这个子元素（删除节点必须知道父节点）：
  
  var child = document.getElementById("p1");
  child.parentNode.removeChild(child);

替换 HTML 元素 - replaceChild()

  <div id="div1">
  <p id="p1">这是一个段落。</p>
  <p id="p2">这是另外一个段落。</p>
  </div>
   
  <script>
  var para = document.createElement("p");
  var node = document.createTextNode("这是一个新的段落。");
  para.appendChild(node);
   
  var parent = document.getElementById("div1");
  var child = document.getElementById("p1");
  parent.replaceChild(para, child);
  </script>

JavaScript HTML DOM 集合(Collection)

HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象。
HTMLCollection 对象类似包含 HTML 元素的一个数组

HTMLCollection 对象 length 属性

HTMLCollection 对象的 length 属性定义了集合中元素的数量

  var myCollection = document.getElementsByTagName("p");
  document.getElementById("demo").innerHTML = myCollection.length;

  //获取 <p> 元素的集合：
  
  var myCollection = document.getElementsByTagName("p");
  //显示集合元素个数：
  
  document.getElementById("demo").innerHTML = myCollection.length;
  //集合 length 属性常用于遍历集合中的元素。

  //修改所有 <p> 元素的背景颜色:
  
  var myCollection = document.getElementsByTagName("p");
  var i;
  for (i = 0; i < myCollection.length; i++) {
      myCollection[i].style.backgroundColor = "red";
  }

HTMLCollection 不是一个数组！

JavaScript HTML DOM 节点列表

NodeList 对象是一个从文档中获取的节点列表 (集合) 。
所有浏览器的 childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

NodeList 对象 length 属性

NodeList 对象 length 属性定义了节点列表中元素的数量。

  var myNodelist = document.querySelectorAll("p");
  document.getElementById("demo").innerHTML = myNodelist.length;

  //获取 <p> 元素的集合：
  
  var myNodelist = document.querySelectorAll("p");
  //显示节点列表的元素个数：
  
  document.getElementById("demo").innerHTML = myNodelist.length;
  //length 属性常用于遍历节点列表。
  //修改节点列表中所有 <p> 元素的背景颜色:
  
  var myNodelist = document.querySelectorAll("p");
  var i;
  for (i = 0; i < myNodelist.length; i++) {
      myNodelist[i].style.backgroundColor = "red";
  }

HTMLCollection 与 NodeList 的区别

HTMLCollection 是 HTML 元素的集合。
NodeList 是一个文档节点的集合。
NodeList 与 HTMLCollection 相同之处。
- NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素。
- NodeList 与 HTMLCollection 都有 length 属性。
不同之处
- HTMLCollection 元素可以通过 name，id 或索引来获取。
- NodeList 只能通过索引来获取。
  mldom-collections.html) 是 HTML 元素的集合。
NodeList 是一个文档节点的集合。
NodeList 与 HTMLCollection 相同之处。
- NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素。
- NodeList 与 HTMLCollection 都有 length 属性。
不同之处
- HTMLCollection 元素可以通过 name，id 或索引来获取。
- NodeList 只能通过索引来获取。
- 只有 NodeList 对象有包含属性节点和文本节点。

Shavwv

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记（四)

JavaScript学习笔记（四)DOM相关部分仅为个人学习记录所用，学习内容为菜鸟联盟JavaScriptJavaScript HTML DOM通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。HTML DOM (文档对象模型)当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树HTML DOM树通过可编程的对象模型，JavaScript 获得了足够的能力来创
复制链接

扫一扫

专栏目录