JavaScript对象 BOM对象及 DOM对象-优快云博客

本文链接：https://blog.youkuaiyun.com/ljq961206/article/details/81321946

JavaScript对象

js内部的一些语法对象。

其中包括

String对象：处理字符串

Array对象：存储多个值，多种值

Date对象：处理日期和时间

等等

各个对象中都有相应的方法和属性可以使用。

全局函数不基于某个对象，可以在script中直接调用。

BOM对象

浏览器内部的一些对象

Navigator 对象：包含浏览器信息的对象

返回浏览器的信息，因为考虑的浏览器兼容问题，所以还有点用。

Screen对象：显示与屏幕有关数据的对象

属性：长宽高什么的，没什么用

History对象：包含用户访问的URL值的对象

重要方法：history.back(); 和 history.forward(); //返回上一个 URL 前进到下一个URL

location对象：包含当前URL信息的对象

重要属性：location.href 该属性返回当前URL值，也可以赋值成想要的URL值。

window对象：包含浏览器窗口的信息和方法的对象

属性：包括navigator，screen， history ，location等等的方法

方法： alert（）对话框 confirm（）确认框 open（）打开新窗口 close（）关闭该窗口

setinterval（）设置间隔调用循环执行代码 setTimeout 在多少毫秒后执行一次代码

DOM对象

对于标记型文档进行操作的对象。

首先应该将标记型文档的内容都进行封装成对象，包括标签，标签的属性和方法

其次将标签型文档解析，首先根据HTML的标签层级结构，会在内存中分配一个树形结构的空间，这样每个节点就可以联系在一起。就可以实现对于标记型文档的操作了。

document对象

常用方法：

document.write() ：向页面显示内容

document.getElementById("id")：通过id获取对象

document.getElementByTagName("element")：通过标签获取对象（返回的是一个数组）

document.getElementByName("name"):通过name来获取对象（返回的是一个数组）

如果想要获取一个值得话，与数组访问相同

元素对象

在将元素全部封装成对象后,按树形结构存储在内存中,所以需要创建节点,插入删除节点等来实现相应的效果

常用方法:

1.方法document.createElement("li"); 创建元素节点,引号里填元素

2.方法document.createTextNode("s");创建文本节点引号里填文本

3.方法 li.appendChild() ; 添加子节点到li中 , 括号里添加文本节点

4.方法insertBefore(newnode,oldnode); 将新节点插入到旧节点前

5.方法ul.removechild(li); 通过父节点删除该节点,括号里添加的是删除的节点

6.方法ul.replaceChild(newnode,oldnode); 通过父节点替换节点

实例

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<ul id="ul1">
		<li id="li1">l</li>
		<li id="li2">j</li>
		<li id="li3">s</li>
	</ul>
	<input type="button" name="" value="join" onclick="join1();">
</body>
<script type="text/javascript">
	function join1() {
		//获取li3元素
	var li3 = document.getElementById('li3');
		//获取ul1元素
	var ul1 = document.getElementById("ul1");
		//创建li4元素,方法document.createElement("li");引号里填元素

	var li4 = document.createElement("li");
		//创建文本节点  方法document.createTextNode("shuai");引号里填文本
	var text1 = document.createTextNode("q");
		//将文本节点添加到li4节点中 方法 li.appendChild() 括号里添加文本节点
	li4.appendChild(text1);
		//将li4插入到li3之前  insertBefore(newnode,oldnode)
	ul1.insertBefore(li4,li3);
	}

</script>
</html>

使用js语言重要的是使用节点,操作节点进行数据的删除添加等.