文章目录
document 对象
document 对象是 JavaScript 中代表整个 HTML 文档的对象,它提供了访问和操作页面内容的方法和属性。
访问元素:
在 JavaScript 中您可以使用 getElementById()、getElementsByClassName()、getElementsByTagName() 等方法可以获取页面中的元素。
getElementById()
getElementById() 方法通过元素的 ID 属性返回对拥有指定 ID 的第一个对象的引用。
示例:var element = document.getElementById('myElement');
getElementsByClassName():
getElementsByClassName() 方法返回文档中所有指定类名的元素的集合。
示例:var elements = document.getElementsByClassName('myClass');
getElementsByTagName():
getElementsByTagName() 方法返回指定标签名的元素的集合。
示例:var elements = document.getElementsByTagName('div');
这些方法都返回元素的集合,因此如果您知道页面上有多个符合条件的元素,您可能需要遍历集合来处理每个元素。
例如:
javascript
// 获取所有 class 为 "myClass" 的元素并改变它们的文本内容
var elements = document.getElementsByClassName('myClass');
for (var i = 0; i < elements.length; i++) {
elements[i].textContent = '新内容';
}
请注意,getElementById() 返回的是单个元素而不是集合,因此您可以直接操作返回的元素而无需使用循环。
修改内容:
在 JavaScript 中,您可以使用 innerHTML 和 textContent 属性来修改元素的内容
innerHTML:
innerHTML 属性可以用来获取或设置 HTML 元素的内部 HTML 内容。
将新的 HTML 内容赋给 innerHTML 时,元素的内部 HTML 内容会被替换为新的内容。
示例:
document.getElementById('myElement').innerHTML = '<strong>新内容</strong>';
textContent:
textContent 属性用来获取或设置 HTML 元素的文本内容。
与 innerHTML 不同,textContent 只处理元素的纯文本内容,不会解释其中的 HTML 标签。
示例:
document.getElementById('myElement').textContent = '新文本内容';
这两个属性都提供了一种在 JavaScript 中修改页面元素内容的方式。通常情况下,如果您只需要修改元素的文本内容,建议使用 textContent 属性,因为它更加安全,可以避免对 HTML 结构造成意外破坏。而如果您需要操作包含 HTML 标记的内容,那么 innerHTML 则是更合适的选择。
创建新元素:
createElement()
当您需要在 JavaScript 中动态创建新的 HTML 元素并将其添加到页面中时,可以使用 createElement() 方法创建新元素
// 创建一个新的 <p> 元素
var newParagraph = document.createElement('p');
appendChild()
appendChild() 方法将其添加到指定的父元素中
// 创建一个新的 <p> 元素
var newParagraph = document.createElement('p');
// 创建文本节点
var textNode = document.createTextNode('这是一个新段落');
// 将文本节点添加到新段落元素中
newParagraph.appendChild(textNode);
// 获取要添加新元素的父元素
var parentElement = document.getElementById('parentElement');
// 将新元素添加到父元素中
parentElement.appendChild(newParagraph);
事件处理:
addEventListener()
当您想要在文档上注册事件处理程序时,可以使用 addEventListener() 方法。这个方法可以让您为特定的事件类型(比如点击、鼠标悬停等)添加事件处理程序,以便在事件发生时执行相应的操作。
// 获取要添加事件处理程序的元素
var myElement1 = document.getElementById('myElement');
// 定义点击事件处理函数
function clickHandler() {
alert('您点击了该元素!');
}
// 定义鼠标悬停事件处理函数
function mouseoverHandler() {
console.log('鼠标悬停在该元素上!');
}
// 添加点击事件处理程序
myElement1.addEventListener('click', clickHandler);
// 添加鼠标悬停事件处理程序
myElement1.addEventListener('mouseover', mouseoverHandler);
//也可以用这个格式添加移出事件
myElement1.addEventListener('onmouseout', function() {
alert('您移出了该元素!');
});
通过使用 addEventListener() 方法,您可以为元素添加多个不同类型的事件处理程序,以实现各种交互效果和功能。这种方式比直接在 HTML 标记中添加事件处理程序要更加灵活和可维护。
其他属性:
document.title
这个属性用于获取或设置文档的标题。通过读取或修改 document.title 属性,您可以动态地改变页面的标题,这在很多情况下都很有用
// 获取文档的标题并输出
var documentTitle = document.title;
console.log('文档标题:', documentTitle);
document.URL
document.URL 属性返回文档的 URL(统一资源定位符)。通过这个属性,您可以获取当前文档所在的完整 URL 地址,包括协议、主机名、端口号和路径等信息。
// 获取文档的 URL 并输出
var documentURL = document.URL;
console.log('文档 URL:', documentURL);
document.body
这个属性返回文档中的 元素。通过访问 document.body 属性,您可以直接操作页面的主体内容,比如添加新元素、修改样式等。
// 获取文档的 body 元素并修改样式
var documentBody = document.body;
documentBody.style.backgroundColor = 'lightgray';