DOM操作:操作页面的元素(增加|删除|修改|查询)
新建一个div标签,设置改标签的样式(宽度|高度|边框),追加到body
获取元素操作
getElementById
getElementsByTagName
getElementsByClassName
元素节点操作
appendChild
insertBefore
removeChild
replaceChild
cloneNode
createElement
createTextNode(创建文本节点)
属性节点操作
getAttribute
setAttribute
removeAttribute
常用DOM属性
className
innerHTML
innerText/textContent value
children
代码示例
//0 获取页面中指定的标签,并设置其样式
var divID = document.getElementById("divId");
divID.style.backgroundColor = "pink";
divID.style.height = "40px";
divID.style.width = "200px";
//01 创建新的标签
var div = document.createElement("div");
//02 设置标签的样式
div.style.backgroundColor = "red";
div.style.height = "100px";
div.style.width = "300px";
div.style.fontSize = "20";
//03 设置标签的内容
div.innerText = "这是一个自己创建的标签";
//04 把标签插入到页面中
document.body.appendChild(div);
//05删除div
document.body.removeChild(div);
网友评论