笔记--九期

1）DOM动态创建元素  

　　1  document.write();  //只能在页面加载中动态创建  

　　2  document.createElement();  //创建具有指定标签的dom对象；然后appendChild();添加到相应的元素下。         document.body.appendChild(a1);  

　　3  document.innerHTML();

2）获取表单元素  

　　1  innerText;  innerHTML ;  

　　2  value获取所有<textarea><select> 表单元素的值;   

　　3  关于<是否编码；若编码&lt代替，则显示就是原样，否则就有特殊意义。  

　　4  小试身手：动态增加网站列表        

　　　　var div = { "百度": "baidu.com", "新浪": "sina.com", "人人": "facebook.com" };        

　　　　function f1() {            

　　　　var tb1 = document.getElementById("tab1");            

　　　　for (var d in div) {                

　　　　var tr1 = document.createElement("tr");                    

　　　　var td1 = document.createElement("td");                

　　　　td1.innerHTML = "<a href='" + div[d] + "'>" + d + "</a>";                

　　　　tr1.appendChild(td1);   //附加                

　　　　tb1.appendChild(tr1);    //附加            }        }  

　　5 关于无刷新评论：var tr=table.insertRow(-1) ; var cell=tr.insertCell(-1);  注意返回的值对象；firefox必须加-1；
3）关于事件冒泡；先执行子元素，在执行外面的元素的事件。

4）关于修改样式  

　　1  在js中通过对象的className属性来修改类样式。  

　　2  修改样式的某一个属性则用，style属性。 tb1.style.backgroundColor = "red";  

　　3  小试身手：制作评分控件，之前及自身全部变色，之后不变。  

　　　　//思路：遍历所有td,监听点击事件，用tds和this获得下标，然后两个for循环，进行变色处理；        

　　　　function index(t, tds) {            

　　　　var num = -1;   //默认返回值是-1            

　　　　for (var i = 0; i < tds.length; i++) {                

　　　　if (t == tds[i]) {                    

　　　　num = i;  //修改值                    

　　　　break;   //记住只要满足条件立即跳出循环               }            }          

　　　　 return num;  //不管结果怎么我都有返回值        }

5）  关于获得光标和失去光标；  

　　1 例如变色处理，这是两个相反的过程，及要遍历对象数组，对每个对象都要进行这两个事件的检查工作；所以不同担心会重复。  

　　2  当然也可以用this在数组遍历时进行判断，若是当前对象，怎么样处理；若不是，有怎么样处理。

6）控制层的显示和隐藏 

　　1           

　　　　function f(chk) {            

　　　　if (chk.checked) {                

　　　　div1.style.display = "";   //显示            

　　　　} else {                

　　　　div1.style.display = "none";   //隐藏            }        }  

　　2  小试身手：div颜色层跟随鼠标移动而移动        

　　　　function ff() {            

　　　　var as = document.getElementsByTagName("a");          

　　　　 for (var i = 0; i < as.length; i++) {    //循环遍历                

　　　　as[i].onmouseover = function () {   //注册事件                  

　　　　 var div1 = document.getElementById("div1");                        

　　　　div1.style.position = "absolute";    //绝对位置                    

　　　　div1.style.top = event.clientY;    //设置位置                    

　　　　div1.style.left = event.clientX;                    

　　　　div1.style.display = "";   //变为显示                };                 }        }