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">/*DOMdocument 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 是 永远是 #text4.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.body2.获取html元素document.documentElement3.获取声明节点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']的方式获取属性节点获取属性值，使用nodeValue2.在 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宽度增大10pxvar 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.调用对象只能是docuemnt3.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>
