JavaScript基础(二)

在上一篇javascript基础(一)中对javascript的一些基础语法做了一个简要的说明,本篇文章接着介绍javascript中一些常用的对象及其方法。

在之前文章中我们提到过,javascript包含三部分:核心(ECMAScript)文档对象模型(DOM)和浏览器对象模型(BOM)

浏览器对象模型(BOM:Brower Object Model)

1.Window   窗口对象(*****)

如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象




2.Navigator 和浏览器版本相关的对象(**)
-------- userAgent 获取浏览器的相关的信息
--------window.navigator.userAgent window可以省略不写

3.Screen 和屏幕相关的对象(-*)

4.History 和浏览器历史相关(**)

History 对象包含用户(在浏览器窗口中)访问过的URL

History 对象是window对象的一部分,可通过window.history属性对其进行访问。


--------back() 返回上一个页面
-------- forward() 去下一个页面

--------go()
--------传参数 go(1) 等于forward()
go(-1) 等于back()

5.Location 和浏览器地址相关的对象(***)

Location 对象包含有关当前 URL 的信息。

Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

对于Location对象,我们只需要掌握href这个属性就可以,它的作用是设置或返回完整的URL


* href 获取和设置浏览器的路径(***)

6.Document对象
* alert() 弹出提示框
* confirm("参数") 询问框
* 提供俩按钮,确定和取消
* 如果点击是确定,返回true,如果点击取消,返回false

* moveBy() 移动浏览器

* setInterval("函数",毫秒值) 定时相关的
* 每隔毫秒值执行一次函数
* 返回唯一的id值

* setTimeout("函数",毫秒值)
* 到了毫秒值后执行一次函数
* 返回唯一的id值

* 清除定时
clearInterval(id的值)
clearTimeout()

* close() 关闭浏览器的窗口
* open() 打开浏览器窗口

* 属性:
* opener 返回对创建此窗口的窗口的引用。 
* win  open() 弹出baidu的窗口

在baidu窗口中  baidu.opener 得到了win的引用。

* document对象方法
* document.getElementById("nameId"); 获取到是input标签的对象

DOM (Document Object Model)文档对象模型(重点)

DOM解析HTML

* 通过DOM的方法,把HTML全部(元素(标签)、文本、属性)都封装成了对象。

HTML 和 XML 的应用程序接口(API)。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。

请考虑下面的 HTML 页面:


这段代码可以用 DOM 绘制成一个节点层次图:

DOM 节点层次图


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 = "用户名已存在";
		}


 
  

猜你喜欢

转载自blog.csdn.net/huangyuhuangyu/article/details/74780224