一、document对象概述
在 Web 页面中，document 对象代表了整个 HTML 文档。通过它可以获得文档的根元素、文档的头部信息以及文档中的所有 HTML 元素。它是 JavaScript 语言访问和操作页面元素的主要方式。
例如，我们可以通过 document.getElementById('id') 方法获取文档中特定 ID 的 HTML 元素，并且可以使用 document.createElement('tagName') 方法在文档中创建新的 HTML 元素。此外，document 对象还提供了许多其他有用的属性和方法，如获取文档的 URL、title、cookie 等。
二、获取页面元素
通过 document 对象的各种方法，我们可以获取文档中的任何 HTML 元素，并且可以通过元素的属性和方法来获取和修改元素的内容、属性等。下面介绍一些常用的方法：
1. getElementById
constelement=document.getElementById('example-id');
console.log(element.innerHTML);//获取该元素的HTML内容
element.innerHTML='Newcontent';//修改该元素的HTML内容
该方法通过 HTML 元素的 ID 获取元素对象。
2. getElementsByTagName
constelements=document.getElementsByTagName('p');
for(leti=0;i<elements.length;i++){
console.log(elements[i].innerHTML);//获取所有<p>元素的HTML内容
}
该方法通过 HTML 标签名称获取元素对象列表。
3. getElementsByClassName
constelements=document.getElementsByClassName('example-class');
for(leti=0;i<elements.length;i++){
console.log(elements[i].innerHTML);//获取所有该类别的元素的HTML内容
}
该方法通过 HTML class 名称获取元素对象列表。
三、创建页面元素
在 JavaScript 中，我们可以通过 document.createElement('tagName') 方法来创建新的 HTML 元素，并将其添加到文档中。
constnewElement=document.createElement('p');
newElement.innerHTML='Newelement';//设置新元素的HTML内容
document.body.appendChild(newElement);//在body元素中添加新元素
这里我们首先创建一个新的 <p> 元素，然后使用 innerHTML 属性设置新元素的内容，最后使用 appendChild 方法将新元素添加到页面中。
四、修改页面元素
通过 document 对象获取元素对象后，我们可以使用元素的属性和方法来修改元素的内容、属性等。
1. innerHTML
constelement=document.getElementById('example-id');
element.innerHTML='Newcontent';//修改该元素的HTML内容
innerHTML 属性用于获取或设置元素的 HTML 内容。
2. value
constinputElement=document.getElementById('example-input');
console.log(inputElement.value);//获取输入框的值
inputElement.value='Newvalue';//修改输入框的值
value 属性用于获取或设置输入框的值。
五、其它常用属性和方法
1. document.URL
该属性用于获取当前文档的 URL：
console.log(document.URL);//输出当前文档的URL
2. document.title
该属性用于获取或设置当前文档的标题：
console.log(document.title);//输出当前文档的标题 document.title='Newtitle';//修改当前文档的标题
3. document.cookie
该属性用于获取或设置当前文档的 cookie：
console.log(document.cookie);//输出当前文档的cookie document.cookie='name=value';//设置当前文档的cookie
4. document.write
该方法用于将给定的字符串写入文档：
document.write('Hello,world!');//将字符串写入文档
注意：该方法不推荐使用，因为它会覆盖文档的内容。
结语
JavaScript 的 document 对象是访问和操作 HTML 页面元素的重要方式。我们可以使用各种方法获取和修改页面元素的内容、属性等。在使用时要注意保持页面的结构和语义，使页面更易于维护和扩展。
原创文章，作者：DCXIA，如若转载，请注明出处：https://www.506064.com/n/372112.html
微信扫一扫 
支付宝扫一扫 