JavsScript+dom

JavsScript+dom
JavsScript+dom
DOM(兼容性)
⽤于操作⽂档树
1、帮助我们找到标签
直接查找
间接查找
getElementById
getElementsByTageName
2、标签操作
内容：
1、⽂本框 t.value='aaa'
2、a标签 b.innerText(没有html格式，纯⽂本)
b.innerHtml(有html格式)
例⼦：⽂本框⽂字消失
class：
1、引⽤class样式中的注意
className
classList.remove(名)
classList.add(名)
2、直接定义样式
tag=document.getElementsById('i1')
tag.style.color='red';
tag.style.fontSize='40px';
例⼦：弹出框（⽤遮罩）
属性：
<input nihao='tlh' name='n1' type='text' type='text'/>
1、attributes // 获取所有标签属性
2、setAttribute(key,value) // 设置标签属性
3、getAttribute(key) // 获取指定标签属性
4.removeAttribute（key） //移除指定标签属性
====>dom：1、利⽤属性来设置
ck.setAttribute('checked','checked')
2、利⽤对象
babObj.checked = true
====>jquery:操作属性 prop
标签
创建标签：
字符串
对象
操作添加
1.
字符串：html、⽂本
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentText("beforeEnd",obj);
'afterBegin' 当前内部第⼀个 'beforeEnd'当前内部最后⼀个
beforeBegin 当前外部第⼀个 'afterEnd' 当前外部最后⼀个
对象
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
2、
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])
xxx.removeChiled(tag)
点赞：
创建标签、定时器（⼤⼩，位置，透明度）
1、this 当前触发的标签
2、createElement创建标签
3、appendChild添加标签
4、setInterval创建定时器
clearInterval删除定时器
5、removeChild删除⼦标签
邮箱删除后消息消失
setTimeOut clearTimeout 不会重复,到⼀定时间后执语句后停⽌
interval clearInterval ⾃动重复
5、样式操作
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
6、位置操作
onscroll滑轮事件
document.body.scrollTop = 0 获取windows页⾯滑轮⾼度
7、提交表单
var form = document.getElementById('f1');
form.submit(); 把a标签设置为提交
8、其他操作
事件：
1、this，当前触发事件
2、全局和某个框都可触发，全局事件绑定 window.onKeyDown=function(){}
3、event 包含了事件相关内容
4、默认事件:
⾃定义优先：a中跳转、submint提交都是⾃定义先执⾏
默认优先：chekbox 是默认事件先执⾏。