一简介
HTML文档中的每个元素都是一个节点 , 无论是标签 标签属性 文本 注释甚至空白都算是一个节点
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
二 查找元素
1通用方法
document.getElementById() 通过id属性来查找元素
document.getElementsByTagName() 通过标签名来查找元素
document.getElementsByClassName() 通过类名来查找元素
document.getElementsByName() 通过name属性查找元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#dvs{width:200px;height:200px;background:blue;}
.cur{border:solid 2px green;width:300px;}
</style>
</head>
<body>
<div id='dvs'><a href=""><span>军事</span></a></div>
<img src="./baby.jpg" alt="" id='imgs'>
<script type="text/javascript">
var dvs = document.getElementById('dvs');
var imgs = document.getElementById('imgs');
dvs.addEventListener('click', function(){
// this.setAttribute('class','cur');
// this.setAttribute('name','www');
// console.log(imgs.getAttribute('src'));
// imgs.removeAttribute('src');
//添加类名
this.className = 'cur';
})
//设置和获取文本
// dvs.innerHTML = '美女';
// dvs.innerHTML = '<option>美女</option>';
// textContent
// dvs.textContent = '美女';
// dvs.textContent = '<a href="">美女</a>';
/*
console.log(dvs.innerHTML); //这个获取的是a链接
console.log(dvs.textContent); //这个获取的是文本
*/
</script>
</body>
</html><!doctype html>
<html>
<head>
<title>表单节点的获取</title>
<meta charset='utf-8'/>
<style type="text/css">
table,td{border-collapse:collapse;}
td{padding:10px;}
div{margin-top:40px;}
</style>
</head>
<body>
<center>
<div>
<form action="" method ='post' enctype="multipart/form-data" >
<table border='1'>
<tr>
<td>用户名:</td>
<td>
<input type='text' name='username'/>
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type='password' name='password'/>
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type='password' name='repassword' />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type='radio' name='sex' value='男' checked="checked"/>男
<input type='radio' name='sex' value='女' />女
</td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td>
<input type='checkbox' name='hobby[]' value='篮球' checked="checked"/>篮球
<input type='checkbox' name='hobby[]' value='足球' checked="checked"/>足球
<input type='checkbox' name='hobby[]' value='排球' />排球
<input type='checkbox' name='hobby[]' value='乒乓球' />乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select name='city'>
<option value='北京'>北京</option>
<option value='天津' selected="selected">天津</option>
<option value='上海'>上海</option>
<option value='重庆'>重庆</option>
</select>
</td>
</tr>
<tr>
<td>个人介绍:</td>
<td>
<textarea name='intro' style='resize:none'>hello world</textarea>
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<input type='file' name='profile' />
</td>
</tr>
<tr>
<td colspan='2' style='text-align:center'>
<input type='submit' value="提交" />
<input type='reset' value="重置"/>
<button>点击</button>
</td>
</tr>
</table>
</form>
</div>
</center>
<script type="text/javascript">
//设置和获取输入框的值
//获取表单
var forms = document.forms;
// var eles = forms[0].elements;
// console.log(eles);
// eles[0].style.border = 'solid 2px blue';
var uname = forms[0].username;
/*uname.onfocus = function()
{
this.style.border = 'solid 2px blue';
}
*/
// uname.value = 'ilikeyou';
// console.log(uname.value);
//获取单选框
var sex = forms[0].sex;
// console.log(sex);
for (var i = 0; i < sex.length; i++) {
//var che = sex[i].getAttribute('checked');
//console.log(che);
/*if(che == 'checked'){
console.log(sex[i].value);
}*/
//----------------------------------------
var che = sex[i].checked; //返回的是一个boolean
// console.log(che);
if(che){
// console.log(sex[i].value);
}
};
//复选框
var ches = document.getElementsByName('hobby[]');
// console.log(ches);
for (var i = 0; i < ches.length; i++) {
//
var cs = ches[i].checked;
if(cs){
console.log(ches[i].value);
}
};
//文本域的值
var texts = document.getElementsByName('intro');
// console.log(texts[0].value);
// console.log(texts[0].innerHTML);
//下拉框
var citys = document.getElementsByName('city');
// console.log(citys[0].value);
// citys[0].value='北京';
var ops = document.getElementsByTagName('option');
for (var i = 0; i < ops.length; i++) {
var sels = ops[i].selected;
if(sels){
console.log(ops[i].innerHTML);
}
};
//事件绑定
//1.属性名 属性值
<button onclick = 'func(this)'>点击</button>
function func(obj)
{
obj.style.border = 'solid 2px blue';
}
//2
buts.onclick = function()
{
}
//3.addEventListener('click', function(){})
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素</title>
<style type="text/css">
*{
/*padding:0px;
margin:0px;*/
list-style:none;
text-decoration:none;
font-family:microsoft yahei;
}
#all{
padding:10px;
width:800px;
height:auto;
border:solid 1px #333;
margin:0 auto;
}
#menu a{font-size:14px;}
#header{width:97%;height:80px;border:solid 1px #444;margin:10px;}
#section{width:97%;height:auto;border:solid 1px #444;margin:10px;}
#footer{width:97%;height:50px;border:solid 1px #444;margin:10px;}
#header ul{height:auto;overflow:hidden;padding-left:100px;}
#header ul li{width:60px;height:30px;float:left;border:solid 1px #456;text-align:center;line-height:30px;}
#logo{width:200px;height:auto;float:left;position:relative;}
#logo img{margin-top:-40px;}
#section ul{height:auto;overflow:hidden;padding:20px;}
#section li{width:200px;height:150px;float:left;border:solid 2px pink;padding:10px;margin-right:21px;margin-bottom:21px;position:relative;}
#img{width:100px;float:left;}
#copy{height:auto;overflow:hidden;padding-left:100px;line-height:50px;}
#move{width:120px;height:40px;background:pink;position:fixed;right:0px;top:100px;cursor:pointer;font-family:courier;line-height:40px;text-align:center;}
#allmove{width:120px;height:40px;background:pink;position:fixed;right:0px;top:200px;cursor:pointer;font-family:courier;line-height:40px;text-align:center;}
#recovery{width:120px;height:40px;background:pink;position:fixed;right:0px;top:300px;cursor:pointer;font-family:courier;line-height:40px;text-align:center;}
#ins{width:120px;height:40px;background:lightblue;position:fixed;left:0px;top:100px;cursor:pointer;line-height:40px;text-align:center;}
#app{width:120px;height:40px;background:lightblue;position:fixed;left:0px;top:160px;cursor:pointer;line-height:40px;text-align:center;}
#rem{width:120px;height:40px;background:lightblue;position:fixed;left:0px;top:220px;cursor:pointer;line-height:40px;text-align:center;}
#rep{width:120px;height:40px;background:lightblue;position:fixed;left:0px;top:280px;cursor:pointer;line-height:40px;text-align:center;}
#clo{width:120px;height:40px;background:lightblue;position:fixed;left:0px;top:340px;cursor:pointer;line-height:40px;text-align:center;}
.xx{width:17px;height:17px;border:solid 1px #ddd;background:#eee;position:absolute;right:0px;top:0px;line-height:17px;text-align:center;cursor:pointer;display:none;}
</style>
<script type="text/javascript">
window.onload = function(){
var lis = images.getElementsByTagName('li');//获取所有的li
move.onclick = function(){
for(var i=0;i<lis.length;i++){
lis[i].style.transform = 'rotate('+(Math.ceil(Math.random()*90)-45)+'deg)';
}
return false;
}
allmove.onclick = function(){
var d = 0;
var inte = setInterval(function(){
document.body.style.transform = 'rotate('+d+'deg)';
d+=10;
if(d > 360){
clearInterval(inte);
}
},10)
}
recovery.onclick = function(){
for(var i=0;i<lis.length;i++){
lis[i].style.transform = 'rotate(0deg)';
}
return false;
}
}
</script>
</head>
<body>
<!-- 内容 start -->
<div id="all">
<!-- 头部 start -->
<div id="header">
<div id="logo"><img src="./sunli/logo.png" alt="" width="100%"></div>
<ul id="menu">
<li><a href="国内">国内</a></li>
<li><a href="国外">国外</a></li>
<li><a href="科技">科技</a></li>
<li><a href="生活">生活</a></li>
</ul>
</div>
<!-- 头部 end -->
<!-- 内容 start -->
<div id="section">
<ul id="images">
<li class="w"><a href=""><img src="./sunli/1.jpg" alt="" width="100%"></a><span class='xx'>X</span></li>
<li class="w"><a href=""><img src="./sunli/2.jpg" alt="" width="100%"></a><span class='xx'>X</span></li>
<li class="w"><a href=""><img src="./sunli/3.jpg" alt="" width="100%"></a><span class='xx'>X</span></li>
</ul>
</div>
<!-- 内容 end -->
<!-- 底部 start -->
<div id="footer">
<div id="img"><img src="./sunli/logo.png" alt="" width="100%" height='50px'></div>
<div id="copy">© Copyright 2014. All Rights Reserved.Beijing</div>
</div>
<!-- 底部 end -->
</div>
<!-- 内容 end -->
<div id="move">Image</div>
<div id="allmove">Body</div>
<div id="recovery">Recovery</div>
<div id='ins'>头部插入节点</div>
<div id='app'>尾部插入节点</div>
<div id='rem'>删除节点</div>
<div id='rep'>替换节点</div>
<div id='clo'>克隆节点</div>
<script type="text/javascript">
var ins = document.getElementById('ins');
var app = document.getElementById('app');
var rem = document.getElementById('rem');
var rep = document.getElementById('rep');
var clo = document.getElementById('clo');
var images = document.getElementById('images');
//从头部插入节点
ins.onclick = function()
{
// alert(12345);
var lis = createLis();
var fir = images.firstElementChild;
images.insertBefore(lis,fir);
}
//从尾部插入节点
app.onclick = function()
{
var lis = createLis();
images.appendChild(lis);
}
//删除节点
rem.onclick = function()
{
var fir = images.firstElementChild;
images.removeChild(fir);
}
//替换节点
rep.onclick = function()
{
var last = images.lastElementChild;
//调用函数
var lis = createLis();
images.replaceChild(lis,last);
}
//克隆节点
clo.onclick = function()
{
var last = images.lastElementChild;
var las = last.cloneNode(true);
var fir = images.firstElementChild;
images.insertBefore(las,fir);
}
//封装函数
function createLis()
{
//创建li
var lis = document.createElement('li');
// lis.innerHTML = "<li><a href=''>img</a></li>";
//创建a链接
var as = document.createElement('a');
//设置属性
as.setAttribute('href','#');
//创建img标签
var img = document.createElement('img');
//设置属性
img.setAttribute('src','./sunli/'+rand(1,13)+'.jpg');
//添加宽
img.setAttribute('width','100%');
var spa = document.createElement('span');
spa.innerHTML = 'X';
spa.setAttribute('class','xx');
//鼠标移上去的事件
lis.onmouseover = function()
{
//让X显示出来
spa.style.display = 'block';
}
//鼠标离开事件
lis.onmouseout = function()
{
//让X隐藏
spa.style.display = 'none';
}
//给X一个单击事件
spa.onclick = function()
{
// alert(1234);
//点击X完成之后的确认框
var res = confirm('你确认要删除吗???'); //返回的是一个boolean
//判断 如果是真的话
if(res){
//获取spa的父级
var ls = this.parentElement;
//从父级里面删除当前li
images.removeChild(ls);
}
}
// <li><a><img>
//把a链接插入到li里面
lis.appendChild(as);
//span插入到li里面
lis.appendChild(spa);
//把img插入到a连接
as.appendChild(img);
//这个函数调用是给外面的li使用
func();
//返回的li
return lis;
}
function rand(m,n)
{
return Math.ceil(Math.random()*(n-m+1))+(m-1);
}
//把外面的li进行删除
function func(){
//首先要获取spa
var sps = document.getElementsByClassName('xx');
for (var i = 0; i < sps.length; i++) {
//给X单击事件
sps[i].onclick = function()
{
// alert(1234);
var res = confirm('你确认要删除吗???'); //返回的是一个boolean
if(res){
//获取spa的父级
var ls = this.parentElement;
images.removeChild(ls);
}
}
};
}
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素</title>
<style type="text/css">
*{
/*padding:0px;
margin:0px;*/
list-style:none;
text-decoration:none;
font-family:microsoft yahei;
}
#all{
padding:10px;
width:800px;
height:auto;
border:solid 1px #333;
margin:0 auto;
}
#menu a{font-size:14px;}
#header{width:97%;height:80px;border:solid 1px #444;margin:10px;}
#section{width:97%;height:auto;border:solid 1px #444;margin:10px;}
#footer{width:97%;height:50px;border:solid 1px #444;margin:10px;}
#header ul{height:auto;overflow:hidden;padding-left:100px;}
#header ul li{width:60px;height:30px;float:left;border:solid 1px #456;text-align:center;line-height:30px;}
#logo{width:200px;height:auto;float:left;position:relative;}
#logo img{margin-top:-40px;}
#section ul{height:auto;overflow:hidden;padding:20px;}
#section li{width:200px;height:150px;float:left;border:solid 2px pink;padding:10px;margin-right:21px;margin-bottom:21px;}
#img{width:100px;float:left;}
#copy{height:auto;overflow:hidden;padding-left:100px;line-height:50px;}
#move{width:120px;height:40px;background:pink;position:fixed;right:0px;top:100px;cursor:pointer;font-family:courier;line-height:40px;text-align:center;}
#allmove{width:120px;height:40px;background:pink;position:fixed;right:0px;top:200px;cursor:pointer;font-family:courier;line-height:40px;text-align:center;}
#recovery{width:120px;height:40px;background:pink;position:fixed;right:0px;top:300px;cursor:pointer;font-family:courier;line-height:40px;text-align:center;}
</style>
<script type="text/javascript">
window.onload = function(){
var lis = images.getElementsByTagName('li');//获取所有的li
move.onclick = function(){
for(var i=0;i<lis.length;i++){
lis[i].style.transform = 'rotate('+(Math.ceil(Math.random()*90)-45)+'deg)';
}
return false;
}
allmove.onclick = function(){
var d = 0;
var inte = setInterval(function(){
document.body.style.transform = 'rotate('+d+'deg)';
d+=10;
if(d > 360){
clearInterval(inte);
}
},10)
}
recovery.onclick = function(){
for(var i=0;i<lis.length;i++){
lis[i].style.transform = 'rotate(0deg)';
}
return false;
}
}
</script>
</head>
<body>
<!-- 内容 start -->
<div id="all">
<!-- 头部 start -->
<div id="header">
<div id="logo"><img src="./sunli/logo.png" alt="" width="100%"></div>
<ul id="menu">
<li><a href="国内">国内</a></li>
<li><a href="国外">国外</a></li>
<li><a href="科技">科技</a></li>
<li><a href="生活">生活</a></li>
</ul>
</div>
<!-- 头部 end -->
<!-- 内容 start -->
<div id="section">
<ul id="images">
<li class="w"><a href=""><img src="./sunli/1.jpg" alt="" width="100%"></a></li>
<li class="w"><a href=""><img src="./sunli/2.jpg" alt="" width="100%"></a></li>
<li class="w"><a href=""><img src="./sunli/3.jpg" alt="" width="100%"></a></li>
<li id='one'><a href=""><img src="./sunli/4.jpg" alt="" width="100%"></a></li>
<li><a href=""><img src="./sunli/5.jpg" alt="" width="100%"></a></li>
<li><a href=""><img src="./sunli/6.jpg" alt="" width="100%"></a></li>
<li name="y"><a href=""><img src="./sunli/7.jpg" alt="" width="100%"></a></li>
<li name="y"><a href=""><img src="./sunli/8.jpg" alt="" width="100%"></a></li>
<li name="y"><a href=""><img src="./sunli/9.jpg" alt="" width="100%"></a></li>
</ul>
</div>
<!-- 内容 end -->
<!-- 底部 start -->
<div id="footer">
<div id="img"><img src="./sunli/logo.png" alt="" width="100%" height='50px'></div>
<div id="copy">© Copyright 2014. All Rights Reserved.Beijing</div>
</div>
<!-- 底部 end -->
</div>
<!-- 内容 end -->
<div id="move">Image</div>
<div id="allmove">Body</div>
<div id="recovery">Recovery</div>
<script type="text/javascript">
var images = document.getElementById('images');
//通过类名的方式
var ws = document.getElementsByClassName('w');
/*for (var i = 0; i < ws.length; i++) {
ws[i].style.background = 'blue';
};
*/
//通过属性name的值
var ys = document.getElementsByName('y');
/*for (var i = 0; i < ys.length; i++) {
ys[i].onclick = function()
{
alert('12345');
}
};
*/
//获取父级里面所有的子节点
// var childs = images.childNodes;
//获取父级里面所有的子元素节点
// var childs = images.children;
//获取父级里面的第一个子节点
// var firsts = images.firstChild;
//获取父级里面第一个子元素节点
// var firs = images.firstElementChild;
//获取最后一个节点
//var lasts = images.lastChild;
//获取最后一个元素节点
//var las = images.lastElementChild;
//设置一个id
var one = document.getElementById('one');
//获取上一个节点
var prev = one.previousSibling;
//获取上一个元素节点
var prevs = one.previousElementSibling;
//获取下一个节点
var nexts = one.nextSibling;
//获取下一个元素节点
var net = one.nextElementSibling;
//获取父级的节点
var parents = one.parentNode;
var pars = one.parentElement;
//获取下一个节点的下一个节点
var lis = one.nextElementSibling.nextElementSibling;
// console.log(parents);
// console.log(lis);
//特殊节点的获取
// var docs = document.doctype;
//获取html
// var hs = document.documentElement;
//head
// var heads = document.head;
//title
// var titles = document.title;
//body
var bodys = document.body;
// console.log(bodys);
// bodys.style.background = 'blue';
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题闪烁</title>
</head>
<body>
<script type="text/javascript">
var i =0;
setInterval(function(){
i++;
//设置标题内容
//注意 想要添加空格需要改为全角 这样就会解析为空白字符了
if(i%4==0)
{
document.title='[ ]';
}
else if(i%4==1)
{
document.title='[新 ]';
}
else if(i%4==2)
{
document.title='[新消 ]';
}
else
{
document.title='[新消息]';
}
},1000);
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点的集合</title>
</head>
<body>
<form action="">
用户名: <input type="text" name='uname'>
邮箱: <input type="text" name='email'>
<select name=" " id="">
<option value=" ">请选择</option>
</select>
</form>
<form action="">
手机号: <input type="text" name='phone'>
男:<input type="radio" name='sex'>
女:<input type="radio" name='sex'>
</form>
<form action="">
密码: <input type="text" name='pass'>
</form>
<a href="">百度</a>
<a href="">淘宝</a>
<a href="">腾讯</a>
<img src="./sunli/1.jpg" alt="" width='400px' height='300'>
<img src="./sunli/2.jpg" alt="" width='400px' height='300'>
<img src="./sunli/3.jpg" alt="" width='400px' height='300'>
<script type="text/javascript">
//获取form集合
var forms = document.forms;
// console.log(forms);
//elemets
var ipus = forms[0].elements;
// console.log(ipus);
/*ipus[0].onfocus = function()
{
alert('123456');
}*/
//name属性名对应的值
// var names = forms[1].phone;
var sexs = forms[1].sex;
// console.log(sexs);
/*names.onfocus = function()
{
alert('asdfg');
}*/
//获取a链接集合 返回的结果是一个数组
var as = document.links
// console.log(as);
for (var i = 0; i < as.length; i++) {
as[i].onclick = function()
{
location.href='';
return false;
}
};
//获取所有的img
var imgs = document.images;
setInterval(function(){
// console.log(imgs);
for (var i = 0; i < imgs.length; i++) {
/*imgs[i].onclick = function()
{
this.src = './sunli/5.jpg';
}*/
imgs[i].src = './sunli/'+rand(1,13)+'.jpg';
};
},1000)
function rand(m,n){
return Math.ceil(Math.random()*(n-m+1))+(m-1);
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async=false;
xmlDoc.load("04_one.xml");
var res = xmlDoc.getElementsByTagName('name');
var arr = [];
for (var i = 0; i < res.length; i++) {
// console.log(res[i].innerHTML);
arr[i] = res[i].innerHTML;
};
console.log(arr);
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var str = "<?xml version='1.0' encoding='utf-8'?> <body> <movie abc='100'> <name>战狼</name> <country>中国</country> </movie> <movie> <name>速度与激情8</name> <country>美国</country> </movie> <movie> <name>传奇</name> <country>美国</country> </movie> </body>";
var parser=new DOMParser();
var xmlDoc=parser.parseFromString(str,"text/xml");
var cons = xmlDoc.getElementsByTagName('country');
// console.log(cons);
for (var i = 0; i < cons.length; i++) {
console.log(cons[i].innerHTML);
};
</script>
</body>
</html>为了便于快速查找使用,因此所有知识点尽可能以代码示例的方式展示
<?xml version='1.0' encoding='utf-8'?>
<body>
<movie abc='100'>
<name>战狼</name>
<country>中国</country>
</movie>
<movie>
<name>速度与激情8</name>
<country>美国</country>
</movie>
<movie>
<name>传奇</name>
<country>美国</country>
</movie>
</body>