js操作dom
操作dom
查找html元素
document.getElementById(id) 通过元素 id 来查找元素
document.getElementsByTagName(name) 通过标签名来查找元素
document.getElementsByClassName(name) 通过类名来查找元素
document.querySelector();通过 CSS 选择器查找 HTML 元素
document.querySelectorAll("p.intro"); 通过 CSS 选择器查找 HTML 元素
改变输出流
千万不要在文档加载后使用 document.write()。这么做会覆盖文档。
document.write()
改变html元素
element.innerHTML = new html content 改变元素的 inner HTML
element.attribute = new value 改变 HTML 元素的属性值
element.setAttribute(attribute, value) 改变 HTML 元素的属性值
element.style.property = new style 改变 HTML 元素的样式
innerText vs textContent
innerText不返回隐藏元素的文本，而textContent返回所有文本。另外注意IE<9不支持textContent
innerHtmlvsinnerText
innerHtml ：不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树
innerText ：会将插入的html抱歉编码，可以防止注入攻击
var element = document.getElementById("header");
element.innerHTML = "New Header";
document.getElementById("myImage").src = "landscape.jpg";
document.getElementById("p2").style.color = "blue";
添加和删除
document.createElement(element) 创建 HTML 元素
document.removeChild(element) 删除 HTML 元素(剪切的方式)
document.appendChild(element) 添加 HTML 元素(剪切的方式)
document.replaceChild(element) 替换 HTML 元素
document.write(text) 写入 HTML 输出流
添加事件处理程序
document.getElementById(id).onclick = function(){code} 向 onclick 事件添加事件处理程序
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
JavaScript HTML DOM 导航
通过 JavaScript，您可以使用以下节点属性在节点之间导航：
节点树的遍历（包括元素节点，文本节点，注释节点……）
parentNode 父节点
childNodes[nodenumber] 子节点
firstChild 第一个子节点
lastChild 最后一个子节点
nextSibling 最后一个兄弟节点
previousSibling 前一个兄弟节点
元素节点的遍历（只针对html标签的）
parentElement 返回当前元素的父元素节点
children 返回当前元素的子节点
node.childElementCount === node.children.length 当前元素子节点的个数
firstElementChild 返回的是第一个元素节点
lastElementChild 返回的是最后一个元素节点
nextElementSibling/preElementSibling 返回后一个/前一个兄弟元素节点
子节点和节点值
<title id="demo">DOM 教程</title>
元素节点<title >中包含了“DOM 教程”文本节点
var myTitle = document.getElementById(“demo”).firstChild.nodeValue;
DOM 根节点
document.body - 文档的 body
document.documentElement - 完整文档
nodeName 属性属性规定节点的名称。
nodeName 是只读的
元素节点的 nodeName 等同于标签名
属性节点的 nodeName 是属性名称
文本节点的 nodeName 总是 #text
文档节点的 nodeName 总是 #document
nodeValue 属性 属性规定节点的值。
元素节点的 nodeValue 是 undefined
文本节点的 nodeValue 是文本文本
属性节点的 nodeValue 是属性值
nodeType 属性
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" （弃用）
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- 这是注释 -->
DOCUMENT_NODE 9 HTML 文档本身（<html> 的父）
DOCUMENT_TYPE_NODE 10 <!Doctype html>
dom结构树
getElementByld方法定义在Document.prototype上，即Element节 点上不能使用。getElementsByName方法定义在HTMLDocument.prototype上，即非html中的document不能使用(xml document,Element)getElementsByTagName方法定义在Document.prototype和Element.prototype上HTMLDocument.prototype定义了一些常用的属性，body，head, 分别指代HTML文档中的<body><head>标签。
document.body ---> body document.head----> headDocument.prototype上定义了documentElement属性，指代文档的根元素，在HTML文档中，他总是指代<html>元素
document.documentElement ---> htmlgetElementsByClassName、querySelectorAll、querySelector在Document.prototype,Element.prototype类中均有定义
事件
如何绑定时间处理函数
方法一
ele.'on'+type = function(event){}
兼容型好，但是一个元素的同一个时间只能绑定一个处理程序，基本上等同于写在HTML行间
方法二
ele.addEventListener("click", function(){},false);
IE9一下不兼容，可以为一个事件绑定多个处理程序
方法三
ele.attachEvent('on'+type,fn);
IE独有，一个事件绑定多个处理程序，程序的this指向window
解除事件处理程序
ele.onclick = false / '' / null
ele.removeEventListener("mousemove", myFunction);
ele.detachEvent('on'+type,fn)
事件只执行一次
div.onclick = function(){
console.onclick('a');
this.onclick = null;
}
事件冒泡,事件捕获
1. 事件冒泡：
结构上（非视觉上）嵌套关系的元素，会存在事件的冒泡功能，即同一事件，自子元素冒向父元素（自底向上）
2. 事件捕获
结构上（非视觉上）嵌套关系的元素，会存在事件的捕获功能，即同一事件，自父元向子元素捕获（自顶向下）
3. 触发循序：先捕获，后冒泡
focus，blur，change，submit，reset，select等事件不冒泡
addEventListener(event, function, useCapture);
默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。
4. 取消冒泡和阻止默认事件
- 取消冒泡：
- w3c标准：
event.stopPropagation - IE独有：
event.cancelBubble = true;
- w3c标准：
div.onclick = function(e){
e.stopPropagation(); //取消冒泡
this.style.backgroundColor = "green";
}
//封装方法取消默认方法
function stopBubble(event){
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancelBubble = true;
}
}
- 阻止默认事件
- 默认事件：提交表单，a标签跳转，右键菜单等
- 阻止默认事件：
return falseevent.preventDefault()w3c标准event.returnValue = false;兼容IE
//取消a标签的默认事件
var a = document.getElementsByTagName('a')[0];
a.onclick = function(e){
e.preventDefault();
}
//封装兼容性的阻止默认事件
function cancelHandler(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
事件对象
event || window.event
事件源对象
event.target
event.srcElement
//获取事件对象
div.onclick = function (e) {
var event = e || window.event;
var target = event.target || event.srcElement;
console.log(target)
}
事件委托
利用冒泡和事件源对象进行处理
优点：性能好，不需要多次循环
灵活，当又新的元素时不需要重新绑定
//打印出li里的内容 比循环的性能更高
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function (e) {
var event = e || window.event;
var target = event.target || event.srcElement;
console.log(target.innerText);
}
事件分类
- 鼠标事件
- click，mousedown，mousemove，mouseup，contextmenu，mouseover,mouseout mouseenter, mouseleave
- 先down后up再click
- 用button来区分鼠标按键 0 1 2 左键 滚轮 右键
- 拖拽和点击的区分
// 区分左右键
document.onmousedown= function(e){
if(e.button == 2){
console.log('右键');
}
else if(e.button == 0){
console.log("左键");
}
}
//拖拽和点击区分
var firstTime = 0;
var lastTime = 0;
var key = false;
document.onmousedown = function(){
firstTime = new Date().getTime();
}
document.onmouseup = function(){
lastTime = new Date().getTime();
if(lastTime-firstTime < 300){
key = true;
}
//console.log(lastTime-firstTime);
}
document.onclick = function(){
if(key){
console.log('click');
}
else{
console.log("d")
}
}
DOM3规定：click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键
-
键盘事件
- keydown keypress keyup
- keydown和keypress的区别
- keydown可以响应任意键盘按键，keypress只能响应数字类键盘按键
- keypress返回ASCII，可以转换成相应的字符
string.fromCharCode(e.charCode);
-
文本操作类事件
- input focus blur change
<input type="text"
value="请输入用户名"
onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'}"
onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}">
- 窗体操作事件
- scroll load
window.load在浏览器元素都加载完了再执行 很慢 一般不推荐
扫一扫
355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
