day46 bom dom

BOM和DOM

定义

BOM是指浏览器对象模型，它使js有能力与浏览器进行‘对话’

DOM是指文档对象模型，通过它，可以访问HTML文档的所有元素

BOM

BOM对象中，window关键字可以不写

window对象

window方法	功能
window.innerHeight	浏览器窗口的内部高度
window.innerWidth	浏览器窗口的内部宽度
window.open()	打开新的窗口
window.close()	关闭当前窗口

window.open('http'.'','width=400px;heigth=800px,top=200px,left='200px')
window.close()

window子对象

navigator(了解即可)

浏览器对象，通过这个对象可以判定用户所使用的的浏览器，包括浏览器相关信息

navigator.appName //Web浏览器全称
navigator.appVersion //Web浏览器厂商和版本的详细字符串
navigator.userAgent //客户端绝大部分信息
navigator.platform //浏览器运行所在的操作系统

screen对象（了解即可）

屏幕对象，不常用

screen.availWidth //可用的屏幕宽度
screen.availHeight //可用的屏幕高度

history对象（了解即可）

浏览历史对象

window.history  //对象包含浏览器的历史
history.forward() //前进一页
history.back()  //后退一页

location对象

window.location //用于获得当前页面的地址（URL），并把浏览器重定向到新的页面
location.href  //获取href
location.href='URL' //跳转到指定页面
location.reload() //重新加载页面

弹出框

可以在js中创建三种详细框：警告框、确认框、提示框

警告框

警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确认按钮才能继续进行操作。

语法：

alert('你看到了吗')

确认框（了解即可）

确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确认或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为true。如果用户点击取消，那么返回值为false

语法：

confirm('你确定吗')

提示框（了解即可）

提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操作。如果用户点击确认，那么返回值为true。如果用户点击取消，那么返回值为false

语法：

prompt('请在下方输入','你的答案')
prompt('请在下方输入')

计时相关

通过js可以在一定时间贱内之后执行代码，而不是在函数被调用后立即执行。称为计时事件

setTimeout()

设置从当前起多少毫秒起执行

语法：

var t=setTimeout('js语句',毫秒)

clearTimeout()

取消setTimeout的设置

语法：

clearTimeout(setTimeout_variable)

setInterval()

按照指定的周期（以毫秒级）来重复调用函数或计算表达式

语法：

var t=setInterval('js语句'，时间间隔毫秒)

clearInterval()

取消setInterval的设置

语法：

clearInterval(setInterval_variable)

<script>
    // function f() {
    //     alert('hello body')
    // }
    // function f1() {
    //     var t=setTimeout(f,3000)
    //     function f2() {
    //         clearTimeout(t)
    //     }
    //     setTimeout(f2,6000)
    // }
    // f1()

     function f() {
        alert('hello body')
    }
    function f1() {
        var t=setInterval(f,3000)
        function f2() {
            clearInterval(t)
        }
        setTimeout(f2,6000)
    }
    f1()
</script>

DOM

HTML DOM树

DOM标准规定HTML文档中的每个成分都是节点（node）：

文档节点（document对象）：代表整个文档

元素节点（element对象）：代表一个元素

文本节点（text对象）：代表元素（标签）中的文本

属性节点（attribute对象）：代表一个属性，元素（标签）才有属性

注释是注释节点（comment对象）

js可以通过DOM创建动态的HTML：

js能够改变页面中的所有HTML元素

js能够改变页面中所有的HTML属性

js能够改变页面中所有的css样式

js能够对页面中所有事件做出反应

查找标签

直接查找

document.getElementById  //根据id获取标签 获取的直接是对象本身
document.getElementsByClassName  //根据class属性获取 获取的是数组不是对象本身
document.getElementsByTagName  //根据标签名获取标签合集 获取的是数组不是对象本身

间接查找

parentElement	//父节点标签元素
children		//所有子标签
firstElementChild	//第一个子标签元素
lastElementChild	//最后一个子标签元素
nextElementSibling	//下一个兄弟标签元素
previousElementSibling	//上一个兄弟标签

var pEle=document.getElementById('p1')
pEle.parentElement
document.getElementsByTagName('span')[0]

节点操作

创建节点

语法：

document.createElement(标签名)

添加节点

语法：

somenode.appendChild(newnode)  //追加一个子节点（作为最后的子节点）
somenode.insertBefort(newnode,某个节点) //吧增加的节点放到摸个节点前面

删除节点

语法：

somenode.removeChild(要删除的节点) //获得要删除的元素，通过父元素调用该方法删除。

替换节点

语法:

somenode.replaceChild(newnode,某个节点)

属性节点

var divEle=document.getElementById('d1')//获取文本节点的值
divEle.innerText
divEle.innerHTML

var divEle=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')
//自带的属性还可以直接
imgEle.src=''

var imgEle=document.createElement('img')//创建节点
imgEle.src='111.jpg'//添加属性
imgEle.setAttribute('username','jason')//自定义属性
dEle.append(imgEle)//添加节点
aEle.innerText='点我'//设置文本值
dEle.insertBefore(aEle,imgEle)//指定位置添加元素
dEle.innerHTML='<h1>jdjdj</h1>'//设置文本值 HTML识别代码

获取值操作

语法：

elementBode.value  //适用于以下标签 input  select（多选不适用）  textarea

class的操作

className	//获取所有样式类名,字符串
classList//获取所有样式类名，数组
classList.remove(cls)	//删除指定类
classList.add(cls)		//添加类
classList.contains(cls)		//存在返回true，否则返回false
classList.toggle(cls)		//存在就删除，否则添加

var divEle=document.getElementsByTagName('div')[0]
divEle.classList
divEle.classList.remove('bg_red')
divEle.classList.add('bg_red')
divEle.classList.contains('c1')
divEle.classList.toggle('bg_red')

指定css操作

obj.style.backgroundColor='red'

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

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

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

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

事件

事件：当符合某个条件，自动触发的动作响应

onclick		//当用户点击某个对象时调用的事件句柄
ondblclick		//当用户双击某个对象时调用的事件句柄
onfocus		//元素获得焦点
onblur		//元素失去焦点
onchange	//域的内容被改变
onkeydown	//某个键盘按键被按下去
onkeypress	//某个键盘按键被按下并松开
onkeyup		//某个键盘按键被松开
onload		//一张页面或一副图像完成加载
onmousedown	//鼠标按钮被按下
onmouseseout //鼠标被移动
onmouseout	//鼠标从某元素移开
onmouseover //鼠标移动某元素之上
onselect 	//在文本框中文本被选中时发生
onsubmit	//确认按钮被点击，使用的对象是form

js绑定事件的方式

方式1 不推荐使用

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

方式2

function func() {
            alert('我被点击了')
            }
var i1Ele = document.getElementById('d1');
i1Ele.onclick = function () {
                // i1Ele标签被点击之后 你能做的事
                func()
            }

如何解决js代码报错:

方式1：

利用onload等待某个对象加载完毕之后再执行

window.onload=function(){
    
}

方式2：

直接将js代码写在body最下面

jQuery

类似于python后端的模块，帮你封装了一些简易的操作（有点像ORM)

语法结构

jQuery('选择器').action(属性)

$('选择器').action(属性)

如何使用jQuery

必须先导入才能使用

查找标签

基本选择器

$('#id')	//id选择器
$('tagName')	//标签选择器
$('.className')	//class选择器
$('div.c1')		//找到有c1 class类的div标签
$('*')		//所有元素选择器
$('#id,.className,tagName')		//组合选择器

层级选择器

$('x y')	//x的所有所有后代y
$('x>y')	//x的所有儿子y
$('x+y')	//找到所有紧挨着在x后面的y
$('x~y')	//x之后所有的兄弟y

$('p')
$('p').css('color','green')
$('#d1')
$('div span')