DOM与BOM

Posted 2020-11-22 hj59988326

目录

• Bom（Browser Object Model）
  • window对象
  • navigator对象
  • screen对象
  • history对象
  • location对象
  • 弹出框
  • 计时相关
  • setInteval
  • clearInrerval()
• DOM（Document Object Model）
  • 直接查找
  • 间接查找
  • 节点操作
  • 添加节点
  • 删除节点
  • 替换节点
  • 属性节点
  • attribute操作
  • class的操作
  • 指定css操作
• 常用事件
  • 绑定方式
• jQuer基础语法
  • 基本选择器
    • id选择器
    • 标签选择器
    • class选择器
    • 配合使用
    • 组合选择器

Bom（Browser Object Model）

是指游览器对象模型，他使javascript有能力与游览器进行对话

window对象

所有游览器都支持window对象。他表示游览器窗口

一些常用的window方法：

• window.inneHeight：游览器窗口内部高度
• window.innerWidth：游览器窗口的内部宽度
• window.open()：打开新窗口
• window.close()：关闭当前窗口

navigator对象

游览器对象，通过这个对象可以判断用户所使用的游览器，包含了游览器选相关信息

screen对象

屏幕对象，不常用

history对象

window.history对象包含游览器的历史

览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。

location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

常用的属性和方法：

获取URL：location.href

跳转指定页面：location.href=‘URL‘

重新加载页面：location.reload()

弹出框

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框：alter(‘123’)；

确认框：confirm(‘123‘)；

提示框：prompt(‘123‘,‘321‘)；

计时相关

通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

setTimeout() 语法：

? var t=setTimeout(‘js语句‘，毫秒)

clearTimeout() 语法:

? clearTimeout(setTimeout_variable)

列子：

// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alter(123);},3000)

// 取消setTimeout设置
clearTimeout(timer)

setInteval

setInterval()方法可以按照指定的周期（以毫秒计）来调用函数或计算表达式

setInterval()方法会不停地调用函数，直到clearInterval()被调用窗口被关闭。由setInrerval()返回的id值可用作clearInterval()方法的参数

语法：

? sentInterval(‘JS语句‘,时间间隔‘)

clearInrerval()

clearInterval()方法可以取消由setInterval()设置的timeout

clearInterval()方法的参数必须是由setInrerval()返回的id值

语法：

? clearInterva(setinterval返回的id值)

列子：

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function){console.log(123);},3000)
// 取消setInterval设置
clearInterval(timer)

DOM（Document Object Model）

是一套对文当的内容进行抽象和概念化的方法

当网页被加载时，游览器会创建页面的文当对象模型（Document Object Model）。

• 文当节点（document对象）：代表整个文当
• 元素节点（element对象）：代表一个元素（标签）
• 文本节点（text对象）：代表元素（标签）中的文本
• 属性节点（attribute对象）：代表一个属性，元素（标签）才有属性

直接查找

documen.getElementById 根据ID获取一个标签

document.getElementsByClassName 根据class属性获取

document.getElementsByTagNmae 根据标签名获取

间接查找

parentElement 父节点标签元素

children 所有子标签

firstElementChild 第一个子标签元素

lastElementChild 最后一个子标签元素

nextElementSibling 下一个兄弟标签元素

previousElementSibling 上一个兄弟标签元素

节点操作

创建节点

createElement（标签名）

var divELe = document.createElement(‘div‘);

添加节点

语法：

追加一个子节点作为最后的子节的

somenode.appendChild(nwenode);

把增加的节点放到某个节点的前边。

somenode.insertBefore(newnode,某个节点);

示列

var imgEle=document.createElement('img');
imgEle.setAttribute('src','http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg')
var d1Ele=document.getElementById('d1');
diEle.appendChild(imgEle)

删除节点

获取要删除的元素，通过父元素调用该方法删除。

somenode.removeChild(要删除的节点)

替换节点

somenode.replaceChild(newnode,某个节点)

属性节点

获取文本节点的值

var divEle=document.getElementById('d1')
divEle.innerText
divEle.innerhtml

设置文本节点的值

var divElement=document.getElementById('d1')
divEle.innerText='1'
divEle.innerHTML='<p>2</p>'

attribute操作

var divEle=document.getElementById('d1');
divEle.setAttribute('age','18')
divEle.getAttribute('age')
divEle.removeAttribute('age')

class的操作

className 获取所有样式的类名(字符串)

classList.remove(cls) 删除指定类

classList.add(cls) 添加类

classList.contains(cls) 存在返回true，否则返回false

classList.toggle(cls) 存在就删除，否则添加

指定css操作

js操作css属性规律：

1.对于没有中横线的css属性一般直接用style.属性名即可如：

obj.style.margin

obj.style.width

obj.style.left

obj.style.position

2.对含有中横线的css属性，将中横线后面的第一个字母换成大写即可。如：

obj.style.marginTop

常用事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对

绑定方式

方式一：

<div id='d1' onclick='changColor(this);'>点我</div>
<script>
    function changColor(ths){
        ths.style.backgroundColor='green';
    }
</div>

方式二：

<div id='d2'>点我</div>

<srcipt>
    var divEle=document.getElementById('d2');
    divEle.onclick=function(){
        this.innerText='呵呵';

</srcipt>

jQuer基础语法

$(selector).action()

基本选择器

id选择器

$(‘#id‘)

标签选择器

$(‘tagName‘)

class选择器

$(‘.className‘)

配合使用

$(‘div.c1‘) 找到有c1 class类的div标签

组合选择器

$(‘#id, .className，tagName‘)