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';

例子：弹出框（用遮罩）

属性：

1、attributes // 获取所有标签属性

2、setAttribute(key,value) // 设置标签属性

3、getAttribute(key) // 获取指定标签属性

4.removeAttribute（key） //移除指定标签属性

====>dom：1、利用属性来设置

            ck.setAttribute('checked','checked')

2、利用对象

babObj.checked = true

====>jquery:操作属性 prop

标签

创建标签：

字符串

对象

操作添加

字符串：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 是默认事件先执行

JavsScript+dom

相关推荐