JS笔记—03（DOM编程）

标签：超链接   append   attr   原理   eva   app   value   解决方法   parent   

1. 动态体现：HTML代码加载到浏览器，代码运行后改变文档(DOM树)增删改查节点。
例如：ajax（不是新技术，是几个技术的合体js+http后台操作）就是这样的原理

2.js对象(浏览器对象、脚本对象、HTML对象)

3.添加文本方法
 a.第一种创建文本节点
 创建元素节点：createElement()
 创建文本节点：createTextNode()：也可以加空格用
 添加节点用appendChild();
 得值用：innerHTML
 b.第二种直接赋值
 innerHTML=""：直接赋值
 得值用：NodeValue

4.给元素对象设置属性
 a.第一种方法
 object.属性=""
 b.第二种方法
 setAttribute("属性", "值")；
5.设置链接属性
 .href="";
 .onclick = function() {}
 this.代表当前对象，parentNode:父节点
6.加空格
 opra.innerHTML="更新&nbsp  = "#" onclick=‘dela(this)‘>删除

7.元素a.innerHTML会重写元素标记内容（覆盖）
要显示则用a.innerHTML+="html代码";

8.三大重点元素:document. element. node

9最后一个省市联动：IE和火狐不兼容，建议使用document.createElement();方法，
而不使用new Option();因为代码会冗余。

二、代码中遇到的问题：

第一个例子：给节点赋值时，底层用文本节点：var txtNode = createTextNode()

   也可以：父节点.innerHTML直接赋值
从节点取值时，用innerHTML直接取值，
   也可以：txtNode.nodeValue直接取值；

第二个例子：ul列表输出 nodeType.nodeName.nodeValue

 特注：++++++老师说当nodeType=1时是类型，=2时是名字，=3时是值++++。
 a. 可以用for(var i = 0;i  b. 也可以用for(x in arr) {
   if(x >= 0) {
    arr[x].nodeType

     }
    }

第三个例子：给div标签里添加超链接
注意使用innerHTML直接给div赋值时会发生超链接标签覆盖HTML内容的问题
解决方法：mydiv.innerHTML += "超链接代码";
 有三个方法加:
 a.innerHTML直接赋值div标签
 b.创建a标签，设置属性，设置内容，再依次添加div标签
 c.创建a标签，创建文本节点，设置属性，再依次添加
标注：++++++老师说的是用appendChild():必须加的是对象而不是文本++++。

details：详情
estimate/evaluate：评价

第四个例子：变幻面板：点击链接，改变下边的面板的内容(用div来操控)

 div属性：style = "display:none/block"
 none:不显示div内容
 block:显示div的
 注+++如果是超链接，则不能用window.onload = function() {}
 因为按钮是只点击一次，而超链接要多次变幻。

第五个例子：省市联动

标签事件onchange():事件会在域的内容改变时发生。
清空列表：length = 1;(只有一个请选择)

JS笔记—03（DOM编程）

标签：超链接   append   attr   原理   eva   app   value   解决方法   parent   

原文地址：http://www.cnblogs.com/StephenChowcai/p/7291211.html