1.BOM和DOM入门
(1)请说出DOM对象和BOM对象的关系
BOM对象包含了DOM对象
(2)请说出BOM对象中包含的对象内容
BOM由一系列对象组成,是访问、控制、修改浏览器的属性的方法
1)History
2)Navigator
3)Document
4)Location
5)Screen
2.BOM对象-window
(1)常见的弹框方式有几种,请分别说出他们的使用场景
常见的弹框方式有3种
//BOM中三种弹框
//含有确定按钮的弹框
function demo1(){
window.alert("弹框A")
}
//含有确认取消的弹框
function demo2(){
var flag = window.confirm("确认删除?")
alert(flag)
}
//可以输入内容的弹框
function demo3(){
var name = window.prompt("请出入昵称:","例如balicar")
alert(name)
}
(2)请说出setTimeout和setInterval的区别和联系,并且说出他们的使用场景
setTimeout和setInterval都可以实现对当前时间的改变,但是setTimeout只能改变一次,setInterval可以改变多次
//1s之后进行方法的调用 调用一次
// window.setTimeout("demo4()",1000)
//每间隔1s就会进行方法的调用 调用多次
var d = window.setInterval("demo4()",1000)
(3)请说出open方法的作用和使用场景。
Open方法可以打开一个网页,是另起一页的方式
open()方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
function demo5(){
window.open("http://www.baidu.com");
}
3.BOM对象-location-history-navigator
(1)请列举location对象中常用的方法
function testLocation(){
//http://127.0.0.1:8020/06JS/02JS%E4%B8%ADBOM%E5%AF%B9%E8%B1%A1%E5%AD%A6%E4%B9%A0.html
var href = window.location.href;
//http://127.0.0.1
var hostname = window.location.hostname;
//8020
var port = window.location.port;
//http://127.0.0.1:8020
var host = window.location.host;
// alert(href+"****"+hostname+"****"+port+"****"+host);
//在本页面中加载百度页面;修改当前的URL地址
// window.location.href = "http://www.baidu.com"
//重新加载页面
window.location.reload();
}
(2)请说出window.history.go(args); 请说出args值分取 0 , 2 , -2 的含义
window.history.go(0);表示重新加载页面
window.history.go(2);表示前进2个操作
window.history.go(-2);表示后退2个操作
(3)请如何获得屏幕的分辨率
function testscreen(){
//获取宽
var w = window.screen.width;
//获取长
var h = window.screen.height;
alert(w+"*"+h);
}
4.DOM结构节点类型
(1)请简述DOM节点的分类有哪些
元素节点,属性节点,文本节点
(2)节点之间的关系有哪些
父子关系,兄弟关系
(3)请简述我们都可以操作DOM对象的哪些内容
1.查询元素(进行操作元素、或者元素的属性、文本)
2.操作文本
3.操作属性
4.操作CSS样式(一个特殊的属性style)
5.操作元素
5.DOM编程获得元素的方式
(1)如何获得id 名称为 inw2的所有元素对象
var obj = document.getElementById(“inw2”);
(2)如何获得当前节点对象的下一个节点对象,不包含空白节点元素
var obj = document.getElementById(“id”);
Obj.nextElementSibling
(3)请写出常使用的间接获得对象的方式
间接获得对象的方式:
1)childNodes 获得所有子节点
2)parentNode 获取直系父级节点
3)previousSibling 上一个节点
4)previousElementSibling 不含空白的上一个节点
5)nextSibling 下一个节点
6)nextElementSibling 不含空白的下一个节点
6.DOM编程-操作元素属性
(1)获得元素属性的方式有几种,请说明
/*获取id为username的对象*/
var inp1 = document.getElementById("username");
/*获取元素的属性方式一*/
var type = inp1.type;
var name = inp1.name;//这里获取到的name是实时的name值
var value = inp1.value;
// alert(type+"---"+name+"---"+value);
/*获取元素的属性方式二*/
var type2 = inp1.getAttribute("type");
var name2 = inp1.getAttribute("name");
var value2 = inp1.getAttribute("value");
// alert(type2+"-----"+name+"-----"+value);
(2)操作元素属性的方式有几种,请简要说明
/*操作元素的属性方式一*/
/*inp1.type = "button";
inp1.value = "zhangsan"*/
/*操作元素的属性方式二*/
inp1.setAttribute("type","button")
7.DOM编程-操作元素样式
(1)通过js给一个对象增加css样式的方式有几种。
两种
通过更改行内样式的属性改变css样式
通过修改行内样式className属性增加css样式
function demo1(){
/*获取id为div_1的对象*/
var div = document.getElementById("div_1");
var hi = div.style.height;
var wi = div.style.width;
// alert(hi+"-----"+wi);
div.style.height = "300px";
div.style.width = "300px";
div.style.backgroundColor = "darkseagreen";
div.className = "divs";
}
.divs{
border: 3px solid springgreen;
}
(2)className 该方式使用的场景是什么?
提前已经定义好了该样式,才能使用
(3)使用js的方式在获得元素css样式的时候有什么缺点?
只支持获取行内样式
8.DOM编程-操作元素文本和值
(1)请说出 innerHTML和innerText的区别
innerHTML可以识别标签,innerText只能识别文本
(2)请说出select、textarea 这两个标签如何取值。
Select和textarea这两个标签通过属性value取值
(3)innerHTML和innerText 在取值的时候的使用场景是什么?
除了select和textarea两个双标签外,用于双标签中,如果获取纯文本时用innerText,如果是获取HTML内容时用innerHTMl
9.DOM编程-操作元素
(1)使用appendChild()方法的时候是追加到指定元素的什么位置?
使用appendChild()方法的时候追加到指定元素的内部,称为指定元素的子标签
(2)请问replaceChild(arg1,arg2)在使用的时候参数的含义是什么?
arg1节点替换arg2节点
(3)请问如何删除一个节点对象
先通过removeChild方法删除这个结点对象的子元素对象,再通过remove方法删除自身。
10.DOM编程实例1
(1)请完成对课程中对节点元素的操作案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
tr{
height: 70px;
}
th,td{
width: 150px;
text-align: center;
}
</style>
<script>
function addNode(){
/*创建节点td*/
var tr = document.createElement("tr");
/*创建节点td*/
var td1 = document.createElement("td");
td1.innerHTML = "<input type='text'style='width: 100px;' onblur='save(this)' />"
/*创建节点td*/
var td2 = document.createElement("td");
td2.innerHTML = "<input type='text'style='width: 100px;' onblur='save(this)' />"
/*创建节点td*/
var td3 = document.createElement("td");
td3.innerHTML = "<input type='button' value='添加' onclick='addNode()' />"+"<input type='button' value='删除' onclick='deleteNode(this)' />"
/*获取表格对象*/
var tal = document.getElementById("tal");
tal.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
}
function save(thi){
var td = thi.parentNode;
td.innerText = thi.value;
}
function deleteNode(thi){
var tr = thi.parentNode.parentNode;
tr.remove();
}
</script>
</head>
<body>
<table align="center" border="1px" id="tal">
<tr>
<th>图书名称</th>
<th>图书价格</th>
<th>操作</th>
</tr>
<tr>
<td>javaSE</td>
<td>19</td>
<td>
<input type="button" name="" id="" value="添加" onclick="addNode()"/>
<input type="button" name="" id="" value="删除" />
</td>
</tr>
<tr>
<td>javaEE</td>
<td>23</td>
<td>
<input type="button" name="" id="" value="添加" onclick="addNode()"/>
<input type="button" name="" id="" value="删除" />
</td>
</tr>
</table>
</body>
</html>
11.DOM编程实例2
(1)请完成对课程中背景图片更换的操作案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-image: url(img/bjsky.jpg);
background-repeat: no-repeat;
background-size: 1360px 768px;
}
a{
color: #FFFFFF;
font-size: 24px;
text-decoration: none;
}
a:hover{
color: red;
}
#div1{
width: 200px;
height: 200px;
background-color: gray;
text-align: center;
}
#span{
font-size: 20px;
color: burlywood;
}
#div1 input{
width: 50px;
height: 30px;
background-color: burlywood;
}
</style>
<script>
var i = 0;
function changebg(){
var arr = ["bjsky.jpg","mayun.jpg","simple.jpg","sxt.jpg","zgc.jpg"];
if(i<arr.length-1){
i++;
}else{
i=0;
}
var bod = document.getElementById("bod");
bod.style.backgroundImage = "url(img/"+arr[i]+")";
}
function change(){
//获取div对象
var div = document.getElementById("div1");
div.style.marginTop = Math.floor(Math.random()*300)+"px" ;
div.style.marginLeft = Math.floor(Math.random()*600)+"px";
}
function show(){
var bod = document.getElementById("bod");
bod.style.backgroundImage = "url(https://www.jiuwa.net/tuku/20190423/zNvWMMpG.gif)"
var div = document.getElementById("div1");
div.style.display = "none";
}
</script>
</head>
<body id="bod">
<a href="javascript:changebg()">点击更换背景</a>
<div id="div1">
<span id="span">请选择您的职业</span>
<br /><br /><br /><br />
<input type="button" name="" id="" value="乞丐" onclick="show()"/>
<input type="button" name="" id="" value="战士" onmouseover="change()"/>
</div>
</body>
</html>
12.表单元素操作
(1)readonly和disabled的区别是什么?
Readonly和disabled都不能对数据进行操作,但是readonly可以提交到后台,disabled不能提交到后台
(2)使用JS提交表单的方式有几种,请说明使用的场景。
JS提交表单的方式:
1)使用onsubmit事件,一般用于表单提交前的表单验证
2)使用document.fom.submit()方法, 页面只有一个表单的时候,手动提交表单
获取根据id获取表单元素,再使用submit()方法,页面只有多个表单的时候,自定义表单提交