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>