/*
* JavaScript为大家提供三种对话框
*
* alert 警告框
*
* confirm 确认框
*
* prompt 输入框
*
*
*/
function closeWin() {
//关闭浏览器的方法
window.close()
}
//定时函数
// var timeId = setTimeout(function() {
// alert("刘建宏很帅");
// },2000);
//
// clearTimeout(timeId)
// clearInterval()
function openBaidu() {
// open
window.open("http://www.baidu.com","newTab","menubar=yes,status=yes,fullscreen=yes")
}
</script>
</head>
<body>
<button onclick="closeWin()">关闭</button>
<button onclick="openBaidu()">打开百度</button>
</body>
BOM(browser object model) 浏览器对象模型
window：
|- history
|- back
|- forward
|- go
|- location
|- screen
|- height
|- width
|- availHeight
|- availWidth
|- navigator :user-agent 用户代理
|- document （dom） document object model 文档对象模型
location
/**
* 要求3秒后刷新网页
*/
var timer = setTimeout(function() {
// 刷新网页
location.reload()
// window.clearTimeout(timer)
},3000);
console.info(location.href)
var timer = setTimeout(function() {
// href返回当前网页的地址
location.href = "http://www.baidu.com";
},3000);
console.info(location.href)
console.info(location.protocol) //返回当前协议
console.info(location.host)
console.info(location.hostname)
console.info(location.hash)//hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。
console.info(location.search)//search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。
获取DOM对象的五种方法
/**
* 在js中，获取dom对象有五种方式
* 1、直接获取
*/
// 1、直接使用标签的id对该标签操作，
// 不推荐
// show.innerHTML = "这个是新的内容";
//2 、店家推荐，通过document提供的一个方法document.getElementById()
// var _div = document.getElementById("show");
// _div.innerHTML = "这个是使用getElementById获取的";
//3、通过标签名称获取对应的标签
// var _divs = document.getElementsByTagName("div");
// console.info(_divs)
// _divs[0].innerHTML = "这个是使用getElementById获取的";
//4、通过class获取对应的标签
// var _divs = document.getElementsByClassName("show");
// console.info(_divs)
// _divs[1].innerHTML = "是不是";
// 5、 通过name属性获取对应的标签
// 使用场景只有form标签
var _name = document.getElementsByName("username")
console.info(_name)
_name[0].value = "刘帅哥真帅，我好喜欢啊！！！";
操作DOM对象的内容
<script type="text/javascript">
// window.onload = function() {
//
// }
window.onload = init;
function init() {
var _div = document.getElementById("show");
/**
* innerHTML可以插入HTML片段，能够解析HTML文本
*
* xss 攻击
* csrf 攻击
*
*/
// _div.innerHTML = "<b>刘建宏</b>是个大帅哥，这个是公认的！！";
/**
* innerText和textContent不能解析HTML片段，只能插入文本内容
*/
// 非w3c规定
// _div.innerText = "<b>刘建宏</b>是个大帅哥，这个是公认的！！";
// w3c规定
_div.textContent = "<b>刘建宏</b>是个大帅哥，这个是公认的！！";
}
</script>
XSS攻击
XSS攻击是Web攻击中最常见的攻击方法之一，它是通过对网页注入可执行代码且成功地被浏览器
执行，达到攻击的目的，形成了一次有效XSS攻击，一旦攻击成功，它可以获取用户的联系人列
表，然后向联系人发送虚假诈骗信息，可以删除用户的日志等等，有时候还和其他攻击方式同时实
施比如SQL注入攻击服务器和数据库、Click劫持、相对链接劫持等实施钓鱼，它带来的危害是巨
大的，是web安全的头号大敌。
操作DOM对象的属性
<script type="text/javascript">
window.onload = function() {
var _div = document.getElementById("show");
// console.info(_div.title)
/**
* DOM对象.属性名称
* 获取属性时是通用的
*/
// _div.title = "刘建宏很帅";
/**
* 获取class的时候，
* 使用className来获取
*/
// console.info(_div.className)
/**
* 数组的这种方式，一般用来获取id title属性，
* 其他一般不用
*/
// _div["title"] = "这个是一个新的标题";
// console.info(_div["style"])
var _title = _div.getAttribute("title");
console.info(_title)
_div.setAttribute("title","刘建宏是个大帅锅")
}
</script>
</head>
<body>
<div id="show" class="msg" title="这个是很漂亮的标题" style="height: 30px;">
这个是div
</div>
</body>
操作DOM对象的样式
<style type="text/css">
#show {
width: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="show" style="height: 400px;" onclick="change()">
</div>
<script type="text/javascript">
var _show = document.getElementById("show");
/**
* 通过dom对象.style.样式属性 这种方式
* 只能获取行内样式，无法获取外联样式
*/
console.info(_show.style.height);
// console.info(_show.style.width);
// // 针对于dom无法获取外联样式，w3c为大家提供了一个getComputedStyle
// // 这个api存在兼容性，IE9+
// // console.info(getComputedStyle(_show).width);
// // IE6、 7 8
// // console.info(_show.currentStyle.width)
// // var _show = document.getElementById("show");
// // console.info(getComputedStyle(_show).height)
// // alert(parseInt(_show.style.height))
// function change() {
// var _show = document.getElementById("show");
// // var newHeight = parseInt(_show.style.height) + 200;
// // _show.style.height = newHeight + "px";
// /**
// * 获取样式对应值，注意：offsetHeight 获取的值
// * 包含边框
// */
// console.info(_show.offsetHeight)
// /**
// * 获取样式对应值，注意：clientHeight 获取的值
// * 不包含边框
// */
// console.info(_show.clientHeight)
// _show.style.width = _show.clientWidth + 200 + "px";
// _show.style.height = _show.clientHeight + 200 + "px";
// }
</script>
网友评论