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]);

自定义获取范围

父级元素：必须是具体的元素

• 父级元素.getElementsByClassName(类名值);

• 父级元素.getElementsByTagName(标签名);

// 获取ol下的li

        // 获取父级元素
        var wrap = document.getElementById("wrap");
        console.log(wrap);

        // var oLis = wrap.getElementsByClassName("test");
        var oLis = wrap.getElementsByTagName("li");
        console.log(oLis);
        console.log(oLis.length);
        console.log(oLis[0]);
        console.log(oLis[1]);
        console.log(oLis[oLis.length - 1]);


        // 获取ul下的li
        // 获取父级
        var wrap1 = document.getElementsByClassName("wrap");
        console.log(wrap1);
        console.log(wrap1[0]);
        console.log(wrap1[1]);


        // var ullis = wrap1[1].getElementsByClassName("test");
        var ullis = wrap1[1].getElementsByTagName("li");
        console.log(ullis);
        console.log(ullis.length);
        console.log(ullis[0]);
        console.log(ullis[1]);
        console.log(ullis[ullis.length - 1]);

 二.鼠标事件

---

绑定事件也要是具体的元素，不能够直接去操作集合

• onclick 单击事件

• ondblclick 双击事件

• onmousedown 鼠标按下

• onmouseup 鼠标抬起

• onmousemove 鼠标移动

• oncontextmenu 鼠标右击

• onmouseover 鼠标移入

• onmouseout 鼠标移出

• onmouseenter 鼠标进入

• onmouseleave 鼠标离开 

  <div id="box"></div>
    <ul id="myUl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
      
   var box = document.getElementById("box");
   console.log(box);
   var myUl = document.getElementById("myUl")
   console.log(myUl);
   var oLis = myUl.getElementsByTagName("li");
   console.log(oLis);
    
            // - onclick  单击事件
            box.onclick = function() {
                console.log("单击");
            }
            // - ondblclick  双击事件
            oLis[0].ondblclick = function() {
                console.log("双击事件");
            }
            // - onmousedown 鼠标按下
            oLis[1].onmousedown = function() {
                console.log("鼠标按下");
            }
            // - onmouseup  鼠标抬起
            oLis[1].onmouseup = function() {
                console.log("鼠标抬起");
            }
            // - onmousemove 鼠标移动
            oLis[1].onmousemove= function() {
                console.log("鼠标移动");
            }
            // - oncontextmenu 鼠标右击
            oLis[2].oncontextmenu = function() {
                console.log("鼠标右击");
            }
            // - onmouseover 鼠标移入
            myUl.onmouseover = function() {
                console.log("鼠标移入");
            }
            // - onmouseout 鼠标移出
            myUl.onmouseout = function() {
                console.log("鼠标移出");
            }
            // - onmouseenter  鼠标进入
            myUl.onmouseenter = function() {
                console.log("鼠标进入");
            }
            // - onmouseleave  鼠标离开
            myUl.onmouseleave = function() {
                console.log("鼠标离开");
            }
    </script>

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

 区别：

 onmouseover及onmouseout不仅会触发自身这个事件对应的事情还会将父级这个事件对应做的事情再次触发

  onmouseenter及onmouseleave：只会触发自身这个事件对应做的事情，不会触发父级这个事件对应做的事情

三.元素操作

---

原则：给值就是设置，不给值就是获取

元素的所有操作都必须是具体的元素,集合不能直接操作

1.操作元素内容

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

操作表单元素内容

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

• 获取：表单元素.value;

  // 多次赋值后边覆盖前边的 

// 获取元素
var inputs = document.getElementsByTagName("input");
var btn = document.getElementsByTagName("button")[0];
console.log(inputs, btn);

// 将两个输入框的和展示到第三个输入框

// 绑定事件
// 事件每点击一次 函数中代码就重新执行一次
btn.onclick = function () { //做什么事情
    // 获取两个输入框的值
    var oneVal = inputs[0].value;
    var twoVal = inputs[1].value;
    console.log(oneVal, twoVal);

    // 遇到字符串表示拼接 先转为数字
    var total = parseFloat(oneVal) + parseFloat(twoVal);
    console.log(total);

    // 将和设置给第三个输入框
    inputs[2].value = total;
}

 操作普通闭合标签

• 设置：表单元素.innerText/innHTML = 值;

• 获取：表单元素.innerText/innHTML;

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

var div = document.getElementsByTagName("div")[0];
var h2 = document.getElementsByTagName("h2")[0];
var p = document.getElementsByTagName("p")[0];
console.log(div, h2,p);

// 设置：表单元素.innerText/innHTML = 值;
// 后边设置的覆盖前边的
// div.innerText = "我是div";
// div.innerText = "<h6>我是div</h6>";

// div.innerHTML = "我是div";
div.innerHTML = "<h6><a href='https://www.baidu.com'>我是div</a></h6>";
h2.innerHTML = "我是H2";

// 获取：表单元素.innerText/innHTML;  
console.log(div.innerText);//我是div
console.log(div.innerHTML);//<h6><a href="https://www.baidu.com">我是div</a></h6>
console.log(p.innerText);
console.log(p.innerHTML);

2.操作元素属性

操作结构上天生自带的属性

• 设置：元素.属性 = 值; 获取不到返回空字符串

• 获取：元素.属性；

 元素.id = 值;/元素.id;
元素.className = 值;/元素.className;
元素.title = 值;/元素.title;
...

// 获取元素
var div =  document.getElementsByTagName("div")[0];

// 设置
div.className = "myBox";
div.title = "我是div";

// 获取
console.log(div.id);
console.log(div.className);
console.log(div.title);

2.操作元素样式

通过style属性去操作元素样式，只能操作元素的行内样式

样式属性：在js中符合驼峰命名法 fontSize

• 设置：元素.style.样式属性 = 样式值;

• 获取:元素.style.样式属性；

 <div>我是div</div>
    <script>
        // 获取元素
        var div = document.getElementsByTagName("div")[0];

        // 设置
        div.style.width = "300px";
        div.style.backgroundColor = "yellow";
        div.style.fontSize = "36px";
        div.style.fontWeight = "bold";


        // 获取
        console.log(div.style.width);
        console.log(div.style.backgroundColor);
        console.log(div.style.fontSize);
        console.log(div.style.fontWeight);

        // 获取不到内部或外部样式  行内样式没有  获取到的就是空字符串
        console.log(div.style.height); //""
    </script>

window.onload

---

 保证所有的资源（样式，结构，图片，音频，视频...）加载完毕,再去执行函数中的js代码

• window:属于浏览器的顶层对象

• onload ：资源加载完毕事件

window.onload = function(){
    //资源加载完毕执行的js代码
}