1. DOM Document Object Model(文本对象模型)
2. 节点及其类型
element node、attribute node、text node;
text node是element node的子节点;
3. JS写在什么地方
1).HTML代码和JS代码耦合在一起
缺点:不利于代码维护
<button οnclick="alert('hello..')">ClickMe</button>
2).放在html文档的最后
缺点:不符合JS代码的习惯
3).放在title标签后
缺点:为加载完文档就已经执行
应对方案:使用window.onload = funtion(){代码块}
4.获取节点
对象.getElementsByTagName();
对象.getElementById();
对象.getElementsByName();
返回对应对象下的元素
5.若HTML元素自身没有定义name属性,使用getElementsByName()对IE无效。
6.读写属性
获得元素节点,通过节点.属性直接获取属性,
通过节点.属性=属性值;实现属性的赋值。
var nameNode = document.getElementById("name");
alert(nameNode.value);
nameNode.value="你好";
7.获取元素节点的所有子节点
1).获取元素节点。
2).利用元素节点的childNodes方法获取子节点
var cityNode = document.getElementById("city");
alert(cityNode.childNodes.length);//不同浏览器结果可能不同
8.获取元素节点的指定子节点
元素.getElementsByTagName();
9.获取第一个和最后一个子节点
元素.firstChild;获取第一个子节点
元素.lastChild;获取最后一个子节点
10.获取文本节点
1).获取文本元素所在节点
2).通过firstChild获取文本节点 //因为文本节点是唯一的
3).获取文本节点的nodeValue属性来获取文本节点的值
var bjNode = document.getElementById("bj");
var bjTextNode = bjNode.firstChild;
var bjValue = bjTextNode.nodeValue;
4).可以更改文本信息
bjTextNode.nodeValue="hello";
11.添加事件时,方法中若还用到当前节点,使用this,不使用节点的引用。
12. /g表示全局标志
13.字符串.replace(reg, str); 将字符串中符合reg的替换成str
14.正则表达式.test(var str);返回boolean 表示是否符合表达式
15.节点的属性
nodeName只读
nodeType只读
nodeValue可读可写
16.创建元素节点
var liNode = docuemnt.createElement("节点名");
创建文本节点
var xmText = document.createTextNode("文本值");
添加元素节点
节点.appendChild(节点名);//添加到节点的最后一个
17.查看radio类型是否被选中使用checked属性
type[1].checked;若被选中,返回true,否则返回false
18.button的监听事件时,若最后返回false,则不会提交。
19.替换节点
a.找到所要替换的节点i,j
b.找到被替换节点的父节点i.partenNode
c.使用replaceChild(新节点,旧节点);
20.删除节点,同时删除子节点
父节点.removeChild();
21.comfirm()弹出确认对话框,返回一个boolean类型。
22.插入节点insertBefore(新节点,位置节点);
父节点.insertBefore();
23.innerHtml属性 表示节点内的所有内容
24.使用for(){}时,若删除节点nodes[i],每次删除完之后会刷新,可能出现数组越界,应使用node[0];每次删除第一个元素,直到删除完。
25.克隆节点
cloneNode(true);表示克隆的同时也包含其子节点
cloneNode();克隆节点,不包含子节点
2. 节点及其类型
element node、attribute node、text node;
text node是element node的子节点;
3. JS写在什么地方
1).HTML代码和JS代码耦合在一起
缺点:不利于代码维护
<button οnclick="alert('hello..')">ClickMe</button>
2).放在html文档的最后
缺点:不符合JS代码的习惯
3).放在title标签后
缺点:为加载完文档就已经执行
应对方案:使用window.onload = funtion(){代码块}
4.获取节点
对象.getElementsByTagName();
对象.getElementById();
对象.getElementsByName();
返回对应对象下的元素
5.若HTML元素自身没有定义name属性,使用getElementsByName()对IE无效。
6.读写属性
获得元素节点,通过节点.属性直接获取属性,
通过节点.属性=属性值;实现属性的赋值。
var nameNode = document.getElementById("name");
alert(nameNode.value);
nameNode.value="你好";
7.获取元素节点的所有子节点
1).获取元素节点。
2).利用元素节点的childNodes方法获取子节点
var cityNode = document.getElementById("city");
alert(cityNode.childNodes.length);//不同浏览器结果可能不同
8.获取元素节点的指定子节点
元素.getElementsByTagName();
9.获取第一个和最后一个子节点
元素.firstChild;获取第一个子节点
元素.lastChild;获取最后一个子节点
10.获取文本节点
1).获取文本元素所在节点
2).通过firstChild获取文本节点 //因为文本节点是唯一的
3).获取文本节点的nodeValue属性来获取文本节点的值
var bjNode = document.getElementById("bj");
var bjTextNode = bjNode.firstChild;
var bjValue = bjTextNode.nodeValue;
4).可以更改文本信息
bjTextNode.nodeValue="hello";
11.添加事件时,方法中若还用到当前节点,使用this,不使用节点的引用。
12. /g表示全局标志
13.字符串.replace(reg, str); 将字符串中符合reg的替换成str
14.正则表达式.test(var str);返回boolean 表示是否符合表达式
15.节点的属性
nodeName只读
nodeType只读
nodeValue可读可写
16.创建元素节点
var liNode = docuemnt.createElement("节点名");
创建文本节点
var xmText = document.createTextNode("文本值");
添加元素节点
节点.appendChild(节点名);//添加到节点的最后一个
17.查看radio类型是否被选中使用checked属性
type[1].checked;若被选中,返回true,否则返回false
18.button的监听事件时,若最后返回false,则不会提交。
19.替换节点
a.找到所要替换的节点i,j
b.找到被替换节点的父节点i.partenNode
c.使用replaceChild(新节点,旧节点);
20.删除节点,同时删除子节点
父节点.removeChild();
21.comfirm()弹出确认对话框,返回一个boolean类型。
22.插入节点insertBefore(新节点,位置节点);
父节点.insertBefore();
23.innerHtml属性 表示节点内的所有内容
24.使用for(){}时,若删除节点nodes[i],每次删除完之后会刷新,可能出现数组越界,应使用node[0];每次删除第一个元素,直到删除完。
25.克隆节点
cloneNode(true);表示克隆的同时也包含其子节点
cloneNode();克隆节点,不包含子节点