DOM操作一
HTML DOM是HTML Document Object Model(文档对象模型)的缩写
HTML DOM则是专门适用于HTML/XHTML的文档对象模型。
熟悉软件开发的人员可以将HTML DOM理解为网页的API。
它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言(js)获取或者编辑。
例如Javascript就可以利用HTML DOM动态地修改网页。
事件
事件源、事件、事件驱动程序。
事件源 ：要触发的对象 （一般是名词，事件发起者，比如开关按钮）
事件：怎么触发这个事情 （一般是动词，触发事件，比如点击开关）
事件处理程序:发生了什么事情 （处理结果，比如灯亮了）
js做什么：获取事件源、绑定事件、书写事件驱动程序
常用事件:
-
属性 当以下情况发生时，出现此事件 onabort 图像加载被中断 ==onblur== 元素失去焦点 ==onchange== 用户改变域的内容 ==onclick== 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onerror 当加载文档或图像时发生某个错误 ==onfocus== 元素获得焦点 onkeydown 某个键盘的键被按下 onkeypress 某个键盘的键被按下或按住 onkeyup 某个键盘的键被松开 ==onload== 某个页面或图像被完成加载 onmousedown 某个鼠标按键被按下 onmousemove 鼠标被移动 onmouseout 鼠标从某元素移开,支持冒泡 onmouseover 鼠标被移到某元素之上,支持冒泡 onmouseup 某个鼠标按键被松开 onreset 重置按钮被点击 ==onresize== 窗口或框架被调整尺寸 onselect 文本被选定 onsubmit 提交按钮被点击 onunload 用户退出页面 ==onscroll== 元素滚动条在滚动时触发。 ==onmouseenter== 某个鼠标按键被按下,不支持冒泡 ==onmouseleave== 在鼠标指针移出元素上时触发,不支持冒泡 onmousewheel 当鼠标滚轮正在被滚动时触发
DOM
dom元素指的是页面的标签,
通过任意一个dom元素的关系可以找到当前页面其他任意的一个dom.
DOM的获得
ID选择器
- Idocument.getElementById("demo");
- 最准确的 需要获取的dom元素，必须有id
- 而且一个页面不能有重复的id
标签选择器
- document.getElementsByTagName("div");
- 没办法定位元素
- ==本质是数组类型==,需要通过下标选定标签
- document.getElementsByTagName("div")[0];
class选择器
- document.getElementsByClassName("a");
- 如果在移动使用，移动端浏览器完全支持。
- ie6,7,8不支持! 而且ie8不支持console.log
- ==本质是数组类型==,需要通过下标选定标签
- document.getElementsByClassName("a")[0];
NODE节点
node节点指的是页面的任意元素,
标签 换行符 注释 空格 属性 标签内容等都可以被当做node节点,
当然既然是节点,也是可以被js选中的,因此可以通过DOM节点之间的相对关系对它们进行访问。
node节点的访问关系
==以属性的方式存在的==。 A.parent a.parent();
-
选定节点后,可以将标签中的属性用javascript的中.(点)的方法调用
//点击div元素,使其变为红色,通过元素的style属性使其变色 //在js中操作css中的属性,一般会把abc-xx转换为abcXx 驼峰命名法 //background-color ==> backgroundColor div.onclick = function(){ pNode.style.backgroundColor = 'red'; }
parentNode 父节点
调用者就是节点,一个节点只有一个父节点。
调用方式就是节点.parentNode.
-
dom.parentNode ==> 通过dom获取其父类节点.
// 通过下标获取子元素标签 var boxItem = document.getElementsByClassName('innerBox')[0]; // api: dom.parentNode ==> 通过dom获取其父类节点. //通过子元素标签利用.parentNode,获取父元素 var box = boxItem.parentNode;
兄弟节点
调用者是节点。（存在浏览器兼容问题）
IE678中指下一个(上一个)元素节点（甚至包括标签、注释）。
在火狐谷歌IE9+(标准)以后都指的是下一个(上一个)节点（包括空文档和换行节点）。
nextSibling 下一个元素节点
- 火狐谷歌IE9+(标准)以后包括空文档和换行节点,导致出错
- 新标准: nextElementSibling 用于火狐谷歌IE9+(标准)以后版本
- 兼容写法: box =this.nextElementSibling || this.nextSibling
previousSibling 上一个元素节点
- 同上
- 新标准: previousElementSibling 用于火狐谷歌IE9+(标准)以后版本
- 兼容写法: box =this.previousSibling || this.previousElementSibling
子节点
单个子节点
firstChild: 调用者是父节点。
- IE678中指第一个子元素节点(标签)
- 在火狐谷歌IE9+以后都指的是第一个节点（包括空文档和换行节点）。
- 新标准: firstElementChild: 用于火狐谷歌IE9+(标准)以后版本
lastChild: 调用者是父节点。
- IE678中指最后一个子元素节点（标签）
- 在火狐谷歌IE9+以后都指的是最后一个节点（包括空文档和换行节点）。
- 新标准: lastElementChild: 用于火狐谷歌IE9+(标准)以后版本
所有子节点
childNodes: 调用者是父节点。
- 它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点
- 火狐 谷歌等高本版会把换行也看做是子节点
- 常用: children：非标准属性，它返回指定元素的子元素集合,只返回HTML节点，甚至不返回文本节点,几乎所有浏览器都支持。IE6/7/8中包含注释节点
区分不同类型的节点
nodeType:
- 属性可用来区分不同类型的节点,比如 元素, 文本 和 注释,可用来兼容ie8以下的浏览器
- nodeType == 1 表示的是元素节点 记住 元素就是标签
- nodeType == 2 表示是属性节点 已弃用
- nodeType == 3 是文本节点 了解
- nodeType == 8 注释 了解
处理兼容问题:
// 封装好的兼容ie8和标准浏览器的获取孩子节点的方法
function myChildren(node){
var myChildrenArr = [] ;
var childrenArr = node.children; //拿到的是node的所有的孩子节点，包括ie中的注释节点
for(var n in childrenArr){
if(childrenArr[n].nodeType == 1){ //选择出所有的标签节点
myChildrenArr.push(childrenArr[n]);
}
}
return myChildrenArr;
}
DOM节点操作:
增删改查 CURD create update read delete
创建节点
createElement()
- var pEle = document.createElement('img'); 创建一个img标签节点
插入节点
appendChild()
- div.appendChild(pEle); 插入img标签节点,到div里
insertBefore()
- div.insertBefore(img,span) ;将img标签放到 div下的span上面
删除节点
removeChild()
- div.removeChild('img'); 删除div下的img标签
克隆节点
cloneNode(true)
- var div = oldNode.cloneNode(true);如果没有true为浅克隆,不包括div下的子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="box">
</div>
<button class="btn">删除img2图片</button>
<button class="btn2">clone box</button>
<script>
var boxDiv = document.getElementsByClassName('box')[0];
var btn = document.getElementsByClassName('btn')[0];
var btn2 = document.getElementsByClassName('btn2')[0];
//创建一个p标签
// 创建完了需要插入
var pEle = document.createElement('p');
pEle.innerText = '欢迎来到不凡学院';
var img = document.createElement('img');
var img2 = document.createElement('img');
img.src = 'img/fbb.jpg';
img2.src = 'img/fbb.jpg';
// 通过父节点插入子节点
boxDiv.appendChild(pEle);
boxDiv.appendChild(img);
// 同一个对象不能重复插入
// 将img2插入到pEle前面
boxDiv.insertBefore(img2,pEle);
btn.onclick = function(){
// 父节点.removeChild（子节点）。
// boxDiv.removeChild(img2);
// node.parentNode.removeChild(node)
img2.parentNode.removeChild(img2);
}
btn2.onclick = function(){
var scriptEle = document.getElementsByTagName('script')[0];
//克隆标签节点 如果没有传递true则为浅克隆.
var newBox = boxDiv.cloneNode(true);
//单clone不插入是没有效果的
//document.body ==> 获取body对象
// document.body.appendChild(newBox);
document.body.insertBefore(newBox,scriptEle);
}
</script>
</body>
</html>
节点属性
获取调用它的元素的某个属性的值
getAttribute()
- this.getAttribute('class'); 获取调用它的元素的class的值
设置调用它的元素的某个属性的值
setAttribute()
- div.setAttribute("style", "background-color: pink;");将div的style属性里的背景设置为pink
删除调用它的元素的某个属性的值
removeAttribute()
- div.removeAttribute('id');删除div的id属性
内容操作
设置输入框的初始值
.value
- inputEl.value = Math.floor(Math.random()(100-1)+1);* 将inputEl指向的输入框里面添加一个(1~100)的随机数
在节点中添加文本
.innerText
可读写
div.innerText = '只是文字不能html解析'; 在div中添加文字内容;
在节点中添加HTML代码
.innerHTML
可读写
div.innerHTML = '<h1>我是h1标签</h1>'; 在div中添加文字内容;
