一：DOM操作
1、 介绍
dom: document object model 文档对象模型
DOM可以让我们通过javascript语言对html文档进行增、删、改、查操作。
为了方便javascript语言通过dom操作html文档比较方便，把html文档的各个组成内容划分为各种节点(对象)：
文档节点(document)，其是html根节点的父节点
元素节点
文本节点
属性节点
注释节点
以下的代码都以这个为例子程序：
1. <html> 2. <head> 3. <title>这是一个title</title> 4. </head> 5. <body> 6. <h1>例子程序</h1> 7. <input id="username" name="username" type="text" value="sihai"/> 8. <input id="password" name="password" type="text" value="123"/> 9. </body> 10. 11. </html>
2、元素节点的获取
具体操作方法：
1. ① document.getElementById(id属性值); 2. 每次只返回一个具体元素节点对象 3. ② document.getElementsByTagName(tag标签名称); 4. 每次返回一个“集合列表”对象，可以通过下标方式变为具体元素对象： 5. 列表[下标] 或 列表.item(下标) 6. ③ document.getElementsByName(name属性值);不推荐使用，有浏览器兼容问题, 7. 有的浏览器针对form表单域才可以使用该方法。 8. 通常应用在form表单里边，返回的信息同
1. var username = document.getElementById("username"); 2. console.log(username); 3. 4. var in = document.getElementsByTagName("input"); 5. console.log(in[0]); 6. console.log(in.item[0]);
3、文本节点获取
<div>hello JavaScript</div>• 1
需要借助div元素节点再获得其内部的文本节点:
div元素节点对象.firstChild; //或调用lastChild，获得节点内部的第一个子节点
文本节点.nodeValue; //获得文本节点对应的文本信息
1. var h = document.getElementByTagName("h1"); 2. console.log(h[0].firstChild);//<TextNode textContent="例子程序"/> 3. console.log(h[0].lastChild.nodeValue);//例子程序
4、子节点/兄弟节点
1. firstChild、lastChild:父节点获得第一个/最后一个子节点 2. nextSibling:获得下一个兄弟节点 3. previousSibling:获得上一个兄弟节点 4. childNodes:父节点获得内部全部的子节点信息 5. length: 获得“集合列表”的长度 6. 7. **注意：**以上属性在主流浏览器(火狐firefox、chrome、safari、opera、IE9以上)中会给考虑空白节点(回车、空格)。在IE(6/7/8)浏览器中不考虑空白节点。 8. 空白节点本质：其是文本节点
1. <ul> 2. <li>上海</li> 3. <li>广州</li> 4. </ul> 5. var u = document.getElementByTagName("ul"); 6. console.log(u[0].childNodes.length);//5 7. console.log(u.firstChild); 8. console.log(u.firstChild.nextSibling);
5、父节点
节点.parentNode;• 1
6、属性操作
6.1、属性值操作：
1. ① 获取属性值 2. 元素节点node.属性名称; //只能操作w3c规定的属性 3. 元素节点node.getAttribute(属性名称); //规定的 和 自定义的属性都可以获取 4. ② 设置(修改)属性值 5. 元素节点node.属性名称 = 值; //只能操作w3c规定的属性 6. 元素节点node.setAttribute(名称，值); //规定的 和 自定义的属性都可以设置
6.2、属性节点获取：
1. var attrlist = 元素节点对象.attributes; //以“数组列表”形式返回对应节点内部的全部属性节点信息 2. attrlist.属性名称; //获得具体属性节点 3. 4. 获得节点类型nodeType： 5. 节点.nodeType: 6. 1------> 元素节点 7. 2------> 属性节点 8. 3------> 文本节点 9. 9------> 文档节点
1. var in = document.getElementByTagName("input")[0]; 2. console.log(in.attributes);//[type="text" , name="username",value="sihai"] 3. console.log(in.attributes.type);//type="text" 4. console.log(in.attrubutes.name.nodeType);//2 属性节点
7、节点创建和追加
1. 节点创建 2. 元素节点：document.createElement(tag标签名称); 3. 文本节点：document.createTextNode(文本内容); 4. 属性设置：node.setAttribute(名称，值); 5. 节点追加： 6. 父节点.appendChild(子节点); 7. 父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边 8. 父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点
8、节点复制
1. 被复制节点.cloneNode(true/false); 2. true:深层复制(本身节点 和 其内部节点) 3. false:浅层复制 (本身节点)
9、节点删除
1. 父节点.removeChild(子节点); 2. 子节点.parentNode.removeChild(子节点);
10、dom对css样式的操作
1. <div style=”width:300px;height:200px; background-color:pink;”></div> 2. ① 获取css样式 3. 元素节点.style.css样式名称; 4. divnode.style.width; //获取宽度样式 5. ② 设置css样式(有则修改、没有则添加) 6. 元素节点.style.css样式名称 = 值; 7. divnode.style.width =‘500px’;设置div宽度样式 8. 9. 注意： 10. ① dom操作css样式只能操作“行内样式”(css样式分为 行内、内部、外部) 11. ② 操作复合样式例如background-color/border-left-color，font-size 12. 需要变为backgroundColor、borderLeftColor，fontSize中恒线去掉，后边首字母大写。(原因：javascript的变量命名规则不允许有“-”中横线)
二、BOM
1. DOM：document object model(文档对象模型) 2. BOM:browser object model(浏览器对象模型) 3. 通过BOM技术可以模拟浏览器对页面进行各种操作：创建子级标签页面、操作历史记录页面、操作地址栏等等
$(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); });
