1.Dom基础
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom基础</title>
</head>
<body>
<div id="wp" class="aa bb cc">
黄梅时节家家雨
<p id="cont">清明时节雨纷纷</p>
<!-- <p>注释</p> -->
<p>路上行人欲断魂</p>
</div>
<ul id="list">
<li>一片</li>
<li>两片</li>
<li>三四片</li>
<li>五片</li>
<li>六片</li>
<li>七八片</li>
</ul>
</body>
</html>
<script type="text/javascript">
/*
DOM
document object model：文档对象模型，dom中提供了很多的属性很多方法，方便对html元素，进行 添加 删除 修改 查找 拷贝等操作
DOM 其实就是一个文档结构，浏览器加载dom结构的时候，会在底层把dom转化为一个树状结构，俗称 DOM树
DOM中的每一个元素，就是一个节点，根据节点的结构，可以分为 根节点 父节点 子节点
元素节点 nodeType 为 1，每一个HTML标签都是一个元素节点，例如 div，p，span
属性节点 nodeType 为 2，每一个HTML标签都一定的属性，例如 id calss 等
文本节点 nodeType 为 3，元素节点或者属性节点中的文本内容
注释节点 nodeType 为 8，html结构中的注释 <!-- comment -->
文档节点 nodeType 为 9，表示整个文档 DOM树的根节点，即为 document
文档声明节点 nodeType 为 10，表示文档声明
文档树的根节点是 document
*/
console.log(document.nodeType,document.nodeName,document.nodeValue);
var wp = document.getElementById("wp");
var cont = document.getElementById("cont");
console.log(wp.nodeType,wp.nodeName,wp.nodeValue);
console.log(cont.nodeType,cont.nodeName,cont.nodeValue);
/*
nodeName
nodeName 属性，表示节点的名称
1.元素节点的 nodeName 是 元素的标签名，大写
2.属性节点 的 nodeName 是 属性名
3.文本节点 的 nodeName 是 永远是 #text
4.document 文档节点，nodeName 永远是 #document
*/
/*
获取元素的属性，使用attributes
*/
console.log(wp.attributes['id'].nodeName);
console.log(wp.childNodes[0].nodeName,wp.childNodes[0].nodeValue);
/*
nodeValue
文本节点的 nodeValue 是文本节点包含的内容
属性节点的 nodeValue 是属性的值
对于document和元素节点，他们的nodeValue是 null
文本节点的前后换行符，会作为文本节点的nodeValue输出，换行符不会作为新的节点
nodeType 输出节点的类型
*/
console.log(wp.attributes['id'].nodeValue,wp.attributes['class'].nodeValue);
console.log(wp.childNodes);
/*
childNodes 获取调用对象的所有第一层子节点
标准浏览器和IE8以上，会把换行作为一个文本节点处理
IE6/7/8 不会把换行作为一个文本节点处理
children 获取调用对象的所有第一层元素节点
*/
var list = document.getElementById("list");
console.log(list.childNodes);
console.log(list.children);
</script>
2.特殊的节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>特殊节点</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
/*
1.获取body元素
document.body
2.获取html元素
document.documentElement
3.获取声明节点
document.doctype
*/
var body = document.body;
console.log(body);
body.innerHTML='千锤万击出深山';
var html = document.documentElement;
console.log(html.childNodes);
console.log(html.nodeName);
var docType = document.doctype;
console.log(docType);
</script>
3.获取元素节点的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素节点的内容</title>
</head>
<body>
<div id="wp" style="display: none;">
土木堡之变
<p>于谦</p>
<p>朱祁镇</p>
<p>朱祁钰</p>
<p>朱见深</p>
</div>
</body>
</html>
<script type="text/javascript">
/*
nodeVlaue不能获取元素节点的内容
获取元素节点内容的方法有三种
1.innerHTML
获取元素当中的所有内容，获取的是一个字符串，包括html结构，还可以把制表符，空格一并获取，当元素设置隐藏的时候，依然可以获取
2.innerText
获取元素当中的所有文本内容，获取的是一个字符串，不包括html结构，还可以把制表符，空格一并获取，当元素设置隐藏的时候，依然可以获取
3.textContent(IE8以上支持)
获取元素当中的所有文本内容，获取的是一个字符串，不包括html结构，还可以把制表符，空格一并获取，当元素设置隐藏的时候，依然可以获取
*/
var wp = document.getElementById("wp");
console.log(wp.innerHTML);
console.log(wp.innerText);
console.log(wp.textContent);
</script>
4.获取元素的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取元素的属性</title>
<style type="text/css">
* {
margin:0;
padding: 0;
}
.abc {
border: 1px #f00 solid;
}
</style>
</head>
<body>
<input class="abc" type="text" name="username" id="wp" value="" />
<button type="button" id="btn">点击改变属性</button>
<button type="button" id="del">点击删除属性</button>
<button type="button" id="only">添加属性值不唯一的属性</button>
</body>
</html>
<script type="text/javascript">
var wp = document.getElementById("wp");
/*
通过元素节点获取节点上的属性
attributes
1.在标准浏览器和ie高版本中，attributes里面存储的是写在行间的所有属性，他是一个map对象，可以通过下标的方式和obj['key']的方式获取属性节点
获取属性值，使用nodeValue
2.在 ie 6 7 8 的时候，存储的是该元素所有具有实际值的标签属性
3.在不同浏览器中，存储的顺序是不一样的
*/
console.log(wp.attributes[0].nodeValue,wp.attributes['type']);
console.log(wp.attributes);
/*
通过 getAttribute(属性名) 来获取属性值
注意，获取class的时候
1.在标准浏览器和 IE8及其以上，获取的是元素的类名
2.IE8以下必须使用className
*/
console.log(wp.getAttribute('type'));
var cName = wp.getAttribute('class')||wp.getAttribute('className');
console.log(cName);
/*
通过setAttribute('属性名','属性值 属性值 属性值')来设置属性的值，如果属性名存在，则是修改属性的值，如果属性名不存在，则是添加新的属性
如果要添加多个属性值，用空格隔开
*/
wp.setAttribute('value','萧燕燕');
wp.setAttribute('aa','耶律休哥');
var btn = document.getElementById("btn");
var del = document.getElementById("del");
btn.onclick = function(){
wp.setAttribute('value','耶律德光');
};
/*
使用removeAttribute('属性名') 来删除具体的某个属性
*/
del.onclick = function(){
wp.removeAttribute('class');
};
var only = document.getElementById("only");
only.onclick = function(){
wp.setAttribute('class','abc sdf er df');
console.log(wp.aaa);
console.log(wp.className);
console.log(wp.aa);
console.log(wp.type);
console.log(wp.getAttribute('aaa'));
};
/*
通过.和[]方式给元素添加属性
1. .和[]方式只能获取 .和[] 设置的属性，不能获取写在行间的自定义属性，可以获取标签自带的行间属性
2. 获取class的时候，需要使用 className来获取，因为class是一个关键字，所以使用className wp替代，例如 wp.className，wp['className']
3. 通过 .和[]方式 设置的值，只能通过.和[]方式来获取，不能通过getAttribute(属性名) 获取
*/
wp.aaa = '耶律斜轸';
</script>
5.css属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css属性</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.wp {
width:200px;
height: 200px;
background: #04BE02;
margin: 40px auto 0;
border: 1px #f00 solid;
font-size:50px;
}
.wp::first-letter {
font-size:60px;
}
</style>
</head>
<body>
<div id="wp" class="wp" style="font-size:50px;">
乱花渐欲迷人眼
</div>
<div>
<button id="btn1">设置颜色</button>
<button id="btn2">获取宽度</button>
<button id="btn3">获取字号</button>
<button id="btn4">IE获取宽度</button>
<button id="btn5">点击变宽</button>
</div>
</body>
</html>
<script type="text/javascript">
// var wp = document.getElementsByClassName('wp')[0];
var wp = document.getElementById("wp");
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
wp.style.background = '#0f0';
console.log(wp.style.width, wp.style.background);
};
btn2.onclick = function(){
var w = getComputedStyle(wp).width;
console.log(w);
};
/*
1.通过style 只能获取写在行间的样式表中的属性
如何获取写在css中的样式：
1. 在标准浏览器下，通过 getComputedStyle(元素对象，null) 来获取元素的css属性。该方法的第二个参数默认为null，特可以传入伪类或者伪元素选择器，如果传入的伪类或者伪元素选择器，则获取的css属性是伪类或者伪元素选择器的属性 ：getComputedStyle(元素对象).属性名
2. 在ie中，需要通过 currentStyle['属性名'] 来获取css中的属性
*/
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
var size = getComputedStyle(wp,'::first-letter').fontSize;
alert(size);
};
var btn4 = document.getElementById("btn4");
btn4.onclick = function(){
var w = wp.currentStyle['width'];
alert(w);
};
// 练习，每点击一次，div宽度增大10px
var btn5 = document.getElementById("btn5");
btn5.onclick = function(){
// var w = wp.currentStyle?wp.currentStyle['width']:getComputedStyle(wp).width;
var w = getCssAttr(wp,'width');
var num = parseInt(w);
num+=10;
wp.style.width = num+'px';
};
//兼容写法，获取元素的属性
function getCssAttr(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
</script>
6.Dom获取元素的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom获取元素的方法</title>
<style type="text/css">
.aa {
border:1px #f00 solid;
}
</style>
</head>
<body>
<input type="text" name="username" value="石重贵" />
<input type="text" name="username" value="石敬瑭" />
<input type="text" name="username" value="耶律德光" />
<a href="###" name="username">用户名</a>
<ul id="list">
<li>龙须虎</li>
<li>四不像</li>
<li class="jiang">姜子牙</li>
<li>黄天化</li>
</ul>
<button type="button" id="btn">点击</button>
</body>
</html>
<script type="text/javascript">
/*
document.getElementById()
getElementsByTagName()
getElementsByClassName() 新方法，IE低版本不支持
--------------------------------
getElementsByName() 通过name获取元素，都支持
以上方法都是动态方法
*/
var ele = document.getElementsByName('username');
console.log(ele);
/*
以下方法都是静态方法
querySelector(选择器) 新方法，ie低版本不支持，选择满足条件的第一个元素
querySelectorAll(选择器) 新方法，ie低版本不支持，选择满足条件的所有元素
注意：
1.参数是选择器，所有的选择器都支持
2.调用对象只能是docuemnt
3.querySelectorAll(选择器)[0]==querySelector(选择器)
4.支持多个选择器，用英文逗号隔开
5.IE6、7、8 不支持
*/
// 获取第一个input，通过标签名选择器
var input = document.querySelector('input,a');
console.log(input);
var inputs = document.querySelectorAll('input,a');
console.log(inputs);
var list = document.querySelectorAll('#list>li');
console.log(list);
var li = document.querySelector('#list>li:nth-child(2)');
console.log(li);
var jiang = document.querySelector('.jiang');
console.log(jiang);
/*
动态和静态的区别
*/
/* var act = document.getElementsByTagName('li')[0];
var sti = document.querySelector('#list>li');
act.className = 'aa';
console.log(act,sti); */
var btn = document.getElementById("btn");
var ul = document.getElementById("list");
var li1 = ul.getElementsByTagName('li');
var li2 = document.querySelectorAll("#list>li");
console.log('=========================');
console.log(li1.length);
console.log(li2.length);
for(var i=0;i<5;i++){
var li = document.createElement('li');
li.innerHTML = '换行'+i;
ul.appendChild(li);
}
console.log('=========================');
console.log(li1.length);
console.log(li2.length);
</script>