JS DOM对象控制HTML元素详解
方法：
getElementsByName() 获取name
getElementsByTagName() 获取元素
getAttribute() 获取元素属性
setAttribute() 设置元素属性
childNodes() 访问子节点
parentNode() 访问父节点
createElement() 创建元素节点
createTextNode() 创建文本节点
insertBefore() 插入节点
removeChild() 删除节点
offsetHeight() 网页尺寸
scrollHeight() 网页尺寸
?1 <!DOCTYPE html> ?2 <html> ?3 ????<head> ?4 ????????<meta charset="utf-8" /> ?5 ????????<title></title> ?6 ????</head> ?7 ????<body> ?8 ????????<p name="pn">hello</p> ?9 ????????<p name="pn">hello</p> 10 ????????<p name="pn">hello</p> 11 ????????<p name="pn">hello</p> 12 ????????<script> 13 ????????????function getName(){ 14 ????????????????//var count=document.getElementsByName("pn"); ?//获取name 15 ????????????????var count=document.getElementsByTagName("p"); ?//获取元素 16 ????????????????alert(count); 17 ????????????????alert(count.length);//拿到4个p元素 18 ????????????????var p=count[0]; 19 ????????????????p.innerHTML="World"; 20 ????????????} 21 ????????????getName(); 22 ????????</script> 23 ?????????24 ????????<a id="aid" title="得到了a标签属性">hello</a> 25 ????????<script> 26 ????????????function getAttr(){ 27 ????????????????var anode=document.getElementById("aid"); 28 ????????????????var attr=anode.getAttribute("title");//获取元素属性，可以把title换成id 29 ????????????????alert(attr); 30 ????????????} 31 ????????????getAttr(); 32 ????????</script> 33 ?34 ????????<br /> 35 ????????<a id="aid2">aid2</a> 36 ????????<script> 37 ????????????function setAttr(){ 38 ????????????????var anode=document.getElementById("aid2"); 39 ????????????????anode.setAttribute("title","动态设置a的tiltle属性");//设置元素属性 40 ????????????????var attr=anode.getAttribute("title"); 41 ????????????????alert(attr); 42 ????????????} 43 ????????????setAttr(); 44 ????????</script> 45 ?????????46 ?????????47 ????????<br> 48 ????????<ul> 49 ????????????<li>1</li> 50 ????????????<li>2</li> 51 ????????????<li>3</li> 52 ????????</ul> 53 ????????<script> 54 ????????????function getChildNode(){ 55 ????????????????var childnode=document.getElementsByTagName("ul")[0].childNodes;//访问子节点 56 ????????????????alert(childnode.length); ?//答案是7，是因为有空白项 57 ????????????????alert(childnode[1].nodeType); 58 ????????????} 59 ????????????getChildNode(); 60 ????????</script> 61 ?????????62 ????????<br /> 63 ????????<div id="div"> 64 ????????????<p id="pid">div的p元素</p> 65 ????????</div> 66 ????????<script> 67 ????????????function getParentNode(){ 68 ????????????????var div =document.getElementById("pid"); 69 ????????????????alert(div.parentNode.nodeName); ??//获取父节点 70 ????????????} 71 ????????????getParentNode(); 72 ?????????????73 ????????????function createNode(){ 74 ????????????????var body=document.body; 75 ????????????????var input=document.createElement("input"); 76 ????????????????input.type="button"; 77 ????????????????input.value="创建节点"; 78 ????????????????body.appendChild(input); 79 ????????????} 80 ????????????createNode(); 81 ?????????????82 ????????????function addNode(){ 83 ????????????????var div=document.getElementById("div"); 84 ????????????????var node=document.getElementById("pid"); 85 ????????????????var newnode=document.createElement("p"); 86 ????????????????newnode.innerHTML="动态添加一个p元素"; 87 ????????????????div.insertBefore(newnode,node);//新节点相对位置在前 88 ????????????} 89 ????????????addNode(); 90 ?????????????91 ????????????function removeNode(){ 92 ????????????????var div=document.getElementById("div"); 93 ????????????????var p=div.removeChild(div.childNodes[1]);//删除节点 94 ????????????} 95 ????????????removeNode(); 96 ?????????????97 ????????????function getSize(){ ??????????//网页尺寸 98 ????????????????var height=document.body.offsetHeight||document.documentElement.offsetHeight; 99 ????????????????var width=document.body.offsetWidth;100 ????????????????alert(width+","+height);101 ????????????}102 ????????????getSize();103 ????????</script>104 ????</body>105 </html>JS DOM对象控制HTML元素详解
原文地址：https://www.cnblogs.com/nullcodeworld/p/9311757.html