javaScriptWebAPI-03

  1 DOCTYPE html>
  2 html lang="en">
  3 head>
  4     meta charset="UTF-8">
  5     title >javaScriptAPI04title>
  6 head>
  7 body >
  8     div>一对一div>
  9     div>二对二div>
 10     div id="cs3">三对三div>
 11     div>四对四div>
 12     div>五对五div>
 13     div id="dv">
 14         p>Pp>
 15         ul id="uu">
 16             li>1li>
 17             li>2li>
 18             li>3li>
 19             a href="javascript:void(0)";>123123a>
 20         ul>
 21         span>Spanspan>
 22     div>
 23 
 24     ul id="ul01">
 25         
 26     ul>
 27     script >
 28 
 29         // DOM 文档树
 30 
 31         // 在DOM树种,所有数据都是节点,HTML是一个根节点,每个元素是一个元素节点,每个属性是一个属性节点,每个文本是一个文本节点
 32 
 33         // 其中,节点有三个属性
 34         // nodeType:其中,节点nodeType的值1,表示当前节点是一个标签节点,值为2,表示为属性节点,值为3表示为文本节点
 35         // nodeName:如果值为大写的,则是标签的名字,如果值为小写的,则是属性的名字,如果是#text,则为文本节点
 36         // nodeValue:标签节点的值为Null,属性节点的值为属性,文本节点的值为文本
 37 
 38         // 父子节点只有标签可以作为
 39         
 40 
 41 
 42         // firstElementChild 在IE8 和 IE9 和 safari 浏览器下回存在兼容问题,解决:
 43         // firstElementChild 在IE8 和 IE9 和 safari 浏览器下回存在兼容问题,解决:
 44         // firstElementChild 在IE8 和 IE9 和 safari 浏览器下回存在兼容问题,解决:
 45 
 46             function getfirstElementChild(Element){
 47              var node, nodes = Element.childNodes, i = 0;
 48                     while (node = nodes[i++]) {
 49                         if (node.nodeType === 1) {
 50                             return node;
 51                         }
 52                     }
 53                     return null;
 54                 }
 55 
 56         //运用,比如说获取id为dv下面的第一个li元素
 57 
 58         var dv = document.getElementById("dv");
 59 
 60         var dv01 = getfirstElementChild(dv);
 61         console.dir(dv01);
 62 
 63 
 64         var uu = document.getElementById("uu");
 65         // console.log(uu);
 66         //-------------------------
 67 
 68         // 当前节点的父节点
 69 
 70         console.log(uu.parentNode);
 71 
 72         //当前节点的父元素
 73 
 74         console.log(uu.parentElement);
 75 
 76         //获取当前节点的子节点,多个,可便利
 77 
 78         console.log(uu.childNodes);
 79 
 80         //获取当前节点的子元素,可便利
 81 
 82         console.log(uu.children);
 83 
 84         //获取当前节点的第一个子节点:
 85 
 86         console.log(uu.firstChild);
 87 
 88         //获取当前节点的第一个子元素:
 89 
 90         console.log(uu.firstElementChild);
 91 
 92         //获取当前节点最后一个子节点:
 93 
 94         console.log(uu.lastChild);
 95 
 96         // 获取当前节点最后一个子元素
 97 
 98         console.log(uu.lastElementChild);
 99 
100         //获取某一个节点的前一个节点
101 
102         var cs3 = document.getElementById("cs3");
103 
104         console.log(cs3.previousSibling);
105 
106         //获取某一元素的前一个元素节点
107 
108         console.log(cs3.previousElementSibling);
109 
110         //获取摸一个元素的后一个节点
111 
112         console.log(cs3.nextSibling);
113 
114         //获取摸一个元素的后一个元素节点
115 
116         console.log(cs3.nextElementSibling);
117         //-----------------------------------------------------------
118 
119         //获取当前节点的属性,打印nodeType.nodeName.nodeValue;
120 
121         var node = uu.getAttributeNode("id");
122         console.log(node.nodeType,node.nodeName,node.nodeValue);
123         
124 
125         //动态创建元素
126 
127         document.write();//回覆盖掉页面之前的内容
128         // element.innerHTML;
129         // document.createElement();
130 
131 
132         var cc = document.createElement("p");
133 
134         cs3.appendChild(cc);//apendchild 追加子元素的意思,嵌套到父亲下面;
135 
136 
137         //通过document.createElement创建li,并且添加到ul里面
138 
139         var datas = ["A","B","C","D"];
140 
141         var ul01 = document.getElementById("ul01");
142 
143 
144         var fn = function() {
145             console.log(123);
146             for(var i = 0;iul01.children.length;i++) {
147                 ul01.children[i].style.backgroundColor = "white";
148                 
149             }
150             this.style.backgroundColor = "pink";
151         }
152 
153 
154 
155         //根据datas数组给ul01添加li,并添加鼠标悬浮高亮显示.
156         for(var i = 0;idatas.length;i++) {
157             var li = document.createElement("li");
158 
159             ul01.appendChild(li);
160             li.innerText = datas[i];
161 
162             li.onmousemove = fn;
163         }
164 
165 
166         //删除子元素removeChild()//删除子元素
167 
168         // xx.removeChild("li");
169     script>
170 body>
171 html>