JavaScript Basics (2)

In the previous javascript basics (1), some basic grammars of javascript were briefly explained. This article then introduces some commonly used objects and their methods in javascript.

As we mentioned in the previous article, javascript consists of three parts: the core (ECMAScript) document object model (DOM) and the browser object model (BOM)

Browser Object Model (BOM: Brower Object Model)

1.Window   window object (*****)

If the document contains frames ( frame or iframe tags), the browser creates a window object for the HTML document and an additional window object for each frame

2.NavigatorObjects related to the browser version (**)

-------- userAgent gets browser-related information
-------- window.navigator.userAgent window can be omitted or not written

3.ScreenObjects related to the screen (-*)

4.HistoryRelated to browser history (**)

The History object contains URLs that the user has visited (in the browser window) .

The History object is part of the window object and can be accessed through the window.history property.

--------back() returns to the previous page
-------- forward() goes to the next page

--------go()
--------The parameter go(1) is equal to forward() go(-1) is equal to back()

5.LocationObjects associated with browser addresses (***)

The Location object contains information about the current URL .

The Location object is part of the Window object and can be accessed through the window.location property.

For the Location object, we only need to master the href attribute, which is used to set or return the complete URL .

* href gets and sets the browser's path (***)

6. Document object
* alert() pop-up prompt box
* confirm("parameter") query box
* Provide two buttons, confirm and cancel
* If the click is OK, return true, if the click cancels, return false

* moveBy() mobile browser

* setInterval("function", millisecond value) timing related
* Execute the function every millisecond value
* return the unique id value

* setTimeout("function", millisecond value)
* Execute a function once the millisecond value is reached
* return the unique id value

* clear timer
clearInterval(value of id)
clearTimeout()

* close() closes the browser window
* open() opens a browser window

* Attributes:
* opener returns a reference to the window that created this window. 
* win open() pops up the baidu window

In the baidu window, baidu.opener gets a reference to win.

* document object method
* document.getElementById("nameId"); Get the object that is the input tag

DOM (Document Object Model) Document Object Model (emphasis)

DOM parsing HTML

* Through the DOM method, all HTML (elements (tags), text, attributes) are encapsulated into objects.

is an application programming interface (API ) for HTML and XML . The DOM will plan the entire page as a document consisting of a hierarchy of nodes. Each part of an HTML or XML page is a derivative of a node.

Consider the following HTML page:

This code can be drawn into a node hierarchy using the DOM :

DOM node hierarchy

DOM 通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型

XML DOM - 针对 XML 文档的标准模型

HTML DOM - 针对 HTML 文档的标准模型

XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。

HTML DOM 是：

HTML 的标准对象模型

HTML 的标准编程接口

W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

XML DOM与HTML DOM的关系

XML DOM 定义了访问和处理 XML 文档的标准方法

HTML文档格式 符合XML语法标准，所以可以使用XML DOM API

在XML DOM每个元素 都会被解析为一个节点Node，而常用的节点类型又分为

元素节点  Element

属性节点  Attr

文本节点  Text

文档节点  Document

HTML DOM 定义了针对 HTML文档的对象，可以说是一套 更加适用于 JavaScript 技术开发 的API

HTML DOM是对XML DOM的扩展

进行 JavaScript DOM开发 可以同时使用 XML DOM和 HTML DOM

DOM想要操作标记型文档先解析。（解析器就是浏览器）

DHTML不是一种编程语言。

* html ：封装数据。 <span>展示给用户的数据</span>

* css ：设置样式（显示效果）

* dom ：操作HTML（解析HTML）

* js ：提供逻辑（判断语句，循环语句）

Document：代表整个文档，

Document对象的一些方法

document.getElementById("id的值"); 通过元素的id的属性获取元素（标签）对象。

document.getElementsByName("name属性值"); 通过名称获取元素对象的集合（返回数组）

document.getElementsByTagName("标签名称"); 通过标签名称获取元素对象的集合（返回数组）

<input type="text" id="nameId" value="zhangsan"/><br/>
<input type="text" name="username" value="zhaosi"/><br/>
<input type="text" name="username" value="wangwu"/><br/>
<input type="text" name="username" value="ermazi"/><br/>

var input = document.getElementById("nameId");
alert(input.value);
zhangsan
		
var inputs = document.getElementsByName("username");
alert(inputs.length);
for(var i=0;i<inputs.length;i++){
var input1 = inputs[i];
 alert(input1.value);
}
		
var inputs2 = document.getElementsByTagName("input");
alert(inputs2.length);

write("文本的内容（html的标签）") 把文本内容写到浏览器上。

1. document.createElement("元素名称"); 根据传入的一个字符串的标签名来创建元素对象，返回的是一个元素对象。

2. document.createTextNode("文本内容")传入一个String类型的文本内容，创建文本对象，返回一个文本对象。

3. 父节点X. appendChild("子节点Y") 在X下添加一个子节点Y

<span id=""></span>
		示例：
	<ul>
		<li>北京</li>
		<li>上海</li>
		<li>广州</li>
	</ul>		
		/* 
			需求：在ul无序列表下，添加一个子节点。<li>深圳</li>
		*/
		
		// 创建元素对象
		var li = document.createElement("li");
		// 创建文本的对象
		var text = document.createTextNode("深圳");
		// 把文本对象添加到元素对象下面，作为子节点
		li.appendChild(text);
		// 获取ul
		var ul = document.getElementsByTagName("ul")[0];
		// 把元素对象添加ul的下面，作为子节点
		ul.appendChild(li);	

Element对象

<input type="text" id="nameId" value="zhangsan" />
	<ul id="ulId">
		<li>北京</li>
		<li>上海</li>
		<li>广州</li>
	</ul>

* 获取元素对象

* getAttribute("属性名称"); 获取属性的值

var input = document.getElementById("nameId");
alert(input.value);
alert(input.getAttribute("value"));

* setAttribute("属性名称","属性的值"); 设置或者修改属性的值

* removeAttribute("属性名称"); 删除属性

* 获取元素下的所有子节点（*****）

var ul = document.getElementById("ulId"); //获取到的子节点包含空格

var lis = ul.childNodes; 

 

* ul.getElementsByTagName(“li”);//获得ul下面所有li子节点

重点在与是谁调用：如果是document调用，返回的是元素对象，如果是元素对象调用，返回的则是子节点。

Node：节点对象

* nodeName ：节点名称

* nodeType ：节点类型

* nodeValue ：节点的值

* parentNode 获取父节点（永远是一个元素节点）

* parentNode 获取父节点

* childNodes 所有子节点 （有空格）

* firstChild 第一个子节点

* lastChild 最后一个子节点

* nextSibling 下一个兄弟节点

* previousSibling 上一个兄弟节点

* appendChild(node) 父节点调用，在末尾添加子节点

* insertBefore(new,old) 父节点调用，在指定节点之前添加子节点

* replaceChild(new,old) 父节点调用，替换节点

* removeChild(node) 父节点调用,删除节点

* cloneNode(boolean) 不是父节点调用,复制节点

* boolean ：如果是true，复制子节点 如果是false，不复制子节点，默认是false

* innerHTML ：获取和设置文本内容。

* innerHTML属性：

* 获取文本内容

* 设置文本内容

<span id="spanId">
		这是span的区域
	</span>
	
	<span id="spanId2"></span>

var span = document.getElementById("spanId");
		 alert(span.innerHTML);
		
		var span2 = document.getElementById("spanId2");
		span2.innerHTML = "<font color='red'>这是span的区域2</font>";

在javascript中常用的事件:

1. onclick  点击事件

2. onfocus 获取焦点

3. onblur  失去焦点

4. onkeydown 键被按下

5. onkeyup  键被抬起

6. onkeypress某个键盘的键被按下或按住

7. onmousedown某个鼠标按键被按下

8. onmouseup某个鼠标按键被松开

9. onmousemove  鼠标被移动

10. onmouseover鼠标被移到某元素之上

11. onmouseout鼠标从某元素移开

12. onload某个页面或图像被完成加载

13. onsubmit提交按钮被点击

14. onchange用户改变域的内容

事件案例：

<h3>获取焦点的事件</h3>
	
	输入姓名：<input type="text" name="username" onfocus="run()" onblur="run2()"/><span id="uspan"></span><br/>
	输入密码：<input type="password" name="password" /><span id="pspan"></span>

// 提示输入的信息
		function run(){
			var uspan = document.getElementById("uspan");
			uspan.innerHTML = "您只能输入特殊字符";
		}
		
		// 失去焦点的时候
		// 
		function run2(){
			// 获取用户输入的姓名
			// ajax，把用户输入的姓名，传到后台，在后台做匹配的操作，后台处理完成，返回结果。
			var uspan = document.getElementById("uspan");
			uspan.innerHTML = "用户名已存在";
		}