javascript DOM的基础交互

目录

一.元素的获取方式

文档下获取

id获取

类名获取（className）

标签名（tagName）

自定义获取范围

 二.鼠标事件

onmouseleave 鼠标离开 

onmouseover 鼠标移入   /onmouseout 鼠标移出  和   onmouseenter  鼠标进入  / onmouseleave  鼠标离开 

 区别：

三.元素操作

1.操作元素内容

操作表单元素内容

 操作普通闭合标签

2.操作元素属性

2.操作元素样式

window.onload

一.元素的获取方式

---

文档下获取

只要在文档中符合都会获取到

id获取

• 基本语法：document.getElementById(id值);

  • document：文档，表示获取的范围

  • get：获取 Element：元素 By:通过..

  • 返回的是元素对象

• 返回值：获取到了返回具体的元素，获取不到返回null

• 用过id获取只能在document下获取，不能自定义获取范围

  var box = document.getElementById("box1");
        console.log(box);//<div id="box1">我是DIV</div>

        var box = document.getElementById("box2");
        console.log(box); //null

        var myH2 = document.getElementById("my-h2");
        console.log(myH2);

类名获取（className）

• 基本语法：document.getElementsByClassName(类名值);

  • document：文档，表示获取的范围

  • get：获取 Elements：元素（复数） By:通过..

  • 得到的元素对象是动态的伪数组

  • 可以通过遍历的形式打印出来

• 返回值：获取到了：返回一个元素集合 HTMLCollection,这个集合由索引和值组成，0对应第一项，1对应第二项依次类推，天生自带length属性，最后一项的索引是集合.length -1; 获取不到 返回一个空集合 长度是0

• length属性 集合的长度 或 集合中元素的个数

  • 集合.length;

• 获取集合中具体元素

  • 集合[索引]

 var tests = document.getElementsByClassName("test");
        console.log(tests);

        console.log(tests.length); //获取长度

        // 直接输出到控制台
        console.log(tests[0]);
        console.log(tests[1]);
        console.log(tests[tests.length - 1]);

        // 存储起来
        var oDiv = tests[0];
        var oH2 = tests[1];
        console.log(oDiv, oH2);


        var test1 = document.getElementsByClassName("test1");
        console.log(test1, test1.length);
        console.log(test1[0]);
        console.log(test1[1]); //没有这个小标或索引 相当于集合中这个位置还没有初始化，或未定义 返回undefined


        var hello = document.getElementsByClassName("hello");
        console.log(hello, hello.length);
        console.log(hello[0]); //undefined

标签名（tagName）

• 基本语法：document.getElementsByTagName(标签名);

  • document：文档，表示获取的范围

  • get：获取 Elements：元素（复数） By:通过..

• 返回值：获取到了：返回一个元素集合 HTMLCollection,这个集合由索引和值组成，0对应第一项，1对应第二项依次类推，天生自带length属性，最后一项的索引是集合.length -1; 获取不到 返回一个空集合 长度是0

• length属性 集合的长度 或 集合中元素的个数

  • 集合.length;

• 获取集合中具体元素

  • 集合[索引]

   var oLis = document.getElementsByTagName("li");
        console.log(oLis);
        // 获取长度
        console.log(oLis.length);
        // 获取具体的元素
        console.log(oLis[0]);
        console.log(oLis[1]);
        console.log(oLis[2]);
        console.log(oLis[oLis.length - 1]);

根据name获取

• document.getElementsByName(name) 返回在文档范围内具有给定 name 特性的元素。很少使用。 

总结

方法名	搜索方式	可以在元素上调用？	实时的？
querySelector	CSS-