JS笔记—03（DOM编程）

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="<a href="#" onclick='upda(this)'>更新</a>&nbsp <a href
= "#" onclick='dela(this)'>删除</a>

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 < arr.length; i++)循环
b. 也可以用for(x in arr) {
if(x >= 0) {
arr[x].nodeType

}
}

第三个例子：给div标签里添加超链接
注意使用innerHTML直接给div赋值时会发生超链接标签覆盖HTML内容的问题
解决方法：mydiv.innerHTML += "超链接代码";
有三个方法加<a href>:
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() {}
因为按钮是只点击一次，而超链接要多次变幻。

第五个例子：省市联动

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

巴特西

JS笔记—03（DOM编程）

最新文章

热门文章