首先需要了解什么是 JavaScript DOM对象
以下是一些常用的方法：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <p name="pName">one</p> <p name="pName">two</p> <p name="pName">three</p><hr> <a id="aId" title="a标签的属性"></a><hr> <ul> <li>1</li> <li>2</li> </ul><hr> <div id="divId"> <p id="pId">访问父节点</p> </div></body><script> function getName() { // getElementsByName() 获取name（全名） var pName = document.getElementsByName("pName"); alert(pName.length) // pName.length为3，pName[1]表示“two” // getElementsByTagName() 获取元素 var pTagName = document.getElementsByTagName("p"); }
function getAttr() { //getAttribute() 访问元素属性 var a = document.getElementById("aId"); var aTitle = a.getAttribute("title"); }
function setAttr() { //setAttribute() 设置元素属性 var a = document.getElementById("aId"); a.setAttribute("title","动态设置a的属性") }
function getChileNode() { // childNodes 访问子节点 var ulElement = document.getElementsByTagName("ul"); var childNode = ulElement[0].childNodes;// 找到第一个ul元素的子项 alert(childNode.length);// childNode.length = 5，原因是因为换行都被看为【空白项】。所以上面被看作<ul>【空白】<li>1</li>【空白】<li>2</li>【空白】</ul>。3个【空白项】+2个<li> = 5 }
function getParentNode() { //parentNode 获取父节点（父节点只有一个） var pId = document.getElementById("pId"); var parentNode = pId.parentNode.nodeName; // 返回 div }
function creatNode() { var body = document.body; // createElement() 创建元素节点 var input = document.createElement("input"); input.type = "button"; input.value = "按钮"; // appendChild() 末尾添加元素节点 body.appendChild(input); //######################################### var div = document.getElementById("divId"); var p = document.getElementById("pId"); var newP = document.createElement("p"); p.innerText = "新的p元素"; // insertBefore() 选择性插入节点。 // 在div中的<p id="pId">元素前插入一个新的p元素（newP） div.insertBefore(newP,p); // removeChild() 删除节点 div.removeChild(p); }
function getSize() { // offsetHeight 获取网页尺寸（不包含滚动条内） var width = document.body.offsetHeight; // scrollHeight 获取网页尺寸（包含滚动条内） var height = document.body.scrollHeight; }</script></html>原文地址：https://www.cnblogs.com/nnnlillian/p/9715369.html
时间： 2024-10-10 09:10:52