目录

  •   Dom
  • HTML Dom
  • Node:节点对象,其他5个的父对象
  • 修改标签体内容 属性 innerHTML
  •   事件
  •   BOM
  • 定时器方法
    • Navigator:浏览器对象
    • creen:显示器屏幕对象
    • History:历史记录对象
  • Location:地址栏对象
  • a标签使用js代码

  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,取消返回 falsevar 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--;//调用idlet 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>

JavaScript Dom 事件 Bom 定时器方法相关推荐

  1. html鼠标离开点击停留,Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)...

    本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: ...

  2. javascript / DOM、BOM、document、window 区别和联系

    作者:Vkki 链接:https://www.zhihu.com/question/33453164/answer/56549408 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...

  3. javaScript DOM编程常用的方法与属性

    DOM是Document Object Model文档对象模型的缩写.根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件. Node接口的特性和方法 ...

  4. JavaScript addEventListener()事件监听方法

    addEventListener()方法将事件处理程序附加到指定的元素. 您可以使用removeEventListener()方法轻松删除事件侦听器. 语法:element.addEventListe ...

  5. javascript DOM事件总结

    1 <html> 2 <title>事件</title> 3 <meta charset="utf-8"/> 4 <body& ...

  6. JavaScript DOM 编程艺术 公用方法

    1. load方法 function addLoadEvent(func) {var oldonload = window.onload;if (typeof window.onload != 'fu ...

  7. 从八道面试题看JavaScript DOM事件机制

    原文:https://segmentfault.com/a/1190000013894510#articleHeader0 As we all know,事件机制其实很简单,无非冒泡和捕获 这两点,笔 ...

  8. javascript原生事件句柄、BOM、DOM对象属性方法总结

    javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄 事件句柄 类型 说明 onabort 事件句柄 图像加载被中断 onblur 事件句柄 元素失去焦点 onfocus 事 ...

  9. 『前端学习笔记』 JavaScript 事件与对象、DOM与BOM

    参考视频:[极客学院]Web前端开发教学 - 第一部分:H5+CSS+JS 参考文档:JavaScript 教程 W3school 文章目录 DOM对象 HTML DOM 操作HTML 操作CSS E ...

最新文章

  1. Visual Studio 20年
  2. 带评分的Jupyter资源列表：270个开源项目，总计24w星，帮你快速找代码
  3. 两个构件的重合点_初三物理易错点:你被眼睛欺骗了，那些『平面镜成像』中的困惑...
  4. linux配置usb主从_一种Linux下USB设备主从切换的实现
  5. C++ 包含目录、库目录、附加依赖项详解
  6. 安装与配置-以前的某个程序安装已在安装计算机上创建挂起的文件操作......
  7. 第八十六期:“程序员锁死服务器导致公司倒闭”案正式开庭审理
  8. 【HDOJ】4363 Draw and paint
  9. Stanford CS230深度学习（三）调参、正则化和优化算法
  10. 快速向表中插入大量数据Oracle中append与Nologgin的作用
  11. 拆解兼容Qi充电标准的三星无线充电器
  12. 评价的等级优良差_老师问：小学考试用优良等级评价，可取吗？
  13. 5G无线关键技术 — 低时延高可靠物联网设计
  14. 如何批量下载网站中的超链接（一次性下载网页中所有可能的PDF文件）
  15. 用sqlyog打开.sql文件
  16. 新技术预研Android
  17. python 课程设计题目_数据分析师能力培养：业务与技术的完美结合
  18. java编译器 jit_JIT编译器
  19. PEANUT-WF模块开发-Peanut.Common
  20. 读书笔记写法--怎么做读书笔记

热门文章

  1. 搜索新风口与营销新变量
  2. 如何修改matlab系统语言,如何对matlab2013b进行语言修改成中文
  3. Java程序员高效学习的六个中肯建议
  4. 搜索官方的一篇相关性文章分享
  5. MySQL查询不同年份母亲节_历年母亲节谷歌doodle有什么不同 google母亲节logo变化史...
  6. Python发送网易邮件554错误解决
  7. mysql concat 不同字符集_字符编码 - 如何将整个MySQL数据库字符集和排序规则转换为UTF-8？...
  8. 2012意大利之行2：梵蒂冈圣彼得大教堂
  9. zabbix监控第一台服务器
  10. web课程设计网页规划与设计：文化网站设计——中国水墨风书画艺术网站(12个页面)