JavaWeb(4)-JS对象_bom,dom,document,element,node

JavaWeb 专栏收录该内容
10 篇文章 0 订阅

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接口的特性和方法

特性/方法类型/返回类型说明
nodeNameString节点的名字:根据节点的类型而定义
nodeValueString节点的值:根据节点的类型而定义
nodeTypeNumber节点的类型常量值之一
ownerDocumentDocument指向这个节点所属的文档
firstChildNode指向在childNode列表中的第一个节点
lastChildNode指向在childNode列表中的最后一个节点
childNodesNodeList所有子节点的列表
parentNodesNode返回一个给定节点的父节点
praviousSiblingNode指向前一个兄弟节点:如果这个节点是第一个兄弟节点,该值为null
nextSiblingNode指向后一个兄弟节点:如果这个节点就是最后一个兄弟节点,该值为null
hasChildNodes()Boolean当childNode包含一个或多个节点时,返回真
attributesNamedNodeMap包含了代表一个元素的特性的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>";
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值