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>4.前端笔记之jsdom基础的更多相关文章
- 3.前端笔记之JavaScript基础
作者:刘耀 部分内容参考一下链接 参考: http://www.cnblogs.com/wupeiqi/articles/5369773.html http://javascript.ruanyife ...
- 前端笔记知识点整合之JavaScript（三）关于条件判断语句、循环语句那点事
一.条件分支语句 条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- [Java入门笔记] 面向对象编程基础（二）：方法详解
什么是方法? 简介 在上一篇的blog中,我们知道了方法是类中的一个组成部分,是类或对象的行为特征的抽象. 无论是从语法和功能上来看,方法都有点类似与函数.但是,方法与传统的函数还是有着不同之处: 在 ...
- 8.python笔记之面向对象基础
title: 8.Python笔记之面向对象基础 date: 2016-02-21 15:10:35 tags: Python categories: Python --- 面向对象思维导图 (来自1 ...
- 2.前端笔记之css
title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...
- 1.前端笔记之html
title: 1.前端笔记之HTML date: 2016-04-04 23:21:52 tags: Python categories: Python --- 作者:刘耀 **出处:http://w ...
- Java学习笔记：语言基础
Java学习笔记:语言基础 2014-1-31 最近开始学习Java,目的倒不在于想深入的掌握Java开发,而是想了解Java的基本语法,可以阅读Java源代码,从而拓展一些知识面.同时为学习An ...
随机推荐
- bootstrap table简洁扁平的表格
使用方法 1.在html页面的head标签中引入Bootstrap库(假如你的项目还没使用)和bootstrap-table.css. <link rel="stylesheet&qu ...
- 【转】HTTP长连接与短连接
1. HTTP协议与TCP/IP协议的关系 HTTP的长连接和短连接本质上是TCP长连接和短连接.HTTP属于应用层协议,在传输层使用TCP协议,在网络层使用IP协议.IP协议主要解决网络路由和寻址问 ...
- Cocos2d-X3.0 刨根问底（五）----- Node类及显示对象列表源码分析
上一章 我们分析了Cocos2d-x的内存管理,主要解剖了 Ref.PoolManager.AutoreleasePool这三个类,了解了对象是如何自动释放的机制.之前有一个类 Node经常出现在各种 ...
- 【poj1962】 Corporative Network
http://poj.org/problem?id=1962 (题目链接) 时隔多年又一次写带权并查集. 题意 n个节点,若干次询问,I x y表示从x连一条边到y,权值为|x-y|%1000:E x ...
- eclipse 左边目录结构下五referenced library解决办法
没有referenced library,加入多个jar包,导致项目看上去庞大 解决办法: 在Package Explorer窗口中会出现Referenced Libraries,但Java EE 透 ...
- yum命令一些易遗忘的参数
这些yum命令是我经常忘记的,所以记录下 yum check-update 检查可更新的RPM包 yum update 更新所有的RPM包 yum update kernel kernel-sourc ...
- 关于talbeViewCell一点感想
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPa ...
- MySQL查询重复出现次数最多的记录
MySQL查询的方法很多,下面为您介绍的MySQL查询语句用于实现查询重复出现次数最多的记录,对于学习MySQL查询有很好的帮助作用. 在有些应用里面,我们需要查询重复次数最多的一些记录,虽然这是一个 ...
- Linux创建线程
#include"stdio.h" #include"pthread.h" #include"unistd.h" ; void *creat ...
- iOS ASIHTTPRequest用https协议加密请求
iOS 终端请求服务端数据时,为了保证数据安全,我们一般会使用https协议加密,而对于iOS的网络编程,我们一般会使用开源框架:ASIHTTPRequest,但是如果使用传统的http方式,即使忽略 ...