JavaScript基础——基础交互

我们想要操作元素，首先需要获取元素

元素的获取方式

• id获取

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

    • 通过id获取因为id是唯一的，所以我们我们限定获取范围是document

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

HTML：    

        <div id="box"></div>

JS：

        var myBox = document.getElementById("box");

        console.log(myBox);

• className获取

  • 基本语法：父元素.getElementsByClassName("class值");

    • 父元素：限定获取范围，可以是直接父级元素，也可以间接的父级元素 ，但是必须是具体的元素，不能是集合

    • 返回值：获取到了返回HTMLCollection(n)，称之为元素集合，获取不到返回空集合，这个集合由下标和值组成，下标从0开始依次递增，天生自带length属性，表示元素集合的长度或集合中元素的个数

    • 获取集合中具体的某一项

      • 元素集合[下标]；

HTML： 

        <p class="test">1</p>

        <p>2</p>

        <p>3</p>

JS：

        var oPs = document.getElementsByClassName("test");   // 获取文档下的

        console.log(oPs);   //HTMLCollection(3);  获取到的是一个元素集合

        // 集合的长度 length

        console.log(oPs.length);  //3

        // 获取集合中具体的某一项

        console.log(oPs[0]);

        console.log(oPs[1]);

• 标签名获取

  • 基本语法：父元素.getElmentsByTagName(“标签名”);

    • 父元素：限定获取范围，可以是直接父级元素，也可以间接的父级元素 ，但是必须是具体的元素，不能是集合

    • 返回值：返回一个元素集合，这个集合由下标和值组成，下标从0开始依次递增，天生自带length属性，表示元素集合的长度或集合中元素的个数

    • 获取集合中具体的某一项

      • 元素集合[下标]；

HTML：

    <ul class="ul">

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

JS：

        var lis = document.getElementsByTagName("li");  

        console.log(lis);  //获取元素集合

        console.log(lis.length);   // 获取集合的长度 length

        // 获取集合中具体的某一项 (具体元素) ：元素集合[下标]；

        console.log(lis[0]);

        console.log(lis[2]);

        console.log(lis[10]); //undefined  相当于这个位置还没有定义，还没有初始化

鼠标事件

• 基本语法：具体元素.on事件类型

  • onclick:单击事件

  • ondblclick：双击事件

  • onmousedown:鼠标按下

  • onmouseup:鼠标抬起

  • onmousemove:鼠标移动

  • onmouseover:鼠标移入

  • onmouseout:鼠标移出

  • onmouseenter:鼠标进入

  • onmouseleave:鼠标离开

• over和enter的区别

  • onmouseover - onmouseout 不仅会触发自身的这个事件还会触发父级对应的这个事件

  • onmouseenter - onmouseleave 只会触发自身的这个事件，不会将父级对应的这个事件触发

元素操作

规则：给值就是设置，不给值就是获取 ，所有操作都必须是具体的元素

操作元素内容

元素没有内容，获取到的是空字符，从元素中获取到都是字符串

• 操作表单元素内容

  • 基本语法：表单元素.value =值; / 表单元素.value;

HTML：

        <input type="text"/>

JS：

        var input = document.getElementsByTagName("input")[0];   // 先获取

        // 再设置：表单元素.value =值;

        input.value = "哈哈哈哈哈";

        input.value = 100;   // 后边设置的会覆盖前边的

• 操作双标签内容

  • 基本语法：双标签.innerText/innerHTML =值; / innerText/innerHTML;

    • 区别：innerText只能识别文本，而innerHTML既可以识别，也可以识别标签

 HTML：

        <select>

                <option>北京</option>

                <option>上海</option>

        </select>

JS：

        var opts = document.getElementsByTagName("option");

        opts[1].value = "测试";

        // 获取的时候优先获取value值，没有value值获取内容值

        console.log(opts[1].value);   //测试

操作元素属性

操作的元素结构上天生自带的

语法：元素.属性= 值; / 元素.属性; 获取到了就是具体的值，是字符串，获取不到是空字符

• id

• className

• title

• ....

HTML：

        <div id="box">我是div</div>

JS：

        // 获取元素

        var div = document.getElementsByTagName("div")[0];

        //设置

        div.title = "hello";

        //获取

        console.log(div.title); // hello

操作样式

语法：元素.style.样式属性 = 值；/元素.style.样式属性;

通过style属性只能操作行内样式，行内样式没有获取到的是空字符串

HTML：

    <div></div>

CSS：

        div{

            width: 300px;

        }

JS：

        // 多次设置 后边覆盖原来的

        div.style.width ="400px";

        div.style.width = "600px";