JS DOM对象控制HTML元素详解

最新推荐文章于 2025-11-30 22:19:10 发布

原创最新推荐文章于 2025-11-30 22:19:10 发布 · 20 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端 #开发语言 #ecmascript

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>