JavaScript是一种强大的脚本语言,可以用来操作HTML页面中的文本、元素、样式和事件。DOM(Document Object Model)是一种将HTML文档解析成树形结构的API(应用程序接口),使得JavaScript可以对文档中的元素进行访问和操作。本文将提供JavaScript DOM的常用操作代码汇总,为开发者提供参考和学习。
获取元素是DOM中最基本的操作之一,不同的元素可以通过其id、标签名、类名等来获取。
var element = document.getElementById("elementId");
var elements = document.getElementsByTagName("tagName");
var elements = document.getElementsByClassName("className");
对于获取到的HTML元素,可以进行一些修改操作,包括修改文本、修改样式和修改属性等。
element.innerHTML = "new text content";
element.style.color = "red";
element.style.backgroundColor = "yellow";
element.setAttribute("attributeName", "attributeValue");
var newElement = document.createElement("tagName");
parentElement.appendChild(newElement);
parentElement.removeChild(element);
var element = document.getElementById("myDiv");
element.innerHTML = "Hello, World!";
element.style.color = "red";
element.style.fontSize = "24px";
在这个示例中,我们首先通过id获取了元素myDiv,然后对其进行了两次修改操作,分别将文本内容改为了Hello, World!,将字体颜色改为了红色,字体大小改为了24px。
var parentElement = document.getElementById("myDiv");
var newElement = document.createElement("p");
newElement.innerHTML = "This is a new paragraph.";
parentElement.appendChild(newElement);
parentElement.removeChild(document.getElementById("oldElement"));
在这个示例中,我们首先获取了元素myDiv作为父元素,然后通过createElement方法创建了一个新的p元素,并将其文本内容设置为“This is a new paragraph.”,接着将新元素添加到了父元素中。最后,我们又通过removeChild方法删除了原先在myDiv中的某个元素。
本文链接:http://task.lmcjl.com/news/8380.html