dom操作
nodeType属性
文档节点:document:
元素节点:Element
属性节点:Attr
文本节点:text
document 调用者 文档对象
返回值:获取到的单个元素
js的id选择器只会获取满足条件第一个元素
Element:获取元素位置 clientHeight:获取元素高度包括padding部分,但不包括border、margin
tagName
className
Element.classList.add()/remove/contains/toggle()
访问父节点:parentNode
访问兄弟节点:nextSibling 下一个兄弟节点 nextElementSibling 下一个元素兄弟 获取元素兄弟节点
上一个兄弟节点:previousSibling previousElementSibling 上一个元素兄弟 获取元素兄弟节点
createElement("元素名") :创建空白元素
appendChild(要被添加的元素) 调用者父元素 添加到数组的结尾
insertBefort(添加的元素,参照元素) 调用者父元素 插入到某一个元素的前面
removeChild:(要移除的子节点) 调用者父元素 remove() 调用者即删除的元素
replaceChild:(要去替换的元素,被替换的元素)调用者父元素
cloneNode(true/false) 深度克隆(包含所有子节点)/ 浅度克隆(只克隆当前元素节点)
innerHtml 以文本的形式读写内容
innerText 以文本的形式读写内容
querySelector("css选择器") 调用者document 默认获取满足条件的第一个元素并返回回来
querySelectorAll("css选择器") 调用者document 默认获取满足条件的所有元素并以伪数组的形式返回回来
读属性值 :getAttribute("属性key") 返回字符串
写入属性值 :setAttribute("属性key","写入的属性值") 没有返回值
事件处理:DOM2事件:addEventListener(click,函数)(适合多个事件)
DOM0事件:id名.onclock=函数体
鼠标效果(事件加on):
click:单击
dblclick:双击
mousedown:按下
mouseup:抬起
mousemove:鼠标移动持续触发
mouseover:鼠标移入
mouseout:鼠标移出
mouseenter:鼠标进入
mouseleave:鼠标离开
ev.stopPropagation(); 组织事件冒泡
clientX clientY 点击位置距离当前body可视距离x、y坐标
pageX pageY 对整个页面来说 包含卷曲部分
screenX screenY 点击位置距离屏幕的x、y坐标
offsetX offsetY 点击位置距离相对于定位元素的x、y坐标
addEventListener('click',function(ev):监听
ev.preventDefault();阻止默认行为
history 必须产生浏览器记录才有效
前进history.forward()
history.go(1)
后退history.back()
history.go(-1)
// location.assign("网址") 在当前窗口跳转页面 产生历史记录
// location.replace("网址") 替换当前窗口地址 达到跳转的作用 不会产生历史记录
// location.reload() 重载 相当于刷新
// location.href 拿到整个地址栏数据
// location.search 拿到?后面所有的数据包含这个问号
// 1.定时器:指定时间间隔 重复运行的函数
// setInterval(执行的匿名函数.函数名,时间间隔毫秒数)
// 2.延时器:指定时间到达后,只运行一次
// setTimeout(执行的匿名函数/函数名,等待时间毫秒数)
// 清除延时器 clearTimeout(哪一个延时器)
parse(string) 调用者 JSON 将字符串类型的数据转成对应的对象
stringify(对象) 将对象转成字符串 调用者 JSON

浙公网安备 33010602011771号