目录
Dom
介绍
控制Html文档的内容
概念:将标记语言文档的各个组成部分,封装为对象,可以使用这些对象,对标记语言文档进行CRUD的动态对象
核心DOM 针对任何结构化文档的标准模型
Attribute:属性对象
Text:文本对象
Comment:注释对象
Documnet:文档对象
Element:元素对象
获取Element对象
getElementsByTagName():根据元素名称获取元素对象们,返回值是一个数组
div class="div2">1</div>
<div class="div1">1</div>
<script>
var sc=document.getElementsByTagName("div");
alert(sc.length)//获取长度,有多少个
</script>
getElementsByClassName():根据class属性获取元素对象们,返回值是一个数组
<div class="div1">1</div>
<div class="div1">1</div>
<script>
var sc=document.getElementsByClassName("div1");
alert(sc.length)
</script>
getElementsByname():根据name属性获取元素对象,返回值是一个数组
<body>
<input type="button" name="name">
<script>
var sc=document.getElementsByName("name");
alert(sc.length)
getElementsById():根据id属性值获取元素对象,id属性值一般唯一
创建其他DOM对象
createComment():创建注释节点
createElement():创建元素节点,是在对象中创建一个对象
createTextNode():创建文本节点
createAttribute(name):创建拥有指定名称属性节点,并返回新的Attr对象
HTML Dom
标签体的设置和获取:innerHTML
innerHTML:获取到标签体内容
<div id ="div1"></div>
<script>
var div=document.getElementById("div1")
div.innerHTML;
</script>
使用HTML元素对象属性
控制元素样式
使用元素的style属性来设置
<input type="button" id="x1">
<script>
var input = document.getElementById("x1");
input.onclick=function (){
input.style.width="200px";
}
</script>
提前定义类选择器的样式,通过元素的classname属性来设置class属性值
<style>
.d1{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" id="x1">
<script>
var input = document.getElementById("x1");
input.onclick=function (){
input.className="d1";
}
Node:节点对象,其他5个的父对象
Node对象是整个DOM的主要的数据类型
特点:所有dom对象都可以被认为是一个节点
方法
CRUD dom树
appendChild():向节点的子节点列表的结尾添加新的子节点
<div id="h1">1
<div id="h2">2
<div id="h3"></div>
</div>
</div>
<a href="javascript:void(0);" id="name">属性</a>
<script>
let elm = document.getElementById("name");
elm.onclick=function (){
let h1 = document.getElementById("h1");
//创建div节点
let div = document.createElement("div");
div.setAttribute("id","h3");
h1.appendChild(h3);
}
</script>
removeChild():删除(并返回)当前节点的指定子节点
<div id="h1">1
<div id="h2">2</div>
</div>
<a href="javascript:void(0);" id="name">属性</a>
<script>
var el = document.getElementById("name");
el.onclick=function (){
var h1 = document.getElementById("h1");
var h2 = document.getElementById("h2");
h1.removeChild(h2);
}
replaveChild():用新节点替换一个子节点
属性:
parentNode:返回节点的父对象
Element
Element 对象表示 HTML 元素 Element 对象可以拥有类型为元素节点文本节点、注释节点的子节点。
创建:通过documetn获取和创建
方法:
removeAttribute():删除属性
点击a标签删除属性
<a href="" id="name">属性</a>
<script>
//点击a标签删除href属性
var elementById = document.getElementById("name");
elementById.onclick=function (){
var elme = document.getElementsByTagName("a")[0];
elme.removeAttribute("href");
}
</script>
setAttriibutre():设置属性 设置属性案例
<input type="button" value="效果">
<input id="name" type="button" value="设置效果" >
<script>
//通过document调用input的id值来设置input变改为文本框
var elementById = document.getElementById("name");
elementById.onclick=function (){
var elme = document.getElementsByTagName("input")[0];
elme.setAttribute("type","text");//设置input中的属性来更改input的属性
}
</script>
修改标签体内容 属性 innerHTML
<P id="text">小样</P>
<script>
var emo=document.getElementById("text")
alert("改变");
emo.innerHTML="小菜";
</script>
效果
获取页面标签(元素)
代码:
document.getElementById(“id值”)通过Html中的id获取元素对象
document.getElementById(“id值”)
通过所设置的id值的HTML对象可以来修改原对象的属性值
代码解释:
<body>
<img id="img" src="../img/mmexport1646140315201.jpg"><!-- 原图片-->
<script>
var id1= document.getElementById("img");
id1.src="../img/QQ截图20220302181120.png";//更换了图片
</script>
</body>
事件
功能
什么被什么执行了操作,触发的什么代码
绑定事务
直接在HTML标签上,指定事件的属性操作,属性值就是js代码
事件:onclick 单击事件
通过js获取元素对象,指定事件属性,设置一个函数
案例 头像点击更换
<script>
var fa=false;
function fun(){
var src1=document.getElementById("x");
if (fa){
src1.src="../img/x.png";
fa=false;
}else {
src1.src="../img/y.png";
fa=true;
}
}
</script>
</head>
<body>
<img src="../img/x.png" id="x" onclick="fun()">
</body>
<br>
BOM
基本概念
Brwser Object Model 浏览器对象模型
对象
Window:窗口对象
属性
获取其他BOM对象
history:对History对象的只读引用 获取到[object History]
location:对窗口或框架的Location对象. 获取到当前页面的地址信息 http://localhost:63342/js/cn/js/
Navigator:对Navigator对象的只读引用 获取到导航器的信息 function Navigator() { [native code] }
Screen:对Screen对象的只读引用 获取到屏幕的信息 function Screen() { [native code] }
获取DOM对象
document:获取文档对象
使用格式
window.方法名(); 对象不需要创建直接使用
方法名(); window可以省用
方法
弹出框:
alert():显示带有一段消息和一个确定按钮的警告框
confirm():显示带有一段消息以及确认按钮和取消按钮的对话框
确定返回true,取消返回 false
var sc= confirm("确定退出或取消");
if (sc){
document.write("进入")
}else {
document.write("退出")
}
propet():显示提示用户输入的对话框
用户输入什么返回什么值
关闭和开启方法
close():关闭浏览器
理解:
想关闭哪个调用哪个
open():打开一个浏览器窗口
<script>
var num=document.getElementById("x");
var se;
num.onclick=function (){
//打开窗口
se= open("https://www.baidu.com");
}
var nu1=document.getElementById("y");
nu1.onclick=function (){
//关闭窗口
se.close();
}
定时器方法
setTimeout():指定的毫秒数后调用函数,或计算表达式 时间之后就执行某些代码,只执行一次 一次性的定时器 拥有一个返回值 唯一的标识,用于取消定时器
参数: :js代码或对象 毫秒值
clearTimeout(): 取消由setTimeout() 方法设置的 timeout 一般时间卡在一秒钟
setInterval():
按照指定的周期(以毫秒计) 来调用函数或计算表达式 循环定时器 拥有一个返回值
参数:js代码或对象 毫秒值
注意:
直接在定义是无法让代码执行循环的
setInterval(alert('xxxx'),2000);
通过对象定义的名称来调用实现循环效果
function fun(){
alert('xxx')
}
setInterval(fun,2000);
clearInterval():
取消由 setInterval()设置的timeout. 唯一的标识,用于取消定时器
var Interval = setIntervalt(fun,2000);
clearInterval(timeout); //取消谁就调用谁
案例实现:图片切换
<script>
var c=true;
var p=true;
//定义函数
function fun(){
//定义循环判断
while (p){
var b=document.getElementById('x');
if (c){
b.src="../img/x.png"
c=false;
p++;
}else {
b.src="../img/ban_2.png"
c=true;
p++;
}
if (p>3){
break;
}
}
}
setInterval(fun,200);
</script>
</head>
<body>
<img src="../img/x.png" id="x" >
</body>
Navigator:浏览器对象
creen:显示器屏幕对象
History:历史记录对象
获取History对象
window.history:[object History]
history
方法
back():加载history列表中的前一个URL(前进)
forward():加载history列表中的下一个URL(后退一步)
go():加载history列表中的某个具体页面 (包括前进或者后退)
go(参数):
正数:前进几个历史记录
负数:后退几个历史记录
属性
length 返回当前窗口历史列表中的URL数量(历史记录中当前窗口使用的个数)
Location:地址栏对象
Location:对象包含有关URL的信息
地址栏对象解释: 当前浏览器窗口地址栏的信息
获取Location
可以通过windos来获取Location
windos.Location
可以直接使用
Location
方法
reload:刷新
通过Location.reload调用方法
href:设置或返回完整的URL
返回完整的URL
let href = location.href;
alert(href);
通过设置的URL,前往URL地址
<input type="button" value="哔哩哔哩" id="x">
<script>
var c=document.getElementById('x');
c.onclick=function (){
location.href="https://www.bilibili.com";
}
</script>
案例:搭配innerHTML来使用制定跳转页面
<span id="red" >5</span>秒后跳转....
</p>
<script>
//初始化值为5;
var sec=5;
function fun(){
//进入函数方法每次减一
sec--;
//调用id
let elementById = document.getElementById("red");
//修改HTML内容
elementById.innerHTML=sec+"";//调用sec 修改为字符串形式
if (sec<1){
document.getElementById("red");
location.href="http://www.baidu.com";
}
}
//定义定时器
setInterval(fun, 1000);
a标签使用js代码
案例:
<a href="javascript:void(0)">使用运算符阻止返回值</a>