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