一、BOM对象
1，window对象
所有浏览器都支持window对象，从概念上讲：一个HTML文档对应一个window对象，从功能上讲：控制浏览器窗口的，从使用上讲：window对象不需要创建对象，直接使用即可
2，window对象方法
alert() 显示带有一段消息和一个确认按钮的警告框。 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 prompt() 显示可提示用户输入的对话框。 open() 打开一个新的浏览器窗口或查找一个已命名的窗口。 close() 关闭浏览器窗口。 setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 clearInterval() 取消由 setInterval() 设置的 timeout。 setTimeout() 在指定的毫秒数后调用函数或计算表达式。 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 scrollTo() 把内容滚动到指定的坐标。
3，方法的使用
3.1弹窗方法，警告窗alert、确认窗confirm、输入窗prompt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function waring() {
alert(‘小心点‘)
}
function certain() {
var status=confirm(‘确定跳转？‘);
if (status){
location.href=‘http://www.baidu.com‘;
}
}
function shuru() {
var content=prompt(‘请输入‘);
console.log(content)
}
</script>
</head>
<body>
<button onclick="waring()">警告窗</button>
<button onclick="certain()">确认窗</button>
<button onclick="shuru()">输入窗</button>
</body>
</html>
3.2 setinterval：间隔指定的毫秒数不停的执行指定的代码、clearInterval：停止方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function gettime() {
let now=new Date().toLocaleString();
let ss=document.getElementById(‘content‘);
ss.value=now;
}
var id;
function settime() {
if (id==undefined){
gettime();
id=setInterval(gettime,1000); #每1000毫秒（即1秒）后执行
}
}
function over() {
clearInterval(id);
id=undefined
}
</script>
</head>
<body>
<input type="text" id="content">
<button onclick="settime()">start</button>
<button onclick="over()">end</button>
</body>
</html>
3.3 settimeout（）：在指定的毫秒数后执行代码，cleartimeout（）：停止
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="set()">执行</button>
<button onclick="cle()">停止</button>
<p id="p1">欢迎光临</p>
<script>
var id;
function set(){
id=setTimeout(function () {
document.getElementById(‘p1‘).innerHTML=‘谢谢‘
},3000)
}
function cle() {
clearTimeout(id)
}
</script>
</body>
</html>
二、DOM对象
HTML document object model（文档对象模型）
1，DOM树，展示文档中各个对象的关系，用于导航
2，节点关系
3，节点查找方法
3.1 直接查找
document.getElementById(); #通过id查找，得到是一个准确标签 document.getElementsByClassName(); #通过类查找，不管同一类有几个标签，得到都是由同一类标签组成的数组 document.getElementsByTagName(); #通过标签名查找，不管同一种标签有几个，得到的都是由同一种标签组成的数组 document.getElementsByName(); #通过name属性查找，返回的是同一name值的标签组成的数组注意：涉及寻找元素，注意<script>的位置，写在被查找标签后面
3.2 导航查找
‘‘‘ parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素 ‘‘‘注意：是没法直接找到所有的兄弟标签
4，节点操作
4.1 文本操作：innerHTML，innerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1"><a href="#">欢迎来电</a></div>
<script>
var t1=document.getElementsByClassName(‘c1‘)[0].innerHTML;
var t2=document.getElementsByClassName(‘c1‘)[0].innerText;
console.log(t1);
console.log(t2);
</script>
</body>
</html>innerHTML拿到的是对应标签里包含的所有内容，包括标签，比如上面的例子拿到‘<a href="#">欢迎来电</a>’innerText拿到的只是内容，没有标签，比如上面的例子就只拿到‘欢迎来电’，而没有a标签
4.2 属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: yellow;
}
.c2{
color: white;
}
.c3{
font-size: 30px;
}
</style>
</head>
<body>
<div id="d1">你好啊</div>
<button onclick="set1()">加背景</button>
<button onclick="set2()">加背景，字体颜色，字体大小</button>
<button onclick="rem1()">去掉class属性</button>
<button onclick="get1()">拿到class属性</button>
<script>
var ele=document.getElementById(‘d1‘);
function set1(){
ele.setAttribute(‘class‘,‘c1‘) #给标签设置属性，第一个参数为属性名，第二参数为属性值
}
function set2() {
ele.setAttribute(‘class‘,‘c1 c2 c3‘)
}
function rem1() {
ele.removeAttribute(‘class‘) #把标签的某个属性给删除，参数为属性名
}
function get1() {
var va=ele.getAttribute(‘class‘); #拿到标签的某个属性值，参数为属性名
console.log(va)
}
</script>
</body>
</html>
4.3 class属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: grey;
color: yellow;
font-size: 20px;
margin-bottom: 5px;
}
ul{
list-style: none;
}
.hh{
display: none;
}
</style>
</head>
<body>
<div class="c1">菜单一</div>
<ul class="hh">
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
<div class="c1">菜单二</div>
<ul class="hh">
<li>222</li>
<li>222</li>
<li>222</li>
</ul>
<div class="c1">菜单三</div>
<ul class="hh">
<li>333</li>
<li>333</li>
<li>333</li>
</ul>
<script>
var eles=document.getElementsByClassName(‘c1‘);
for ( var i=0;i<eles.length;i++){
eles[i].onclick=function () {
for (var j=0;j<eles.length;j++){
if (eles[j]!=this){
eles[j].nextElementSibling.classList.add(‘hh‘) #在标签的class属性列表里加‘hh类’。若已经存在，就不用添加
}
}
this.nextElementSibling.classList.remove(‘hh‘) #把标签的class属性列表里删除‘hh类’，若不存在，就不用删除
}
}
4.4 改变css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p1">这是一个寂寞的天，下着有些伤心的雨</p>
</body>
<script>
document.getElementById(‘p1‘).style.color=‘red‘;
document.getElementById(‘p1‘).style.fontSize=‘30px‘;
</script>
</html>注意：对于中间用—连接的属性，在这里中间的—给去掉。比如font—size写成fontSize，后面的单词首字母大写
4.5 value操作
对于input，select，textarea标签来说，可以.value获取到value值
原文地址：https://www.cnblogs.com/12345huangchun/p/10171146.html
时间： 2024-10-07 00:27:11