第九章JavaScript实现网页交互（下）

目录

页面元素访问与属性的设置

页面元素的引用

读写HTML对象属性

表单及控件的访问

JS设置CSS样式的设置

事件指派与处理函数的编写

事件的指派

常用的事件类型

文档对象模型

认识文档对象模型

DOM对象节点的类型

DOM对象节点的基本操作

DOM对象节点的创建与修改

---

页面元素访问与属性的设置

页面元素的引用

在 JavaScript 中，可以使用以下方式来引用页面元素：

1. 通过 ID 引用：使用 document.getElementById() 函数，传入元素的 ID 即可获取该元素的引用。例如：

   // 获取 ID 为 “myElement” 的元素
   var myElement = document.getElementById("myElement");
    
   

1. 通过类名引用：使用 document.getElementsByClassName() 函数，传入元素的类名即可获取所有具有该类名的元素的引用。例如：

   // 获取类名为 “myClass” 的所有元素
   var myElements = document.getElementsByClassName("myClass");
   
   // 获取第一个类名为 “myClass” 的元素
   var firstElement = document.getElementsByClassName("myClass")[0];
    
   

1. 通过标签名引用：使用 document.getElementsByTagName() 函数，传入元素的标签名即可获取所有具有该标签名的元素的引用。例如：

   // 获取所有 <p> 元素
   var pElements = document.getElementsByTagName("p");
   
   // 获取第一个 <p> 元素
   var firstPElement = document.getElementsByTagName("p")[0];
    
   

1. 通过选择器引用：使用 document.querySelector() 或 document.querySelectorAll() 函数，传入 CSS 选择器即可获取所有匹配该选择器的元素的引用。例如：

   // 获取 ID 为 “myElement” 并且类名为 “myClass”的元素
   var myElement = document.querySelector("#myElement.myClass");
   
   // 获取所有类名为 “myClass”的 <p> 元素
   var pElements = document.querySelectorAll("p.myClass");
    
   

   在引用页面元素时，还可以通过修改元素的属性、样式或者绑定事件来实现对元素的操作。例如：

   // 修改元素的文本内容
   myElement.textContent = "Hello World!";
   
   // 修改元素的样式
   myElement.style.backgroundColor = "red";
   
   // 绑定元素的点击事件
   myElement.onclick = function() {
     alert("Clicked!");
   };
    
   

需要注意的是，在对页面元素进行操作时，应确保它们已经被正确加载。可以在页面加载完成后再引用元素，或使用 DOMContentLoaded 事件来确保页面已经加载完毕。

读写HTML对象属性

读HTML对象属性

读取 HTML 对象属性的用法可以通过 JavaScript 中的一些对象属性来实现。以下是一些常见的读取 HTML 对象属性的方法：

1. 读取元素的文本内容：使用 textContent 属性来获取元素的文本内容。例如：

var myElement = document.getElementById("myElement");
var text = myElement.textContent;

1. 读取元素的内部 HTML：使用 innerHTML 属性来获取元素的内部 HTML 内容。例如：

var myElement = document.getElementById("myElement");
var html = myElement.innerHTML;

1. 读取元素的属性：使用 getAttribute() 方法来获取元素的属性。例如：

var myElement = document.getElementById("myElement");
var value = myElement.getAttribute("id");

1. 读取元素的样式：使用 style 属性来获取元素的样式。例如：

var myElement = document.getElementById("myElement");
var value = myElement.style.backgroundColor;

1. 读取元素的类名：使用 className 属性来获取元素的类名。例如：

var myElement = document.getElementById("myElement");
var className = myElement.className;