一、DOM对象控制HTML

    1.方法：

      getElementsByName()  获取name

      getElementsByTagName()  获取元素

      getAttribute()  获取元素属性

      setAttribute()  设置元素属性

      childNodes()  访问子节点

      parentNode()  访问父节点

      createElement()  创建元素节点

      createTextNode()  创建文本节点

      insertBefore()  插入节点

      removeChild()  删除节点

      offsetHeight()  网页尺寸

      scrollHeight()  网页尺寸  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
     <head>
         <meta charset= "UTF-8" >
         <title></title>
     </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>
         <a id= "aid2" >aid2</a>
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
         </ul>
         <div id= "div" >
             <p id= "pid" >div的p元素</p>
         </div>
         <script>
             function  getName(){
                 var  count = document.getElementsByTagName( "p" );
                 alert(count.length);
                 var  p = count[0];
                 p.innerHTML =  "World" ;
             }
             
             function  getAttr(){
                 var  anode = document.getElementById( "aid" );
                 var  attr = anode.getAttribute( "title" );
                 alert(attr);
             }
             
             function  setAttr(){
                 var  anode = document.getElementById( "aid2" );
                 anode.setAttribute( "title" , "动态设置a的title属性" );
                 var  attr = anode.getAttribute( "title" );
                 alert(attr);
             }
             
             function  getChildNode(){
                 var  childnode = document.getElementsByTagName( "ul" )[0].childNodes;
                 alert(childnode.length);   
                 alert(childnode[0].nodeType);
                 alert(childnode[1].nodeType);
             }
             
             function  getParentNode(){
                 var  div = document.getElementById( "pid" );
                 alert(div.parentNode.nodeName);
             }
             
             function  createNode(){
                 var  body = document.body;
                 var  input = document.createElement( "input" );
                 input.type =  "button" ;
                 input.value =  "按钮" ;
                 body.appendChild(input);
             }
             
             function  addNode(){
                 var  div = document.getElementById( "div" );
                 var  node = document.getElementById( "pid" );
                 var  newNode = document.createElement( "p" );
                 newNode.innerHTML =  "动态添加第一个p元素" ;
                 div.insertBefore(newNode,node);
             }
             
             function  removeNode(){
                 var  div = document.getElementById( "div" );
                 var  p = div.removeChild(div.childNodes[1]);
             }
             
             function  getSize(){
                 var  width = document.body.offsetWidth||document.documentElement.offsetWidth;
                 var  height = document.body.offsetHeight||document.documentElement.offsetHeight;
                 alert(width+ "," +height);
             }
             getSize();
         </script>
     </body>
</html>