JS基础知识篇-DOM操作总结

目录

DOM-Document Object Model 文档对象模型

第一部分：Dom获取元素

第二部分：DOM属性设置与获取

 第三部分：事件（鼠标事件、键盘事件、表单事件）

---

DOM-Document Object Model 文档对象模型

DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和css功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。

第一部分：Dom获取HTML元素

方法一：

• document代表整个文档
• getElementById() //获得一个有着给定id属性值的元素，该元素不存在时，返回null
• getElementsByTagName() //到元素们的标签名   得到的元素为数组
• getElementsByClassName() //   根据类选择器返回所有匹配到的元素数组，如果没有匹配到，则返回空数组;   支持： Chrome 4.0+, FireFox 3.0+, Safari 3.2+, Opera 10.1+, IE 8+
• getElementsByName(); //，IE不支持需注意，只有部分标签name可生效（表单，表单元素，img，iframe）
• querySelector() // 根据CSS选择器返回第一个匹配到的元素，如果没有匹配到，则返回null;
• querySelectorAll() //根据CSS选择器返回所有匹配到的元素数组，如果没有匹配到，则返回空数组; 在ie7和ie7以下的版本中没有，

具体例子理解

  <div id="box">
        <input type="text" name="idea">
        <img src="" alt=""  name="idea">
        <div class="main">
            <ul>
                <li class="first">我是第一个li标签</li>
                <li>这也是一个li标签</li>
                <li>这也是一个li标签</li>
            </ul>
        <p class="first">我是第一个p标签</p>
        <p>这也是一个p标签</p>
        <a href="" class="first">我是第一个a标签</a>
        </div>
    </div>

（1）document.getElementById（"id"）方法：获得一个有着给定id属性值的元素，"id"为DOM元素上id属性的值,要注意大小写。

id值必须加引号放在括号里。在css中id是独一无二的

var a1=document.getElementById("box");//获取id名为"box"的元素
console.log(a1);
console.log(typeof a1);//这个方法返回值是对象object
var a2=document.getElementById("bigBox");//获取一个不存在的id，结果返回null
console.log(a2);//null

执行结果： 

 

（2）document.getElementsByTagName（"TagName"）： 获得一个有着给定标签名的元素。"TagName"是元素的标签名，返回的是htmlcollection 集合 , 用法和数组一致。页面中不存在要获取的标签时，则返回空数组。

var b1=document.getElementsByTagName("div");//通过标签名选择元素，返回值是对象数组
console.log(b1);//返回对象数组
console.log(typeof b1);//object
var b2=document.getElementsByTagName("span");//获取一个页面中没有的标签
console.log(b2);//返回空数组 HTMLCollection []

执行结果：

（3）getElementsByClassName(”class“)：   class为DOM元素上class属性的值，返回的是htmlcollection 集合 , 用法和数组一致。当不存在要获取的类名时，则返回  HTMLCollection []; 

var c1=document.getElementsByClassName("first");//获取所有类名为first的元素
var c2=document.getElementsByClassName("first")[1];//获取类名为first的p元素
var c3=document.getElementsByClassName("last");//获取一个不存在的类名，会返回空数组
console.log(c1);//
console.log(typeof c1);
console.log(c2);//
console.log(typeof c2);
console.log(c3);//空数组 HTMLCollection []

执行结果： 

 

 （4）getElementsByName("name"); //IE不支持需注意。name为DOM元素上name属性的值 ，只有部分标签name可生效（表单，表单元素，img，iframe）。返回的是NodeList 类型, 用法和数组一致。获取一个不存在的name值时，会返回NodeList[]。

var d1=document.getElementsByName("idea");//获取name为"idea"的元素
var d2=document.getElementsByName("idea")[0];//获取第一个name为"idea"的元素
var d3=document.getElementsByName("haha");//获取name值为"haha"的元素
console.log(d1);
console.log(d2);
console.log(d3);

执行结果： 

（5）querySelector()：通过选择器获取一个元素，返回第一个匹配到的元素，如果没有匹配到，则返回null;

var f1=document.querySelector(".main>ul>li.first");//获取第一个li标签
var f2=document.querySelector(".main>ul>li");//获取所有的li标签，结果返回第一个匹配到的元素
console.log(f1);
console.log(f2);

执行结果： 

（6）querySelectorAll()： 根据CSS选择器返回所有匹配到的元素数组，返回NodeList类型，用法和数组一致。如果没有匹配到，则返回空数组NodeList[]; 

var g1=document.querySelectorAll(".main>ul>li");//获取所有的li标签
var g2=document.querySelectorAll(".main>ul>li")[1];//选择获取到的第二个li标签
console.log(g1);
console.log(g2);

方法二：

利用节点关系获取元素：

利用节点关系访问HTML元素的属性和方法如下：

• parentNode 返回父节点
• previousSibiling  返回当前节点的前一个兄弟节点
• nextSibiling 返回当前节点的后一个兄弟节点
• firstChild 返回当前节点的第一个子节点
• lastChild 返回当前节点的最后一个子节点
• nodeType 属性返回以数字值返回指定节点的节点类型。返回（元素节点是1  属性节点是2 文本节点是3）
• nodeName 属性指定节点的节点名称。

例子：

 /*--------------------------------css样式--------------------------------- */
<style>
        #n