一、js中的DOM和BOM的基本操作
ECMAScript(核心语法)：
- BOM(Browser Object Model 浏览器对象模型) 操作浏览器
- DOM(Document Object Model 文档对象模型)
- 操作标记语言标签 BOM对象： window 用来操控浏览器窗口 - BOM的核心
- location(操作浏览器的地址栏) document(操作浏览器窗口内容节点) - DOM核心
- history(用来操作浏览器的历史记录) 类似于下方关系
二、简单的记录
在JS中，window作为BOM的顶级核心对象，它的方法调用可以不添加对象名
window.alert();
window.prompt();
alert();
prompt();
<script type="text/javascript">
// 在浏览器弹出一个带有确定按钮提示框
// window.alert("Hello!");
// 在浏览器弹出一个带有提示和输入框的窗口
/*var name = window.prompt("请输入您的姓名：","小00");
window.alert(name);*/
// 在浏览器弹出一个带有确定和取消按钮的提示框[确认框]
var flag = confirm("您确定要删除本条记录吗？一经删除，无法恢复！");
// alert(flag);
if(flag){
alert("删除成功！");
}
</script>
windown操作窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>打开和关闭</title>
</head>
<body>
<input type="button" name="" id="" value="打开新窗口" "openNewWindow()" />
<input type="button" value="关闭窗口" "closeWindow()" />
<script type="text/javascript">
function closeWindow(){
var flag = confirm("您是否要关闭当前窗口？");
if(flag){
close();
}
}
function openNewWindow(){
// p1：要打开的新窗口地址 p2：窗口名称 p3:窗口特征
open("index.html","","height=200px,width=200px");
}
</script>
</body>
</html>
三、history的使用方法
窗口中的浏览记录
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" name="" id="" value="点我跳转到下一页" "goNext()"/>
<a href="index1.html">产生历史</a>
<script type="text/javascript">
function goNext(){
// 前往历史中的下一页
history.forward();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" name="" id="" value="点我返回上一页" "goForward()"/>
<a href="index2.html">产生历史2</a>
<script type="text/javascript">
function goForward(){
// 返回历史中的上一页
history.back();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" name="" id="" value="点我返回上两页" "goForward2()"/>
<script type="text/javascript">
function goForward2(){
// 正数表示向前
// 负数表示返回
history.go(-2);
/*
* history.go(-1) == history.back()
* history.go(1) == history.forward()
*/
}
</script>
</body>
</html>
四、location地址栏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- button等按钮可以不加javascript前缀 a标签必须加 -->
<a href="javascript:openBaidu();">点我打开百度</a>
<!--<a href="javascript:">点我刷新页面</a>-->
<!-- 刷新窗口 -->
<input type="button" value="点我刷新页面" "location.reload();"/>
<script type="text/javascript">
function openBaidu(){
/* 切换地址栏 */
// window.location.href = "";
location.href = "http://www.baidu.com";
}
</script>
</body>
</html>
五、对象的属性
document.referrer;//返回当前的载入文档
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
alert(document.referrer);
</script>
</body>
</html>
六document常用的方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用document对象操作页面</title>
<style type="text/css">
body,
input,
div,
p,
{
margin: 0;
padding: 0;
}
body {
font-size: 14px;
font-family: "微软雅黑";
line-height: 25px;
}
.content {
width: 550px;
margin: 0 auto;
}
.content img {
float: left;
width: 150px;
}
.r {
float: left;
width: 400px;
}
input[name="changeBook"] {
width: 100px;
height: 28px;
line-height: 28px;
text-align: center;
font-size: 14px;
font-family: "微软雅黑";
margin: 10px 0 10px 0;
}
input[name="season"] {
width: 50px;
text-align: center;
}
</style>
</head>
<body>
<!--
需求： 1.点击[换换名称]按钮 将书名更换为"现象级全球畅销书"
2.点击[input内容]按钮 将所有的input的value内容展示在下方<p>标签内
3.点击[四季名称]按钮 将所有name属性为season的value内容展示在下方<p>标签内
4.点击[清空页面内容]按钮 将整个页面文档流清空
-->
<div class="content">
<img src="images/book.jpg" alt="岛上书店" />
<div class="r">
<div id="book"><span>书名：岛上书店</span></div>
<input name="changeBook" value="换换名称" type="button" "changeName()" /><br> 四季名称：
<input id="chun" name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" /><br><br>
<input name="b2" type="button" value="input内容" />
<input name="b3" type="button" value="四季名称" "getSeason()" />
<input name="b4" type="button" value="清空页面内容" "document.write('')" />
<p id="replace"></p>
</div>
</div>
<script type="text/javascript">
var replaceEle = document.getElementById("replace");
/**
* 获取所有的季节内容
*/
function getSeason(){
var seasonArr = document.getElementsByName("season");
var str = "";
for(var i = 0; i < seasonArr.length; i++){
str += seasonArr[i].value+" ";
}
replaceEle.innerHTML = str;
}
// 绑定事件除了在标签上添加事件属性之外
// 还可以直接通过元素对象来绑定
var inputArr = document.getElementsByName("b2");
var inputEle = inputArr[0];
// 绑定事件
/*inputEle.onclick = function(){ // 匿名函数 只能使用一次
}*/
inputEle.onclick = getInputVal; // 给事件绑定函数
/**
* 获取所有input的value属性值
*/
function getInputVal(){
// [input,input,input]
var inputValArr = document.getElementsByTagName("input");
for(var i = 0; i < inputValArr.length; i++){
// 每一个input元素的value属性
var val = inputValArr[i].value;
// alert(val);
replaceEle.innerHTML += val+" ";
}
}
/**
* 换换名称
*/
function changeName(){
// 通过id获取到指定的元素对象
var divEle = document.getElementById("book");
// inner内部的 HTML
divEle.innerHTML = "<span>书名：《图解HTTP》</span>";
}
</script>
</body>
</html>
``
**七、DOM节点属性**
- 北京怀柔地震
- 蔡徐坤告B站
- 视觉中国卖国徽
- 66万奔驰漏油
<script type="text/javascript">
var ulObj = document.getElementById("news");
// 获取其父节点
// alert(ulObj.parentNode); BODY对象
// 获取子节点集合 [包含文本节点、注释节点、元素节点]
/*var liArr = ulObj.childNodes;
for (var i = 0; i < liArr.length; i++) {
alert(liArr[i]);
}*/
/*// 获取第一个子节点
var firstLi = ulObj.firstChild;
alert(firstLi.innerText);
// 获取最后一个子节点
var lastLi = ulObj.lastChild;
alert(lastLi.innerText);*/
// 获取下一个兄弟节点
var nextObj = ulObj.nextSibling;
// 获取上一个兄弟节点
var previousObj = ulObj.previousSibling;
alert(nextObj);
alert(previousObj);
var newsObj = document.getElementById("news");
// alert(newsObj.firstChild);
// 只获取元素节点
// alert(newsObj.firstElementChild);
newsObj.lastElementChild
newsObj.previousElementSibling;
newsObj.nextElementSibling
</script>
</body>
``
八、节点信息
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p></p>
<ul id="news"><!-- 我是注释 -->
<li>北京怀柔地震</li>
<li>蔡徐坤告B站</li>
<li>视觉中国卖国徽</li>
<li>66万奔驰漏油</li>
</ul>
<span></span>
<script type="text/javascript">
var newsObj = document.getElementById("news");
/*alert(newsObj.nodeName); // UL
alert(newsObj.nodeType); 1
alert(newsObj.nodeValue); null 所有的元素节点获取节点值都是null*/
var commentObj = newsObj.firstChild;
alert(commentObj.nodeName); // #comment 所有注释节点的名字
alert(commentObj.nodeType); // 8
alert(commentObj.nodeValue); // 注释的内容
// 文本节点：#text 3 文本内容
</script>
</body>
</html>
九、操作节点
1.操作节点属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择你喜欢的书</title>
<style>
* {
font-size: 12px;
font-family: "Arial", "微软雅黑";
line-height: 25px;
}
div {
padding: 5px;
text-align: center;
}
div span {
display: block;
}
</style>
</head>
<body>
<!--
需求： 1.点击单选按钮，选择“我和狗狗一起活下来”则将图片元素节点src设置为images/dog.jpg
并给图片添加title属性值，在其下一个元素节点<span>中添加文字[我和狗狗一起活下来]
如果选择了“灰霾来了怎么办”则将图片元素节点src设置为images/mai.jpg
并给图片添加title属性值，在其下一个元素节点<span>中添加文字[灰霾来了怎么办]
2.点击图片，获取title属性值
-->
<p>选择你喜欢的书：
<input type="radio" name="book" "book(this.value)" value="1">我和狗狗一起活下来
<input type="radio" name="book" "book(this.value)" value="2">灰霾来了怎么办
</p>
<div>
<img src="" alt="" id="image" "img()">
<span></span>
</div>
<script type="text/javascript">
var imgObj = document.getElementById("image");
function img(){
alert(imgObj.getAttribute("title"));
}
/**
* 给单选按钮添加点击事件
*/
function book(val){
// 获取当前的value值
// var val = this.value;
// alert(val);
if(val == 1){
imgObj.setAttribute("src","images/dog.jpg");
imgObj.setAttribute("title","我和狗狗活下来？");
}else{
imgObj.setAttribute("src","images/mai.jpg");
imgObj.setAttribute("title","灰霾来了怎么办？");
}
}
</script>
</body>
</html>
2.创作和插入节点
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择你喜欢的书</title>
<style>
* {
font-size: 12px;
font-family: "Arial", "微软雅黑";
line-height: 25px;
}
div {
padding: 5px;
text-align: center;
}
div span {
display: block;
}
</style>
</head>
<body>
<!--
需求： 1.点击单选按钮，实现能够在第一个<div>标签下
利用document添加一个子元素图片标签，并设置title属性值，点击一次添加一张...
（图片选择同示例04）
2.点击按钮[克隆图片到前面] 实现在第一个<div>标签下，复制最后一个子元素图片节点到最前面
-->
<p>选择你喜欢的书：
<input type="radio" name="book" "book(this.value)" value="1">我和狗狗一起活下来
<input type="radio" name="book" "book(this.value)" value="2">灰霾来了怎么办
<input type="button" value="克隆图片到前面" "copyNode()" />
</p>
<div></div>
<script type="text/javascript">
var divObj = document.getElementsByTagName("div")[0];
/**
* 将div标签下的最后一张图片节点 复制到 最前面
*/
function copyNode(){
var lastImgObj = divObj.lastElementChild;
// 克隆节点
var cloneImg = lastImgObj.cloneNode(false); // 如果为true会克隆它的子节点
// 添加到div最前面
// 添加新子节点到某个节点前
divObj.insertBefore(cloneImg,divObj.firstElementChild);
}
/**
* 添加图片
* @param {Object} val
*/
function book(val){
var srcVal = "";
var titleVal = "";
if(val == 1){
srcVal = "images/dog.jpg";
titleVal = "我和狗狗活下来";
}else{
srcVal = "images/mai.jpg";
titleVal = "灰霾来了怎么办？";
}
// 创建元素节点
var imgObj = document.createElement("img");
// 设定属性
imgObj.setAttribute("src",srcVal);
imgObj.setAttribute("title",titleVal);
divObj.appendChild(imgObj);
}
</script>
</body>
</html>
3.删除和替换节点
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>删除和替换节点</title>
<style>
* {
padding: 0;
margin: 0;
font-size: 12px;
}
ul,
li {
list-style: none;
}
li {
float: left;
text-align: center;
width: 140px;
}
</style>
</head>
<body>
<!--
需求： 1.点击[删除我吧]按钮，删除第一张图片
2.点击[换换我吧]按钮，替换其上方图片为images/f03.jpg
-->
<ul>
<li>
<img src="images/f01.jpg" id="first">
<p>
<input type="button" value="删除我吧" "del()">
</p>
</li>
<li>
<img src="images/f02.jpg" id="second">
<p>
<input type="button" value="换换我吧" "rep()">
</p>
</li>
</ul>
<script type="text/javascript">
/**
* 换图片
*/
function rep(){
// 获取要替换的节点
var imgObj = document.getElementById("second");
// 创建新节点
var newImgObj = document.createElement("img");
newImgObj.setAttribute("src","images/f04.jpg");
// 替换
var liObj = imgObj.parentNode;
liObj.replaceChild(newImgObj,imgObj);
}
/**
* 删除
*/
function del(){
// 获取对应的图片节点
var imgObj = document.getElementById("first");
// 获取父节点
var liObj = imgObj.parentNode;
// 删除
liObj.removeChild(imgObj);
}
</script>
</body>
</html>
4.节点样式操作
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>我的购物车</title>
<link rel="stylesheet" href="css/shopping.css">
<style type="text/css">
/*控制显示和隐藏的CSS代码*/
#shopping .cartOver {
background-color: #ffffff;
z-index: 100;
border-bottom: none;
}
#shopping .cartListOver {
display: block;
position: relative;
top: -1px;
}
#shopping .cartOut {
background-color: #f9f9f9;
border-bottom: solid 1px #dcdcdc;
}
#shopping .cartListOut {
display: none;
}
#cart:hover{
width:100px;
}
</style>
</head>
<body>
<!--
需求：使用style属性：
1.当鼠标移入我的购物车范围，触发事件，显示id为cartList的div内容以block。
要求将id为cart的<div>背景颜色调整为#fff，隐藏下边框并要求z-index为1
将id为cartList的<div>设置相对定位，然后设置向上偏移-1px 在我的购物车下方被遮盖上边框
2.当鼠标移出我的购物车范围，触发事件，将id为cartList的div内容隐藏，并恢复之前的效果
背景颜色#f9f9f9
使用className重复操作一次上述步骤。
3.获取id为cart的display样式值
-->
<section id="shopping">
<!-- 购物车提示框 -->
<div id="cart" "over()" "out()">我的购物车<span>1</span></div>
<!-- 购物车列表 -->
<div id="cartList">
<h2>最新加入的商品</h2>
<ul>
<li><img src="images/makeup.jpg"></li>
<li>倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）</li>
<li>¥558.00×1<br/>删除</li>
</ul>
<div class="footer">共1件商品<span>共计¥558.00</span><span>去购物车</span></div>
</div>
</section>
<script type="text/javascript">
var cartListObj = document.getElementById("cartList");
var cartObj = document.getElementById("cart");
// 1.绑定鼠标悬浮事件
// 2.将cartList显示出来
function over(){
/*cartListObj.style.display="block";
// 设置背景颜色
cartObj.style.backgroundColor = "white";
// 去除下边框
cartObj.style.borderBottom = "none";
// 将购物车列表上移 进行遮盖上边框
cartListObj.style.position = "relative";
cartListObj.style.top = "-1px";
// 用cart遮盖下方列表
cartObj.style.zIndex = 1;*/
cartListObj.className = "cartListOver";
cartObj.className = "cartOver";
}
function out(){
/*cartListObj.style.display = "none";
cartObj.style.backgroundColor = "#F9F9F9";
cartObj.style.borderBottom = "1px solid #dcdcdc";
cartListObj.style.top = "1px";
cartListObj.style.position = "static";
cartObj.style.zIndex = 0;*/
cartListObj.className = "cartListOut";
cartObj.className = "cartOut";
}
</script>
</body>
</html>
十、时间类型和时间函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--当前时间-->
<div>
</div>
<script type="text/javascript">
function getCurrentDate(){
// 获取当前时间
var currentDate = new Date();
// 获取年月日 时分秒 等
var year = currentDate.getFullYear(); // 年
var month = currentDate.getMonth() + 1; // 月
var day = currentDate.getDate(); // 日
var hours = currentDate.getHours(); // 时
var minutes = currentDate.getMinutes(); // 分
var seconds = currentDate.getSeconds(); // 秒
var currDate = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
var divObj = document.getElementsByTagName("div")[0];
// divObj.innerHTML = currentDate;
divObj.innerHTML = currDate;
}
getCurrentDate();
// 定时函数 p1:要调用的函数名 p2:延迟调用的时间 ms
// 延迟执行某个函数 只会执行一次
// setTimeout("getCurrentDate()",1000);
// 周期性执行某个函数 间隔多少时间来执行
setInterval("getCurrentDate()",1000);
</script>
</body>
</html>
982
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
