4.前端笔记之jsdom基础
一、简介
文件对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM编程： DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
HTML DOM 节点树
通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
理解几个概念，html标签没有父辈，没有兄弟，所以html标签为根标签。head标签是html子标签，meta和title标签之间是兄弟关系。如果把每个标签当作一个节点的话，那么这些节点组合成了一棵节点树。
二、选择器（查找元素方法）
W3C提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行操作。分别为：getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()
1.getElementById()
getElementById()方法，接受一个参数：获取元素的ID。如果找到相应的元素则返回该元素的HTMLDivElement对象，如果不存在，则返回null。
例：
<body>
<p id="demo">这是一个p标签</p>
<script>
var x = document.getElementById('demo');
document.write('获取标签内容：'+ x.innerHTML+'</br>');
document.write('获取标签名：'+ x.tagName);
</script>
</body>
通过getElementById()获取到特定元素节点时，这个节点对象就被我们获取到了，而通过这个节点对象，我们可以访问它的一系列属性。
例如：
tagName 获取元素节点的标签名
innerHTML 获取元素节点里的内容
id 获取元素的id名称
style CSS内联样式属性值
className CSS元素的类
document.getElementById('demo').id; //获取id
document.getElementById('demo').id = 'person'; //设置id
document.getElementById('demo').style; //获取CSSStyleDeclaration对象
document.getElementById('demo').style.color; //获取style对象中color的值
document.getElementById('demo').style.color = 'red';//设置style对象中color的值
document.getElementById('box').className; //获取class
document.getElementById('box').className = 'box'; //设置class
2.getElementsByTagName()方法
可以获取所有标签元素
document.getElementsByTagName('*'); //获取所有元素
document.getElementsByTagName('li'); //获取所有li元素，返回数组
document.getElementsByTagName('li')[0]; //获取第一个li元素，HTMLLIElement
document.getElementsByTagName('li').item(0) //获取第一个li元素，HTMLLIElement
document.getElementsByTagName('li').length; //获取所有li元素的数目
案例：
<body>
<a>我是一个a标签</a>
<p>我是一个p标签</p>
<li>我是li一号</li>
<li>我是li二号</li>
<script>
var x = document.getElementsByTagName('a'); //获取所有的a标签元素返回数组
document.write(x[0].innerHTML + '</br>'); //输出第一个a标签的内容 #如果想输出所有 可以for循环数组输出
var i = document.getElementsByTagName('li');
for(var item in i){
document.write('li的内容：'+ i[item].innerHTML +'</br>'); //循环输出所有li标签的内容
}
document.write('li的第一个内容：' + i[0].innerHTML); //输出第一个li标签的内容
document.write('li标签的数量'+ i.length); //输出li标签的数量
</script>
</body>
3.getElementsByName()方法
getElementsByName()方法可以获取相同名称(name)的元素，返回一个对象数组HTMLCollection(NodeList)。
document.getElementsByName('add') //获取input元素
document.getElementsByName('add')[0].value //获取input元素的value值
document.getElementsByName('add')[0].checked //获取input元素的checked值
案例：
<body>
<p name="demo">我是一个小小的p标签</p>
<script>
var x = document.getElementsByName('demo'); //获取所有name=demo的标签
x[0].style.color='red'; //将第一个name=demo的元素颜色改变 使用style属性
document.write('内容:'+ x[0].innerHTML); //输出第一个name=demo的标签内容
</script>
</body>
//如果要输出所有 可以使用for循环x数组。
4.getAttribute()方法
getAttribute()方法将获取元素中某个属性的值。它和直接使用.属性获取属性值的方法有一定区别。
document.getElementById('box').getAttribute('id');//获取元素的id值
document.getElementById('box').id; //获取元素的id值
document.getElementById('box').getAttribute('mydiv');//获取元素的自定义属性值
document.getElementById('box').mydiv //获取元素的自定义属性值，非IE不支持
document.getElementById('box').getAttribute('class');//获取元素的class值，IE不支持
document.getElementById('box').getAttribute('className');//非IE不支持
5.removeAttribute()方法
removeAttribute()可以移除HTML属性。
document.getElementById('box').removeAttribute('style');//移除属性
案例：
<body>
<div id="add" style="color:red">我是一个带颜色的div</div>
<button onclick="demo()">点击取消字体颜色</button>
<script>
function demo(){
var x = document.getElementById('add');
x.removeAttribute('style');
}
</script>
</body>
三、dom节点操作
1.node节点属性
节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性，分别为：nodeName、nodeType和nodeValue。
元素：
<body>
<p id="demo">我是一个美丽的p标签</p>
<script>
var x = document.getElementById('demo');
document.write('元素的标签名'+x.nodeName+'</br>'); //类型是p标签
document.write('元素的标签类型'+x.nodeType+'</br>'); //类型是1
document.write('元素的值'+ x.nodeValue+'</br>'); //元素本身没有内容所有是null
</script> //如果要输出内容 请使用innerHTML
</body> //node只能获取当前节点的内容
2.层次节点属性
节点的层次结构可以划分为：父节点与子节点、兄弟节点这两种。当我们获取其中一个元素节点的时候，就可以使用层次节点属性来获取它相关层次的节点。
1）.childNodes属性
childeNodes属性可以获取某一个元素节点的所有子节点，这些子节点包含元素子节点和文本子节点。
<body>
<div id="demo"><p>我是一个p标签</p><a>我是一个a标签</a></div>
<script>
var x = document.getElementById('demo');
document.write(x.childNodes); //所有子节点列表 可以用for循环显示
document.write(x.childNodes.length);//含有两个子节点
document.write(x.childNodes[0].innerHTML); //输出标签内容
</script>
</body>
PS：使用childNodes[n]返回子节点对象的时候，有可能返回的是元素子节点，比如 HTMLElement；也有可能返回的是文本子节点，比如Text。元素子节点可以使用nodeName或者tagName获取标签名称，而文本子节点可以使用nodeValue获取。
for (var i = 0; i < demo.childNodes.length; i ++) {
//判断是元素节点，输出元素标签名
if (demo.childNodes[i].nodeType === 1) {
alert('元素节点：' + demo.childNodes[i].nodeName);
//判断是文本节点，输出文本内容
} else if (demo.childNodes[i].nodeType === 3) {
alert('文本节点：' + demo.childNodes[i].nodeValue);
}
}
PS：在获取到文本节点的时候，是无法使用innerHTML这个属性输出文本内容的。这个非标准的属性必须在获取元素节点的时候，才能输出里面包含的文本。
2.firstChild和lastChild属性
firstChild用于获取当前元素节点的第一个子节点，相当于childNodes[0]；lastChild用于获取当前元素节点的最后一个子节点，相当于childNodes[box.childNodes.length - 1]。
<body>
<div id="demo"><p>我是一个p标签</p><p>我是一个a标签</p></div>
<script>
var x = document.getElementById('demo');
document.write('第一个子节点'+x.firstChild);
document.write('最后一个子节点'+ x.lastChild);
</script>
</body>
3.ownerDocument属性
ownerDocument属性返回该节点的文档对象根节点，返回的对象相当于document。
alert(box.ownerDocument === document); //true，根节点
4.parentNode、previousSibling、nextSibling属性
parentNode属性返回该节点的父节点，previousSibling属性返回该节点的前一个同级节点，nextSibling属性返回该节点的后一个同级节点。
alert(box.parentNode.nodeName); //获取父节点的标签名
alert(box.lastChild.previousSibling); //获取前一个同级节点
alert(box.firstChild.nextSibling); //获取后一个同级节点
5.attributes属性
attributes属性返回该节点的属性节点集合。
document.getElementById('box').attributes //NamedNodeMap
document.getElementById('box').attributes.length;//返回属性节点个数
document.getElementById('box').attributes[0]; //Attr，返回最后一个属性节点
document.getElementById('box').attributes[0].nodeType; //2，节点类型
document.getElementById('box').attributes[0].nodeValue; //属性值
document.getElementById('box').attributes['id']; //Attr，返回属性为id的节点
document.getElementById('box').attributes.getNamedItem('id'); //Attr
四．节点操作
DOM不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换节点。
1.write()方法
write()方法可以把任意字符串插入到文档中去。
document.write('<p>我是一个p标签</p>')' ; //输出任意字符串
可以覆盖掉整个html页面
2.createElement()方法
createElement()方法可以创建一个元素节点。
document.createElement('p'); //创建一个元素节点
//只是在内存中，并没有真正的在页面上显示
3.appendChild()方法
appendChild()方法讲一个新节点添加到某个节点的子节点列表的末尾上。
var x = document.getElementById('demo'); //获取某一个元素节点
var p = document.createElement('p'); //创建一个新元素节点<p>
x.appendChild(p); //把新元素节点<p>添加子节点末
4.createTextNode()方法
createTextNode()方法创建一个文本节点。
var text = document.createTextNode('我是文本节点'); //创建一个文本节点
p.appendChild(text); //将文本节点添加到p里面
5.insertBefore()方法
insertBefore()方法可以把节点创建到指定节点的前面。
demo.parentNode.insertBefore(p, demo); //把<div>之前创建一个节点
6.repalceChild()方法
replaceChild()方法可以把节点替换成指定的节点。
demo.parentNode.replaceChild(p,demo); //把<div>换成了<p>
7.cloneNode()方法
cloneNode()方法可以把子节点复制出来。
var x = document.getElementById('demo');
var clone = x.firstChild.cloneNode(true); //获取第一个子节点，true表示复制内容
x.appendChild(clone); //添加到子节点列表末尾
8.removeChild()方法
removeChild()方法可以把
demo.parentNode.removeChild(demo); //删除指定节点
案例：
<body>
<div id="container"></div>
<a href="http://www.liuyao.me" onclick="return AddElement();">添加</a>
<script>
function AddElement(){
//创建标签,添加至container中
var createObj = document.createElement('a');
createObj.href = 'http://www.liuyao.me';
createObj.innerText = '耀耀博客';
var nid = document.getElementById('container');
nid.innerHTML = createObj;
nid.appendChild(createObj);
return false;
}
</script>
</body>
五、操作样式
改变 HTML 内容
改变 CSS 样式
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素
改变事件（处理程序）
1.innerHTML方法
获取元素内容和改变元素内容
<body>
<p id="demo">我是一个p标签</p>
<script>
var x = document.getElementById('demo');
document.write(x.innerHTML); //显示元素内容
x.innerHTML='我改变了'; //改变元素内容
</script>
</body>
//点击加1
<body>
<p id = 'num'>1</p>
<input type="button" onclick="add()"/>
<script>
function add() {
var nid = document.getElementById('num');
var text = nid.innerHTML;
text = parseInt(text);
text += 1;
nid.innerText = text;
}
</script>
</body>
2.改变样式
<body>
<div id="demo" style="width: 100px;height: 100px;background: red;">我是红色</div>
<button onclick="add()">点击我改变颜色</button>
<script>
function add(){
var x = document.getElementById('demo');
x.style.background = 'blue';
}
</script>
</body>
六、事件
在元素上点击或者其他操作
加载页面
改变输入字段
1.点击改变背景颜色
<body>
<button onclick="demo()">点击改变背景颜色</button>
<script>
function demo(){
var x = document.body;
x.style.background = 'red';
}
</script>
</body>
2.点击改变文本内容
<body>
<p id="demo">我是一个文本内容</p>
<button onclick="add()">点击改变文本内容</button>
<script>
function add(){
var x = document.getElementById('demo');
x.innerHTML = '被改变了';
}
</script>
</body>
3.用户注册提交
<body>
<form>
用户名：<input id="user" type="text"/>
密码：<input id="passwd" type="password"/>
<input onclick="login()" type="submit" value="提交"/>
</form>
<script>
function login(){
var x = document.getElementById('user').value;
if(x ==''){
alert('用户名不能为空');
}
var y = document.getElementById('passwd').value;
if(y == ''){
alert('密码不能为空');
}
}
</script>
</body>
4.提交
<body>
<form id="from1" action="https://www.sogou.com/web" method="get">
<input name="query" type="text"/>
<div onclick="Submit()">提交</div>
</form>
<script>
function Submit(){
document.getElementById('from1').submit();
}
</script>
</body>
5.搜索功能
<body>
<form id="from1" action="https://www.sogou.com/web" method="get">
<input name="query" type="text"/>
<input type="submit" onclick="return MySubmit();" value="提交"/>
</form>
<script>>
function MySubmit(){
var q = document.getElementsByName('query')[0];
if(q.value.trim()){
return true;
}else{
alert('请输入内容');
return false;
}
}
</script>
</from>
</body>
事件的基本用法：
1.onchange 事件
onchange 事件常结合对输入字段的验证来使用。
小写转大写输入：
<body>
请输入：<input id="demo" onchange="add()" type="text"/>
<script>
function add(){
var x=document.getElementById("demo");
x.value=x.value.toUpperCase();
}
</script>
</body>
2.onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
//触摸改变背景颜色
<body>
<div id="demo" onmouseover="adder()" onmouseout="addout()" style="width: 100px; height:100px; background: darkred">别碰我</div>
<script>
function adder(){
var x = document.getElementById('demo');
x.style.background = 'blue';
}
function addout(){
var x =document.getElementById('demo');
x.style.background = 'red';
}
</script>
</body>
//触摸改变字体颜色
<body>
<p onmouseover="style.color='red'" onmouseout="style.color='blue'">碰我颜色就改变了</p>
</body>
3.onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。
首先当点击鼠标按钮时，会触发 onmousedown 事件，
当释放鼠标按钮时，会触发 onmouseup 事件，
最后，当完成鼠标点击时，会触发 onclick 事件。
<body>
<div id="demo" onmousedown="adddown()" onmouseup="addseup()" style="width: 100px; height:100px; background: darkred">我是一个div</div>
<script>
function adddown(){
var x = document.getElementById('demo');
x.style.background = 'blue';
}
function addseup(){
var x = document.getElementById('demo');
x.style.background = 'red';
}
</script>
</body>
window
window.onload = function(){}
//jQuery：$(document).ready(function(){})
//onload是所有DOM元素创建、图片加载完毕后才触发的。
而ready则是DOM元素创建完毕后触发的，不等图片加载完毕。
图片还么有渲染，就可以进行事件的执行。
跑马灯：
<body>
<input type="button" onclick="StopInterval();" value="停下来"/>
<script>
// setInterval( '操作','间隔');
// setInterval('alert('123')',2000)
//在title滚动
obj1 = setInterval('Func()',1000);
//第二种 执行指定次数结束
// obj1 = setTimeout('Func()',1000);
function StopInterval(){
//清除定时器
// clearInterval(obj1);
clearTimeout(obj1);
}
function Func(){
var text = document.title;
var firstChar = text.charAt(0);
var subText = text.substring(1,text.length);
var newTitile = subText + firstChar;
document.title = newTitile;
}
</script>
</body>
使用焦点
<body>
<a id="mefunc" href="http://www.liuyao.me" >我是刘耀</a>
<br/>
<input type="button" onclick="getfocus()" value="获得焦点">
<input type="button" onclick="losefocus()" value="失去焦点">
<script>
function getfocus()
{document.getElementById('mefunc').focus()}
function losefocus()
{document.getElementById('mefunc').blur()}
</script>
</body>
关于Document对象的用法
1.输出文本
<body>
<script>
document.write('我是刘耀');
</script>
</body>
2.输出html
<body>
<script>
document.write('<h1>我是刘耀</h1>');
</script>
</body>
3.输出页面标题
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>我是一个标题</title>
</head>
<body>
<script>
document.write(document.title);
</script>
</body>
</html>
4.输出当前页面URL
<body>
<script>
document.write(document.URL);
</script>
</body>
5.获取表单数
<body>
<form name="Form1"></form>
<form name="Form2"></form>
<form name="Form3"></form>
<script>
document.write("文档包含： " + document.forms.length + " 个表单。")
</script>
</body>
</html>
关于dom在表单中的用法：
1.选择复选框和取消复选框
<body>
<form>
<input type="checkbox" id="myCheck" />
<input type="button" onclick="check()" value="选定" />
<input type="button" onclick="uncheck()" value="取消选定" />
</form>
<script>
function check()
{
document.getElementById("myCheck").checked=true
}
function uncheck()
{
document.getElementById("myCheck").checked=false
}
</script>
</body>
2.重置表单
<body>
<form id="demo">
用户名：<input type="text"/>
密码：<input type="password" />
<button onclick="add()">重置</button>
</form>
<script>
function add(){
var x = document.getElementById('demo');
x.reset();
}
</script>
</body>
3.提交
<body>
<form id="demo" action="www.baidu.com" method="get" >
用户名：<input type="text"/>
密码：<input type="password" />
<button onclick="add()">提交</button>
</form>
<script>
var x = document.getElementById('demo');
x.submit()
</script>
</body>
