读写节点；读取节点的类型；读写节点的内容；读取节点的属性；元素节点的样式；查询节点；创建新节点；添加新节点；删除节点；自定义对象；事件；event对象
---------------------------------------------------------------------------------------------------------------------------
DOM:文档对象模型，当页面被加载时，浏览器会创建页面的文档对象。
- 通过可编程的对象模型，JavaScript能够改变页面中的HTML元素、HTML属性、CSS样式
还能够对页面中所有的时间做出反应。
DOM节点树：DOM模型被构造为对象的树，这棵树的根就是document对象。
-------------------------------------------------------------------------------------------
DOM提供了如下操作：
一.读写节点： var p1 = document.getElementById("p1");
1.读取节点的名称：p1.nodeName
- 元素节点和属性节点：标签或属性名
- 文本节点：#text
- 文档节点：#document
2.读取节点的类型：p1.nodeType
- 元素节点：返回1 - 属性节点：返回2 - 文本节点：返回3
- 注释节点：返回8 - 文档节点：返回9
二.读写节点的内容：（<>内容</>）
1.innerText:设置或获取位于对象起始和结束标签之间的文本（不包含子标签）。
2.innerHTML:设置或获取位于对象起始和结束标签之间的HTML（可以包含子标签）。
三.读取节点的属性:
1.getAttribute()方法:根据属性名称获取属性的值。语法:节点.属性名。(特殊的：节点.calssName)
例 var img = document.getElementById("i1");
console.log(img.getAttribute("src"));
2.setAttribute():设置属性：img.setAttribute("src","../images/02.jpg");
3.removeAttribute():删除属性:img.removeAttribute("src");
四.元素节点的样式:
1.style属性：- node.style.color - node.style.fontSize
例 p1.style.color = "red"; p1.stylefontSize = 20;
p1.className = "XXX";
五.查询节点：如果需要操作HTML元素，必须首先找到该元素。
查询节点的方式：
1.通过id查询：document.getElementById("id");
2.通过层次（节点关系）查询：
- parentNode:遵循文档的上下层次结构，查找单个父节点。
- childNodes:查孩子（带空格） - children:查孩子（不带空格）
- previousElementSibling:查哥哥
- nextElementSibling:查弟弟
- 查任意兄弟：节点.父亲.孩子[n]:parentNode.children[n]
例 var sh = document.getElementById("sh");
console.log(sh.parentNode);
//查孩子
console.log(ul.childNodes);//带空格
console.log(ul.children);//不带空格
console.log(ul.getElementsByTagName("li"));
//查哥哥
console.log(sh.previousElementSibling);
//查弟弟
console.log(sh.nextElementSibling);
//查任意兄弟：节点.父亲.孩子[n]
console.log(sh.parentNode.children[2]);
3.根据标签名查询节点：getElementsByTagName()
- 返回的是一个节点列表（即数组）
- 使用节点列表的length属性获取个数。
- [index]:定位具体的元素。
- 根据指定的父元素标签名返回所有子元素：
var ul = document.getElementById("city");
lis = ul.getElementsByTagName("li");
- 会忽略文档的结构，查找整个HTML文档的所有元素:document.getElementsByTagName("xx");
- 如果标签名称错误，则返回长度为0的节点列表。
4.根据标签的name属性的值进行查询：document.getElementsByName();
- 返回的也是一个节点列表。
六.创建新节点：doucment.createElement(elementName);
- elementName:要创建的元素标签名称。
- 返回新创建的节点。
例1 创建新节点：var newNode = doucment.createElement("input");
设置节点信息：newNode.type = "text";
newNode.value = "mary";
newNode.style.color = "red";
例2 var li1 = document.createElement("li");
li1.innerHTML = "深圳";
七.添加新节点：
1.parentNode.appendChild(newNode):新节点作为父节点的最后一个子节点添加.
2.parentNode.insertBefore(newNode,refNode):
- ref:参考节点，新节点位于此节点之前添加
例 //追加到最后
var ul = document.getElementById("city");
ul.appendChild(li1);
//插入到某子标签之前
var gz = document.getElementById("gz");
ul.insertBefore(li1,gz);
八.删除节点：
1.删除某个子节点：node.removeChild(childNode);
例 var hf = document.getElementById("hf");
ul.removeChild(hf);
2.删除节点本身：node.remove();
例 var wx = document.getElementById("wx");
wx.remove();
-----------------------------------------------------------------------------------------
自定义对象：是一种特殊的数据类型，由属性和方法封装而成。
1.直接创建：
例 采用直接量的方式创建对象
function f1(){
var stu = {"name":"小花","age":23,"work":function(){alert("吹牛逼")}};
alert(stu.name);
alert(stu.age);
stu.work();
}
2.使用构造器创建：
例 function f2(){
var teacher = new Object();
teacher.name = "苍老师";
teacher.age = 40;
teacher.work = function(){
alert("教Java");
}
alert(teacher.name);
alert(teacher.age);
teacher.work();
}
3.采用自定义构造器创建对象：
例 function Coder(name,age,work){
//this代表创建出来的对象
//.key代表对象的属性
this.name = name;
this.age = age;
this.work = work;
}
function f3(){
var cd = new Coder("花小强",18,function(){
alert("种向阳花");
});
alert(cd.name);
alert(cd.age);
cd.work();
}
------------------------------------------------------------------------------------------
事件：指页面元素状态改变，用户在操作鼠标或键盘时触发的动作。
一.事件的类型：
1.鼠标事件：onclick/ondblclick/onmousedown/onmouseup/onmouseover/onmouseout
2.键盘事件：onkeydown/onkeyup
3.状态事件：onload/onchange/onfocus/onblur/onsubmit
二.事件定义：
1.在html属性定义中直接处理事件：直接绑定事件。
例 <input type="button" value="按钮1" οnclick="f1();"/>
2.后绑定事件：在页面加载后，通过js获取元素并为其绑定事件。
例 var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
alert(2);
}
3. /*
* 3后绑定事件：在onload事件中获取元素并为其绑定事件。
* onload是页面加载事件，在页面加载后自动触发，写在该事件内的js
* 和写在body末尾的js等效
*/
window.onload = function(){
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
alert(3);
}
}
三.event对象：任何事件触发后将会产生一个event对象。event对象记录了事件发生时的
鼠标位置、键盘按键状态和触发对象等信息。
1.获取event对象：
- 在HTML代码中，在定义事件时使用event关键字将事件的对象作为参数传入方法。
- 调用函数时传入event，可以通过arguments[0]获取，也可以通过参数接收。
例 <body>中的代码：<input type="button" id="btn4" value="按钮4" οnclick="f1(event);"/>
<script>中的代码：function f1(e){
console.log(e);
alert(e.clientX+","+e.clientY);
}
2.获取event对象事件源：对于event对象，经常需要获得事件源。
- 事件源：即触发事件的元素（时间的目标节点）;
IE浏览器：event.srcElement Firefox浏览器：event.target
所有为了兼容性通常获取事件源的方式为：
function f1(e){
var obj = e.srcElement||e.target;
console.log(obj);
}
四.事件的处理机制：冒泡机制。
1.可以取消事件的冒泡：
- event.stopPropagation();
- event.cancelBubble = true;
例 <input type="button" value="C" οnclick="event.cancelBubble = true;alert(1)"/>
扫一扫
826
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
