一. BOM和DOM
JavaScript分为ECMAScript, BOM, DOM.
BOM( Browser Object Model )是指浏览器对象模型, 它使JavaScript有能力与浏览器进行交互.
DOM( Document Object Model )是指文档对象模型, 通过它,可以访问HTML文档的所有元素.
二. window对象
所有浏览器都支持window对象. 它表示浏览器窗口.
所有文档包含框架( frame或iframe标签 ), 浏览器会为HTML文档创建一个window对象, 并为每个框架创建一个额外的window对象.
没有应用于window对象的公开标准,不过所有浏览器都支持该对象.
所有JavaScript全局对象,函数以及变量均自动成为window对象的成员.
全局变量是window对象的属性,全局函数是window对象的方法.
一些常用的window方法 :
· window.innerHeight - 浏览器窗口的内部高度
· window.innerWidth - 浏览器窗口的内部宽度
· window.open() - 打开窗口
· window.close() - 关闭当前窗口
window 子对象 :
1. navigator对象浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含浏览器相关信息
①. navigator.appName//返回web浏览器全称
②. navigator.appVersion//返回web浏览器厂商和版本的详细字符串
③. navigator.userAgent//客户端绝大部分信息
④. navigator.platform//浏览器运行所在的操作系统
2. screen对象屏幕对象
①. screen.availWidth//可用的屏幕宽度
②. screen.availHeight//可用的屏幕高度
3. history对象
浏览历史对象,包含了用户对当前页面的浏览历史,但我们无法查看具体的地址,可以简单的用来前进或后退一个页面.
①. distory.forward()前进一页
②. distory.back()后退一页
4. location对象
window.location对象用于获得当前页面的地址(URL),并把浏览器重新定向至新的页面.
①. location.href获取URL
②. location.href = "https://www.it610.com/article/URL"跳转至指定URL
③. location.reload()重新加载页面
三. BOM
1. 弹出框
可以在JavaScript中创建三种消息框 : 警告框, 确认框, 提示框
①. 警告框 :
警告框经常用于确保用户可以得到某些信息.
当警告框出现后, 用户需要点击确认按钮才能继续进行操作.
语法 : alert ( "你过来啊" )
②. 确认框
确认框用于使用户可以验证或者接受某些信息.
当确认框出现后,用户需要点击确定或者取消按钮才能进行操作.
如果用户点击确认,那么返回值为true. 如果用户点击取消,那么返回值为false.
语法 : confirm ( "你过来啊" )
③. 提示框
提示框经常用于提示用户在进入界面前输入某个值.
当提示框出现后, 用户需要输入某个值,然后点击确认或者取消按钮才能继续操作.
如果用户点击确认, 那么返回值为输入的值. 如果用户点击取消,那么返回值为null.
语法 : prompt ( "你过来啊" )
2. 计时相关
通过使用JavaScript,我们可以在一定时间之后执行代码,而不是在函数被调用后立即执行.
①. setTimeout ()
语法 : var t = setTimeout ( "JS语句",毫秒 );
setTimeout()方法会返回某个值.在上面的语句中,值被储存在名为t的变量中. 如果取消这个setTimeout()操作, 可以使用这个变量名来指定.
setTimeout()的第一次参数是含有JavaScript语句的字符串,或者对函数的调用.第二个参数是指从开始起多少毫秒之后执行第一个参数.
②. clearTimeout()取消setTimeout的设置
语法 : clearTimeout( 存储setTimeout返回值的变量 )
③. setInteral()
setInterval() 方法可按照指定的周期(以毫秒计算)来调用函数或计算表达式.
setInterval() 方法会不停地调用函数,直到clearInteral()被调用或窗口被关闭.
④. clearInterval() 方法可取消由 setInterval() 设置的timeout
clearInterval() 方法的参数必须是由 setInterval() 返回的ID值.
四. DOM
DOM是一套对文档的内容进行抽象和概念化的方法.
当页面被加载时.浏览器会创建页面的文档对象模型( Document Object Model )
1. HTMLDOM 树
文章图片
DOM标准规定HTML文档中的每个成分都是一个节点(node) :
· 文档节点( document对象 ) : 代表整个文档
· 元素节点( element对象 ) : 代表一个元素(标签)
· 文本节点( text对象 ) : 代表元素(标签)中的文本
· 属性节点( attribute对象 ) : 代表一个属性,元素(标签)才有属性
· 注释是注释节点( conment对象 )
JavaScript 可以通过DOM创建动态的HTML :
· JavaScript 能够改变页面中的所有HTML元素
· JavaScript 能够改变页面中的所有HTML属性
· JavaScript能够改变页面中的所所有CSS样式
· JavaScript能够对页面中的所有事情做出反应
2. 查找标签
①. 直接查找//可以使用变量接收,接收的是数组类型
document.getElementById根据ID获取一个标签
document.getElementsByClassName根据class属性获取标签,如果有多个标签有同一个类名,取出所有的标签的类型是数组形式,可以根据索引去取具体的某一个标签.
document.getElementsByTagName根据标签名获取标签合集
注意 : 涉及到DOM操作的JS代码应该放在文档的那个位置
②. 间接查找
parentElement父节点标签元素
children所有子标签
firstElementChild第一个子标签元素
lastElementChild最后一个子标签元素
nextElementSibling下一个兄弟标签元素
【前端之BOM和DOM】previousElementSibling上一个兄弟标签元素
3. 节点操作
1. 创建节点
语法 : var x = document.createElement (标签名)
2. 添加节点
语法 : 追加一个子节点 (作为某一个父标签内的最后一个子节点)
somenode(某一个父标签).appendChild(newnode(追加的标签));
把增加的节点放到某个节点的前边.
somenode(某一个父标签).insertBefore(newnode(要添加的标签),以某个节点为参照物);
3. 删除节点
语法 : 获得要删除的元素, 通过父元素调用删除.
取出的父元素.removeChild(要删除的节点)
4. 替换节点
语法 : somenode(要替换节点的父元素).replaceChild(newnode,某个节点);
5. 属性节点
①. 获取文本节点的值 :
var divele = document.getElementById("d1")//将取出的标签赋给变量divele
divele.innerText
divele.innerHTML
②. 设置文本节点的值
divele.innerText = " 标签内容 "//不能识别的标签按照文本字符串添加
文章图片
divele.innerHTML = " 标签内容 "//可以正常识别标签
文章图片
③. 属性操作//只有详细的标签对象才可以使用这种方法
取出的标签.getAttribute("属性名")//获取某一个标签的某一个属性的值
取出的标签.setAttribute("属性名", "新的属性值")//将获取到的属性的值修改为新值.
取出的标签.removeAttribute("属性名")//删除某一个属性
JS自带的属性可以直接通过 .属性名 的方法来获取或设置
img.src//获取图片
img.src = "https://www.it610.com/article/..."//设置图片
6. 获取用户输入或选择的值操作//适用于input,select,textarea标签
语法 : 取出的标签.value
①. document.getElementById("id").value
如果操作的标签是select,那么取出的内容是option内的value对应的值,如果option内没有value属性,则取出对应option标签内容(显示在用户面前的内容)
7. class操作
语法 : 取出的标签.className//获取所有样式类名(字符串类型)
语法 : 取出的标签.classList//获取取出标签的样式类名(数组形式)
①. 删除某一个标签的某一个样式类 :
取出的标签.classList.remove("要删除的类名")
②. 给某一个标签添加某一类名 :
取出的标签.classList.add("要添加的类名")
③. 判断某一个标签是否含有某一个样式类 :
取出的标签.classList.contains("要判断的类名")
④. 切换(删除和添加切换)
取出的标签.classList.toggle("某一个类名")
8. 指定css操作
语法 : 取出的标签.style.backgroundColor = "red"//将某一个标签的背景颜色编程红色.
JS操作css属性的规律 :
①. 对于没有中横线的css属性一般使用 style.属性名 就可以.如 :
取出的标签.style.margin
取出的标签.style.width
取出的标签.style.left
取出的标签.style.position
②. 对含有横线的css属性,将中横线去掉并且将中横线后面的第一个字母换成大写
取出的标签.style.marginTop
取出的标签.style.barderLeftWidth
取出的标签.style.zIndex
取出的标签.style.fontFamily
3. 事件
1. 绑定事件
①. //给button绑定一个函数
②.
document.getElementById("b2").onclick =function(){document.getElementById("cc").classList.toggle("c1")}
2. 常用事件
onclick//当用户点击某一个对象是调用绑定的事件
ondblclick//当用户双击某一个对象时调用绑定的事件
onfocus// 用户点击搜索框获得光标
onblur//用户失去光标
//获取焦点 document.getElementById("t1").onfocus = function (ev) { //获取焦点后输入框变为空 this.value="" } //失去焦点 document.getElementById("t1").onblur = function (ev) { this.value = "https://www.it610.com/article/请输入" }
onchange//通常用于表单元素,内容改变是获取内容
onkeydown//某个键盘按键被按下触发事件(例如 : 回车)
onkeypress//某个键盘按键被按下并松开
onkeyup//某个键盘按键被松开
onload//一张页面或一幅图像加载完成
onmousedown//鼠标按钮被按下
onmousemove//鼠标被移动
onmouseout//鼠标从某元素上移开
onmouseover鼠标移动到某元素之上
onselect//在文本框的文本被选中时触发事件
onsubmit//确认按钮被点击,使用的对象是form.
转载于:https://www.cnblogs.com/dong-/p/9600191.html
