1. 技术文章
  2. JavaWeb（4）-JS对象_bom,dom,document,element,node

JavaWeb（4）-JS对象_bom,dom,document,element,node

由 不打扰是莪最后的温柔 提交于 2020-02-07 00:50:10

JS对象_2

js的bom对象

browser object model浏览器对象模型

对象：

navigator

获取客户机（浏览器）的信息navigator.appName

screen

获取屏幕的信息screen.width,screen.height

location

请求url地址，href属性（获取请求的url地址location.href设置url地址）

history

请求的url的历史记录history.back() history.go(-1)到访问的上一个页面、 history.forward() history.go(1)到访问的下一个页面

window

顶层对象。所有的bom对象都是在window里边操作的
属性：opener（获取创建当前窗口的窗口）var w = window.opener
方法：
alert()：页面弹出一个框，显示内容
confirm()：确认框

var flag = windows.confirm("是否确认删除？");
//返回值
if(flag == true){}

prompt()：输入对话框

window.prompt("显示的内容","输入框中的默认值");

open()：打开一个新的浏览器窗口

window.open("新窗口的地址","","窗口的特征（宽高）width=200,height=300");

close()：关闭窗口window.close()浏览器兼容性差
setInterval()：指定周期内调用函数

window.setInterval("js代码",毫秒数);

setTimeout()：在指定的毫秒数之后执行，只执行一次

window.setTimeout("js代码",毫秒数);

clearInterval()：清除setInterval设置的定时器。根据setInterval的返回值

var id = setInterval("alert('a')",3000);
function clear(){
	clearInterval(id);
}

clearTimeout()：清除setTimeout设置的定时器。根据setTimeout的返回值

var id = setTimeout("alert('a')",3000);
function clear(){
	clearTimeout(id);
}

js的dom对象

document object model：文档对象模型
文档：超文本标记文档（html，xml）
使用js里面提供的对象的属性和方法对标记型文档进行操作。

需要把html里边的标签、属性、文本内容都封装成对象，解析标记型文档

解析过程

根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象
document对象：整个文档
element对象：标签对象
属性对象
文本对象
node节点对象：这个是这些对象的父对象
如果在对象里面找不到想要的方法，这个时候到node对象里面去找。

node接口的特性和方法

特性/方法 类型/返回类型 说明
nodeName String 节点的名字：根据节点的类型而定义
nodeValue String 节点的值：根据节点的类型而定义
nodeType Number 节点的类型常量值之一
ownerDocument Document 指向这个节点所属的文档
firstChild Node 指向在childNode列表中的第一个节点
lastChild Node 指向在childNode列表中的最后一个节点
childNodes NodeList 所有子节点的列表
parentNodes Node 返回一个给定节点的父节点
praviousSibling Node 指向前一个兄弟节点：如果这个节点是第一个兄弟节点，该值为null
nextSibling Node 指向后一个兄弟节点：如果这个节点就是最后一个兄弟节点，该值为null
hasChildNodes() Boolean 当childNode包含一个或多个节点时，返回真
attributes NamedNodeMap 包含了代表一个元素的特性的Attr对象：仅用于Element节点
appendChild(node) Node 将node添加到childNode的末尾
removeChild(node) Node 从childNodes中删除node
replaceChild(newnode,oldnode) Node 将childNodes中的oldnode替换成newnode
insertBefore(newnode,refnode) Node 在childNodes中的refnode之前插入newnode

DHTML

DHTML是几个技术的简称。
html：封装数据
css：使用属性和属性值设置样式
dom：操作html文档（标记型文档）
javascript：专门指的是js的语法语句（ECMAScript）

js的document对象

每个载入浏览器的html文档都会成为document对象。

常用方法

getElementById()

通过id得到元素（标签）

<input type="text" id="id" value="a">
<script type="text/javascript">
	var input = document.getElementById("id");
	alert(input.value);
</script >
getElementsByName()

通过标签的name的属性值返回一个数组（集合）

<input type="text" name="name" value="a">
<input type="text" name="name" value="b">
<input type="text" name="name" value="c">
<script type="text/javascript">
	var input = document.getElementsByName("name");
	alert(input.length);//输出3
	for(var i=0;i<input.length;i++){//遍历数组
		var input1 = input[i];
		alert(input1.value);
	}
</script >
getElementsByTagName()

通过标签名称返回一个数组

<input type="text" name="name" value="a">
<input type="text" name="name" value="b">
<input type="text" name="name" value="c">
<script type="text/javascript">
	var input = document.getElementsByTagName("input");
	alert(input.length);//输出3
	for(var i=0;i<input.length;i++){//遍历数组
		var input1 = input[i];
		alert(input1.value);
	}
</script >
write()

向页面输出变量（值），输出html代码

document.write(str);
document.write("<hr/>");

element对象

要操作element对象，首先获取到element，使用相应的方法

getAttribute()

获取属性里边的值

<input type="text" id="inputid" value="aaaa"/>
<script type="text/javascript">
	var input1 = document.getElementById("inputid");
	alert(input1.value);
	alert(input1.getAttributr("value"));
<script>

两种方式都可以

setAttribute()

设置属性的值

input1.setAttributr("value","aaa");

removeAttribute()

删除属性值

input1.removeAttribute("name");

不能删除value

注意：想要获取标签下的子标签：使用属性childNodes兼容性差。获得标签下子标签的唯一有效办法是使用getElementsByTagName方法。

//获取ul下的所有子标签
var ul1 = document.getElementById("ulid1");
//var li1 = ul1.childNpdes;兼容性差
var li1 = ul1.getElementsByTagName("li");
alert(li1.length);

Node对象的属性

nodeName,nodeType,nodeValue

使用dom解析html时，需要html里面的标签、属性和文本都封装成对象。

标签节点
nodeType：1
nodeName：大写的标签名称，如SPAN
nodeValue：null
属性节点
nodeType：2
nodeName：属性的名称，如id
nodeValue：属性的值
文本节点
nodeType：3
nodeName：#text
nodeValue：文本内容

父节点，子节点，同辈节点

例：

<ul id="ul1">
	<li id="li1">123</li>
	<li>456</li>
</ul>

ul是li的父节点parentNode

var li1 = document.getElementById("li1");
var ul = li1.parentNode;
alert(ul.id);

li是ul的子节点childNode（第一个firstChild，最后一个lastChild）

var ul1 = document.getElementById("ul1");
var li1 = ul1.firstChild;
alert(li1.id);

li之间是同辈节点（上一个previousSibling，下一个nextSibling）

var li1 = document.getElementById("li1");
alert(li1.nextSibling.id);

操作DOM树

appendChild()

添加子节点到末尾，类似于剪切黏贴的效果

insertBefore(newNode,oldNode)

在某个节点之前插入一个新的节点
操作：
1.获取到标签li1
2.创建新标签li2
3.创建文本text1
4.把文本添加到新标签下
5.获取到ul
6.把li2添加到ul下边

var li1=document.getElementById("li1");
var li2=document.createElement("li");
var text1=document.createTextNode("aaa");
li2.appendChild(text1);
var ul1 = document.getElementById("ulid");
ul1.insertBefore(li2,li1);

removeChild()

删除节点，通过父节点删除
操作：
1.获取到要删除的li1
2.获取父节点ul
3.通过父节点执行删除

var li1=document.getElementById("li1");
var ul=document.getElementById("ul");
ul.removeChild(li1);

replaceChild(newNode,oldChild)

替换节点
操作：
1.获取li1
2.创建标签li
3.创建文本
4.把文本添加到li下
5.获取ul标签（父节点）
6.执行替换

var li1=document.getElementById("li1");
var li2=document.createElement("li");
var text1=document.createTextNode("aaa");
li2.appendChild(text1);
var ul1 = document.getElementById("ulid");
ul1.replaceChild(li2,li1);

cloneNode(boolean)

复制节点
操作：
1.获取ul
2.执行复制方法
3.把复制的内容放到div中

var ul1 = document.getElementById("ul1");
var ulcopy = ul1.cloneNode(true);
var div = document.getElementById("div");
div.appendChild(ulcopy);

innerHTML属性

不是dom的组成部分，但是大多数浏览器都支持的属性
作用：
1.获取文本的内容

//获取span标签的文本
var span1=document.getElementById("sid");
alert(span1.innerHTML);

2.向标签里设置内容（可以是html代码）

//向div里设置内容<h1>aa</h1>
var div1=document.getElementById("div1");
div1.innerHTML="<h1>aa</h1>";
标签
js
dom
bom
js代码
dom对象
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!