<p name='pn'>xxx</p> <p name='pn'>xxx</p> <p name='pn'>xxx</p> <p name='pn'>xxx</p> <ul> <li id="liID">子节点</li> <li>子节点1</li> <li id="delete">子节点2</li>
<li>前面的子节点将被删除 节点3</li>
</ul> <a id="aid" title="a标签的title">忘记我见过</a> <script> //ByName var nameA = document.getElementsByName('pn'); document.write("<br/>通过name获取元素" + nameA); nameA[0].innerHTML = "Hello"; //ByTagName var nameB = document.getElementsByTagName('p'); document.write("<br/>通过Tagname获取元素" + nameB); nameB[1].innerHTML = "Hello"; //获取元素属性 function getAttr() { var node = document.getElementById("aid"); var attr = node.getAttribute('title'); document.write("<br/>获取元素属性:" + attr); } getAttr(); //设置元素的属性 function setAttr() { var node = document.getElementById('aid'); node.setAttribute('href', 'http://www.baidu.com'); } setAttr(); //访问子节点 function getChildNode(){ var childNode = document.getElementsByTagName('ul')[0].childNodes; document.write("<br/>"+childNode.length); //空白也算入了节点 childNode[1].innerHTML= "第一个子节点增加"; } getChildNode();
//访问父节点 function getParentNode() { var node = document.getElementById('liID'); document.write("<br/>访问父节点:" + node.parentNode.nodeName); } getParentNode(); //创建节点 function createNode() { var body = document.getElementsByTagName('body')[0]; var btn = document.createElement("input"); btn.type = 'button'; btn.value = "按钮"; document.write("<br/>"); body.appendChild(btn); } createNode(); //添加节点 function inserNode(){ var parentNode = document.getElementsByTagName('ul')[0]; var beforeNode = document.getElementById('liID'); var newNode = document.createElement('li'); newNode.innerHTML = "老子是刚加的"; parentNode.insertBefore(newNode,beforeNode); } inserNode(); //删除节点 function removeNode(){ var parentNode = document.getElementsByTagName('ul')[0]; var needMoveNode =document.getElementById('delete'); parentNode.removeChild(needMoveNode); } removeNode(); //获取元素size function getSize(){ var parentNode = document.getElementsByTagName('ul')[0]; var width = parentNode.offsetWidth; var height =parentNode.offsetHeight; document.write("<br/>width"+width+"Height"+height); } getSize();