JS笔记—03（DOM编程）

Posted 2020-10-01 StephenChowcai

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;(只有一个请选择)