[JavaScript知识库]JavaScript_DOM操作

1.Document文档树，获得所有节点

2.获取元素的方式

2.1根据id获取元素 getElementById

var div1 = document.getElementById(“box1”);

2.2 类名获取元素 getElementsByClassName

var p1Arr = document.getElementsByClassName(“p1”);

2.3 标签名获取元素 getElementsByTagName

var tag1 = document.getElementsByTagName(“div”);

2.4 name名获取元素 getElementsByName

var userList = document.getElementsByName(“user”);

2.5 选择器的querySelector获取元素

var div1 = document.querySelector(".box1");

2.6 querySelectorAll获取所有元素

var boxList = document.querySelectorAll(".box1");

id和querySelector获取单个元素，其他都是伪数组。
伪数组必须遍历才能使用

3. 事件初识

事件三要素
事件源 , 事件类型, 处理函数
DOM对象绑定一个事件,事件触发一个函数
事件源 是触发事件的对象

 <!-- 一、直接通过标签onclick属性绑定 -->
    <!-- <div onclick="m1()" id="dv"> -->
    <!-- function m1(){
            var event = window.event;
            console.log(event.x,event.y)
        }; -->
        
     var dv=document.getElementById('dv');
    dv.onmouseover=function(event){
        //操作信息都保存到event中
        console.log(event.x,event.y);
        //target 事件源，谁触发 事件源是谁
        console.log("事件源"+event.target.id);
        // this 谁绑定、谁调用的这个函数，this就是谁 这里是dv
        console.log("this:"+this.id);
    }

第一种：直接通过标签onclick属性绑定
第二种 : 通过JS获取DOM对象,进行绑定 , 又叫迟邦定
target 事件源，谁触发 事件源是谁
this 谁绑定、谁调用的这个函数，this就是谁 这里是dv

4.非表单操作

通过标签属性直接更改，通过CSS设置
例：更改图片大小 标签属性：img.width=200px; CSS设置：img.style.height=“300px”

切换图片：img.src= 隐藏/显示：img.style.display=‘none’ /‘block’
classList:获取所有class属性值，返回伪数组

if(img.classList.contains('img1')){
                    img.className='img2'
                }else{
                    img.className='img1'
                }

5.表单操作

js文件：获取选择器的所有属性：

function $(selector){
    var obj = document.querySelectorAll(selector);
    return obj;
}

登录、提交一般设置成button，不进行真正提交进入。
等待所有信息校验完成之后，再form.submit()

login.value = "正在登陆..."
// 禁用按钮,防止重复点击登陆发送多条请求
login.disabled=true;
login.style.backgroundColor='gray';
// 登陆
form.submit();

4.InnerText 设置被选元素的文本内容

btn1.onclick = function () {
// 设置文本
p1.innerText = “文本改变了哈”;
console.log(p1.innerText);
}

5.鼠标事件

onmouseover鼠标移入事件：在鼠标指针移动到元素上时触发。
onmouseout 鼠标移出事件：在鼠标指针移出元素后触发
box2.onmouseenter = function () {
this.style.borderRadius = “12px”;
this.style.backgroundColor = “blue”;
}
onfocus获取焦点事件：在鼠标光标获取输入框焦点时触发
onblur失去焦点事件：在鼠标光标失去焦点时触发。
onclick单击事件：在鼠标指针单击时触发
ondblclick双击事件：在鼠标光标双击时触发。
onkeydown：键盘按下
onkeyup:键盘抬起
onload:浏览器加载完成执行
onscroll:滚动浏览器滚动条时触发

6.文本内容属性

(1)、innerText和textContent，设置标签中的文本内容

textContent属性,谷歌,火狐支持,IE8不支持，使用innerText属性,谷歌,火狐,IE8都支持

(2)、innerText和innerHTML的区别

innerText主要是设置文本的,设置标签内容,是没有标签的效果的
innerHTML是可以设置文本内容
innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML