DOM对象控制HTML元素的方法有:
getElementsByName()--获取name
getElementsByTagName()--获取元素
getAttribute()---获取元素属性
setAttribute()---设置元素属性
childNodes()---访问子节点
parentNode()---访问父节点 (父节点只有一个)
createElement()---创建元素节点
createTextNode()---创建文本节点
insertBefore()---插入节点
removeChild()---删除节点
offsetHeight---网页尺寸
scrollHeight---网页尺寸(含有滚动条)
以下为给种方法测试代码:
</head>
<body> <p name="pn">hello</p> <p name="pn">hello</p> <p name="pn">hello</p> <p name="pn">hello</p> <a id="aid" title="得到了a元素的属性">hello</a><br/> <a id="aid2">aid</a> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <div id="div"> <p id="pid">div的p元素</p> </div> <script> //获取name,修改html标签里的内容 function getName(){ var count=document.getElementsByTagName("p"); alert(count.length); var p=count[2]; p.innerHTML="world"; } //getName(); //获取元素属性 function getAttr(){ var anode=document.getElementById("aid"); var attr=anode.getAttribute("title"); alert(attr); } //getAttr(); //设置属性 function setAttr(){ var anode=document.getElementById("aid2"); anode.setAttribute("title","动态设置a的属性"); var attr=anode.getAttribute("title"); alert(attr); } //setAttr(); //访问子节点 function getChildNode(){ var childnode=document.getElementsByTagName("ul")[0].childNodes; alert(childnode.length); alert(childnode[0].nodeType); } //getChildNode(); //访问父节点 function getParentNode(){ var div=document.getElementById("pid"); alert(div.parentNode.nodeName); } //getParentNode(); //创建节点 function createNode(){ var body=document.body; var input=document.createElement("input"); input.type="button"; input.value="按钮"; body.appendChild(input); } //createNode(); //添加一个新元素 function addNode(){ var div=document.getElementById("div"); var node=document.getElementById("pid"); var newnode=document.createElement("p"); newnode.innerHTML="动态添加一个新元素"; div.insertBefore(newnode,node); } //addNode(); //删除节点 function removeNode(){ var div=document.getElementById("div"); var p=div.removeChild(div.childNodes[1]); } //removeNode(); //获得屏幕尺寸 function setSize(){ var width=document.body.offsetWidth||document.docunmentElement.offsetWidth; var height=document.body.offsetHeight; alert(width+","+height); } setSize(); </script> </body></html>