javascript document 方法

JavaScript是一种被大量使用的脚本语言，作为Web开发者，我们需要使用它来操控HTML和CSS来制作一个交互丰富的页面，其中，document对象是我们最常用的对象之一，它可以让我们去访问并修改HTML元素。

首先我们来看看最基本的使用方法，document.getElementById()可以让我们通过id来获取HTML元素，例如：

div id="example">
    这是一个例子/div>
    script>
    const elem = document.getElementById('example');
    console.log(elem.innerText);
     // 输出 "这是一个例子"/script>
    

这里我们让JavaScript获取到了id为example的div元素，并且使用了innerText属性来获取元素里的文本，这非常方便。除了getElementById()，还有其他很多类似的方法，如getElementsByTagName()可以获取一组指定标签名的元素，下面是一个例子：

ul id="list">
    li>
    第一条/li>
    li>
    第二条/li>
    li>
    第三条/li>
    /ul>
    script>
    const elems = document.getElementsByTagName('li');
    for (let i = 0;
     i  elems.length;
 i++) {
    console.log(elems[i].innerText);
}
    /script>
    

这里我们使用了getElementsByTagName()，把HTML元素li全部取出来并打印出了它们的innerText。

除了上面提到的方法，还有很多其他的document方法，如getElementByClassName()可以获取一组指定类名的元素，querySelector()可以让我们使用CSS选择器来获取元素，以及一些能够访问和修改元素样式、属性、内容等方面的方法。

除了取出元素，document还可以创建新的元素和节点，如createElement()可以创建一个新的元素，例如：

div id="example">
    /div>
    script>
    const elem = document.createElement('p');
    elem.innerText = '这是一个段落';
    document.getElementById('example').appendChild(elem);
    /script>
    

这里我们通过createElement()方法创建了一个新的p元素，并且通过appendChild()把它添加到了id为example的div元素中。这种方法非常实用，可以让我们快速地动态地创建页面元素。

document还有很多其他的方法，如：createTextNode()可以创建一个新的文本节点，getAttribute()可以获取元素的属性值，dataset属性可以让我们获取和修改自定义的data-属性，还有很多其他的方法，可以根据需要来使用。

总的来说，document对象是非常强大和灵活的，我们可以使用它来访问和修改页面上的所有元素和内容，这对于实现交互性强而又复杂的页面非常重要。在使用document方法时，我们需要注意性能和页面渲染效果，避免做出一些过多或过于频繁的操作。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！