一：DOM操作

##1、介绍 ##
dom: document object model 文档对象模型
DOM可以让我们通过javascript语言对html文档进行增、删、改、查操作。

为了方便javascript语言通过dom操作html文档比较方便，把html文档的各个组成内容划分为各种节点(对象)：
文档节点(document)，其是html根节点的父节点
元素节点
文本节点
属性节点
注释节点

以下的代码都以这个为例子程序：

<html><head><title>这是一个title</title></head><body><h1>例子程序</h1><input id="username" name="username" type="text" value="sihai"/><input id="password" name="password" type="text" value="123"/></body></html>

2、元素节点的获取

具体操作方法：

① document.getElementById(id属性值);每次只返回一个具体元素节点对象
② document.getElementsByTagName(tag标签名称);每次返回一个“集合列表”对象，可以通过下标方式变为具体元素对象：
列表[下标] 或 列表.item(下标)
③ document.getElementsByName(name属性值);不推荐使用，有浏览器兼容问题,有的浏览器针对form表单域才可以使用该方法。通常应用在form表单里边，返回的信息同

var username = document.getElementById("username");
console.log(username);var in = document.getElementsByTagName("input");
console.log(in[0]);
console.log(in.item[0]);

3、文本节点获取

<div>hello JavaScript</div>

需要借助div元素节点再获得其内部的文本节点:
div元素节点对象.firstChild; //或调用lastChild，获得节点内部的第一个子节点
文本节点.nodeValue; //获得文本节点对应的文本信息

var h = document.getElementByTagName("h1");
console.log(h[0].firstChild);//<TextNode textContent="例子程序"/>
console.log(h[0].lastChild.nodeValue);//例子程序

4、子节点/兄弟节点

firstChild、lastChild:父节点获得第一个/最后一个子节点
nextSibling:获得下一个兄弟节点
previousSibling:获得上一个兄弟节点
childNodes:父节点获得内部全部的子节点信息
length: 获得“集合列表”的长度**注意：**以上属性在主流浏览器(火狐firefox、chrome、safari、opera、IE9以上)中会给考虑空白节点(回车、空格)。在IE(6/7/8)浏览器中不考虑空白节点。
空白节点本质：其是文本节点

<ul><li>上海</li><li>广州</li>
</ul>
var u = document.getElementByTagName("ul");
console.log(u[0].childNodes.length);//5
console.log(u.firstChild);
console.log(u.firstChild.nextSibling);

5、父节点

节点.parentNode;

6、属性操作

6.1、属性值操作：

①    获取属性值
元素节点node.属性名称;   //只能操作w3c规定的属性
元素节点node.getAttribute(属性名称);  //规定的 和 自定义的属性都可以获取
②   设置(修改)属性值
元素节点node.属性名称 = 值;  //只能操作w3c规定的属性
元素节点node.setAttribute(名称，值); //规定的 和 自定义的属性都可以设置

6.2、属性节点获取：

var attrlist = 元素节点对象.attributes;  //以“数组列表”形式返回对应节点内部的全部属性节点信息
attrlist.属性名称;   //获得具体属性节点获得节点类型nodeType：
节点.nodeType:
1------> 元素节点
2------> 属性节点
3------> 文本节点
9------> 文档节点

var in = document.getElementByTagName("input")[0];
console.log(in.attributes);//[type="text" , name="username",value="sihai"]
console.log(in.attributes.type);//type="text"
console.log(in.attrubutes.name.nodeType);//2 属性节点

7、节点创建和追加

节点创建
元素节点：document.createElement(tag标签名称);
文本节点：document.createTextNode(文本内容);
属性设置：node.setAttribute(名称，值);
节点追加：
父节点.appendChild(子节点);父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点

8、节点复制

被复制节点.cloneNode(true/false);
true:深层复制(本身节点 和 其内部节点)
false:浅层复制 (本身节点)

9、节点删除

父节点.removeChild(子节点);
子节点.parentNode.removeChild(子节点);

10、dom对css样式的操作

<div style=”width:300px;height:200px; background-color:pink;”></div>
①   获取css样式元素节点.style.css样式名称;divnode.style.width;  //获取宽度样式
②   设置css样式(有则修改、没有则添加)元素节点.style.css样式名称 = 值;divnode.style.width =‘500px’;设置div宽度样式注意：
①   dom操作css样式只能操作“行内样式”(css样式分为 行内、内部、外部)
②   操作复合样式例如background-color/border-left-color，font-size
需要变为backgroundColor、borderLeftColor，fontSize中恒线去掉，后边首字母大写。(原因：javascript的变量命名规则不允许有“-”中横线)
③ 修改样式，有则修改、无则新增,修改后的样式变为行内样式

二、BOM

DOM：document  object model(文档对象模型)
BOM:browser  object  model(浏览器对象模型)
通过BOM技术可以模拟浏览器对页面进行各种操作：创建子级标签页面、操作历史记录页面、操作地址栏等等

JavaScript教程之DOM和BOM相关推荐

JavaScript实战操作（DOM，BOM）
JS语法页面文档对象模型浏览器对象模型 JS ECMAScript DOM BOM API 应用程序编程接口,就是一个工具,以便于能轻松实现想要完成的功能 Web API Web API是浏览器提 ...
JavaScript中的DOM和BOM
javascript组成: ECMAScript 基本语法. BOM (浏览器对象模型) DOM (文档对象模型) BOM(borwser Object Model) 浏览器对象模型:使用对象描述了浏 ...
JavaScript 内容总结(DOM和BOM)(一)DOM基础
JavaScript 内容总结(JavaScript高级程序设计) DOM简介获取元素事件基础操作元素节点操作 1.DOM简介编程接口:处理网页的结构样式内容 DOM树文档:一个页面就 ...
js前端开发案例教程之DOM购物车（动手实践：购物车）
js前端开发案例教程之 DOM购物车(动手实践:购物车) html和css <!DOCTYPE html> <html><head><meta charse ...
javascript技术教程蔡敏_程序员都必掌握的前端教程之JavaScript基础教程（上）
阅读本文约需要10分钟,您可以先关注我们,避免下次无法找到. 本篇文章成哥继续带大家来学习前端教程之JavaScript,网页的动态事件基本上都是靠它来实现的.下面我们就一起来学习内容吧! 01 Ja ...
javascript原生事件句柄、BOM、DOM对象属性方法总结
javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄事件句柄类型说明 onabort 事件句柄图像加载被中断 onblur 事件句柄元素失去焦点 onfocus 事 ...
好程序员前端教程之JavaScript闭包和匿名函数的关系详解...
好程序员前端教程之JavaScript闭包和匿名函数的关系详解本文讲的是关于JavaScript闭包和匿名函数两者之间的关系,从匿名函数概念到立即执行函数,最后到闭包.下面一起来看看文章分析,希望你 ...
JavaScript核心 DOM 和 BOM操作
JavaScript核心 DOM 和 BOM操作 Web APIs 简介 1. Web APIs 和 JS 基础关联性 1.1 JS 的组成 1.2 JS 基础阶段以及 Web APIs 阶段 JS ...
html语言面向对象,自学html5教程之JavaScript面向对象
原标题:自学html5教程之JavaScript面向对象 1.对象是什么面向对象编程(Object Oriented Programming,缩写为 OOP)是目前主流的编程范式. 它将真实世界各种 ...

JavaScript教程之DOM和BOM