Java Web学习之JavaScript_BOM和DOM学习(javaScript学习终篇)
Posted 听路走歌
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Java Web学习之JavaScript_BOM和DOM学习(javaScript学习终篇)相关的知识,希望对你有一定的参考价值。
BOM知识
1,概念:Browser Object model 浏览器对象模型
将浏览器的各个组成部分封装成对象,
2,组成:
1,window:窗口对象
方法:
1, 与弹出框有关的方法:
1,alert():显示带有一段信息和确认按钮的警告框
2,confirm():显示带有一段信息以及确认按钮和取消按钮的对话框
如果用户点击确定按钮,方法返回true;
如果用户点击取消按钮,方法返回false;
3,prompt():显示可提示用户输入的对话框(很少用)
2, 与打开和关闭有关的方法
1,close()关闭浏览器窗口
谁调用我,我关闭谁
2,open()打开一个新的浏览器窗口
返回新的window对象
案例:
//打开窗口
var openBtn = document.getElementById("openBtn");
var newWindow;
openBtn.onclick = function (){
//打开新窗口
newWindow = open("https:www.baidu.com");
}
//关闭窗口
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function (){
//关闭窗口
newWindow.close();
}
3,与定时器有关的方法
1,setTimeout() 在指定毫秒数后调用函数或者计算公式(计时器)
参数:1,js代码或者方法对象, 2,毫秒值
返回值:唯一标识,用于取消定时器
2,clearTimeout() 取消由setTimeout()方法设置的timeout(停止倒计时)
3,setInterval() 按照指定的周期((以毫秒计算))来调用函数或者计算公式(循环计算)
参数:1,js代码或者方法对象, 2,毫秒值
返回值:唯一标识,用于取消定时器
4,clearInterval()取消由setInterval()设置的timeout
3,特点:
1,window对象不需要创建,可以直接使用,window.方法名();
2,window引用可以省略 直接使用方法名();
4,属性:
1,获取其他BOM对象
history
location
Navigator
Screen
2,获取DOM对象
document
2,Navigator:浏览器对象
3,screen:显示器屏幕对象
4,History:历史记录对象
1,创建(获取):
1,window.history
2,history
2,方法:
1,back() 加载history列表的前一个URL
2,forward() 加载history列表中的下一个URL
3,go(参数) 加载history列表中的某个具体页面
参数;
正数:前进几个历史记录
负数:后退几个历史记录
<body>
<input id="btn" type="button" value="获取历史记录个数">
<a href="09_history对象2.html">09页面</a>
<input id="forword" type="button" value="前进">
<script>
//1,获取按钮
var btn = document.getElementById("btn");
//2,绑定单击事件
btn.onclick = function (){
//获取当前窗口历史记录的个数
var lenght = history.length;
alert(lenght)
}
//2,方法
//1,获取按钮
var forword = document.getElementById("forword");
//2,绑定单击事件
forword.onclick = function (){
//前进
history.forward()
}
</script>
</body>
3,属性:
length:返回当前窗口历史列表的URL数量
5,Location:地址栏对象
1,创建(获取):
1,window.location
2,location
2,方法:
reload() 重新加载当前文档(刷新)
3,属性:
href 设置或者返回完整的URL
案例:
<body>
<input id="button" type="button" value="刷新">
<input id="button2" type="button" value="去传智播客">
<script>
//reload方法,定义一个按钮,点击即刷新当前页面
//1,获取按钮
var button = document.getElementById("button");
//绑定单击事件,功能刷新页面
button.onclick = function (){
location.reload();
}
//2,设置href
// var q= location.href;
// alert(q);
var button2 = document.getElementById("button2");
//绑定单击事件
button2.onclick = function (){
location.href = "https:www.itcast.cn";
}
</script>
</body>
DOM知识:
1,概念:Doument Object Model 文本对象模型
将标记语言文档的各个部分封装为对象,可以使用这些对象对标记语言文档进行CRUD(增删改查)的动态操作
DOM 是 W3C(万维网联盟)的标准。
W3C DOM 标准被分为 3 个不同的部分:
核心 DOM - 针对任何结构化文档的标准模型
Document:文档对象
Element:元素对象
Attribute:属性对象
Text :文本对象
Comment:注释对象
Node:节点对象 为上面五个的父对象
(下面两个为核心DOM的一个扩展和封装)
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
核心DOM模型:
Document:文档对象
1,创建:在html模型中可以使用window对象获取
1,window.document
2,document
2,方法:
1,获取Element对象
1,getElementById():根据id属性值获取元素对象,id属性值一般唯一
2,getElementsByTagName():根据元素名称获取元素对象们,返回值为一个数组
3,getElementsByClassName():根据calss属性值获取元素对象们,返回值为一个数组
4,getElementsByName():根据name属性值获取元素对象们,返回值为一个数组
2,创建其他DoM对象
1,createAttribute(name)
2,createComent()
3,createElement()
4,createTextNode()
3,属性
Element:元素对象
1,获取/创建:通过document来获取和创建
2,方法:
1,removeAttribute():删除属性
2,setAttribute():设置属性
Node:节点对象 为上面五个的父对象
特点:所有dom对象都可以被认为是一个节点
方法:
CRUDdom树:
appendChild():向节点的子节点列表的结尾添加新的子节点
removeChild():删除(并返回)当前节点的指定子节点
replaceChile():用新的节点替换一个子节点
超链接功能:
1,可以被点击:样式
2,点击后跳转到href指定的url
需求:保留1功能,不进行跳转
实现:href=“javascript:void(0);"
如:删除节点
案例:动态表格:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td>
</tr>
</table>
<script>
/*
分析:
1.添加:
1. 给添加按钮绑定单击事件
2. 获取文本框的内容
3. 创建td,设置td的文本为文本框的内容。
4. 创建tr
5. 将td添加到tr中
6. 获取table,将tr添加到table中
2.删除:
1.确定点击的是哪一个超链接
<a href="javascript:void(0);" onclick="delTr(this);" >删除</a>
2.怎么删除?
removeChild():通过父节点删除子节点
*/
//使用innerHTML添加
document.getElementById("btn_add").onclick = function() {
//2.获取文本框的内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//获取table
var table = document.getElementsByTagName("table")[0];
//追加一行
table.innerHTML += "<tr>\\n" +
" <td>"+id+"</td>\\n" +
" <td>"+name+"</td>\\n" +
" <td>"+gender+"</td>\\n" +
" <td><a href=\\"javascript:void(0);\\" onclick=\\"delTr(this);\\" >删除</a></td>\\n" +
" </tr>";
}
//删除方法
function delTr(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</htm
HTML DOM:
1,标签体的设置和获取:innerHTML(重点,需要掌握)
2,使用html元素对象的属性
3,设置元素样式
1,使用元素的style属性来设置
如:
//修改样式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//fontSize
div.style.fontStyle = "200px";
2,提前定义好类选择器的样式,通过className属性设置其class属性值
以上是关于Java Web学习之JavaScript_BOM和DOM学习(javaScript学习终篇)的主要内容,如果未能解决你的问题,请参考以下文章