DOM 是w3c标准下处理文档(网页)的标准接口
获取节点
DOM为我们提供了一个全局(内置)对象document,我们要操作网页文档,就要调用document对象(相当于封装好的一些函数)
通过ID获取
document.getElementById("main")
通过选择器获取
应该是不常用,使用querySelectorAll()选择列表的第二个元素_世界尽头与你的博客-CSDN博客
document.querySelector("#main .nav")
document.querySelectorAll('#example-container li:first-child');
通过class名获取
document.getElementsByClassName("left")
通过标签名获取
document.getElementsByTagName("p")
特殊标签的获取
获取htnl标签 document.documentElement
获取head标签 document.head
获取body标签 document.body
获取title标签 document.title
一般情况下,推荐使用 ID获取 或者 选择器获取 ,比较方便。
操作html内容
节点.innerHTNL 获取(能获取就能修改)HTML内容
节点.innerText 获取/修改 元素文本内容(老版本不支持,用.textContent代替)
监听事件
事件种类
鼠标事件:
左键单击:onclick
左键双击:onmouseover
鼠标移入:onmouseout onmouseleave
鼠标移出: onmouseout onmouseleave
鼠标按下:onmousedown
鼠标移动:onmouseve
鼠标抬起:onmouseup
右键单击:oncontextmenu
键盘事件
键按下: onkeydown onkeypress
键抬起: onkeyup
系统事件
加载完后 onload
加载出错后 onerror
窗口调整大小时 onresize
滚动时 onscroll
表单事件
获取焦点后 onfocus
失去焦点后 onblur
改变内容后 onchange
重置后 onreset
选择后 onselect
提交后 onsubmit
监听事件写法
节点.事件=函数
document.getElementById("main").οnclick=function(){alert(1)};
这里的函数叫做事件函数,事件函数不会(也许是无法)自动执行,而是当事件触发执行
事件函数this指向
在事件函数中,关键字this 表示触发事件节点的对象
操作节点的标签属性
合法标签属性
直接使用 节点.属性 的方式。console.log(节点.id);节点.title="新的title"
class名字不能.class,而是使用.className代替。
自定义的标签属性
不能直接使用.操作。
设置setAttribute 获取getAttribute 移除 removeAttribute。
操作样式
修改样式
元素样式由css控制,JavaScript要想改变元素的样式,那就相当于改变css(通过js来获取,修改)
元素css样式的书写位置有三种:外部样式表,内部样式表,行内样式。
js操作样式时,本质上就相当于要操作这三种位置的css
外部样式表:
前端的js不能修改外部文件,所以不能通过直接修改外部样式来改变元素(类似于java的私有属性不能被访问)
内部样式表:
内部样式放置到style标签中,而style又在当前页面中,所以能够被js控制,但是操作繁琐,不推荐
行内样式:
直接写在标签中,优先级最高,js最常用方式
节点.style.属性 来控制单个的行内样式
节点.style.属性 来控制单个的行内样式。
节点.style.cssText 来控制节点的所有行内样式
当单个标签操作的样式比较多时,使用改变class来改变样式会方便
获取样式
.style只能获取行内样式,要获取元素的最终样式使用 getcomputedStyle(节点)
类名的操作
使用.className 可以来操作标签的类名,但是需要新加一个类名,或者去掉某个类名时
,使用.className比较麻烦。推荐API.classList来操作类名
添加:节点.classList.add("类名")
移除:节点.classList.remove("类名")
切换(有则删,无则加):节点.classList.toggle("类名")
是否有某个类名(得到布尔值):节点.classList.contain("类名")