js的基础教程（第十二堂）--DOM树

一、DOM树的概念

DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

DOM树是结构，所谓层级结构是指元素和元素之间的关系：父子，兄弟。

二、doucument对象

1、集合属性

捕获元素

一般捕获元素有以下几种方式

document.queryselect('选择器')（常用）

document.queryselectAll('选择器')

getElementById('id名')

getElementByClassName('类名')

//document对象的属性

            //all:获取当前网页的所有的元素

            var arr=document.all;

            console.log(arr[0]);

            //imgs:获取当前网页的所有的照片

            //links,forms

 var img=document.getElementById("img3");

            //操作标签的class属性是要.className

            img.className="imgStyle";

var img=document.getElementById("img2");

            //操作标签样式(标签对象.sytle.样式属性名)

            //设置标签的样式属性

            img.style.border="2px solid red";

            img.style.borderRadius="10px";

设置或读取元素属性

元素.属性名=‘值’

元素.getAttribute('属性名')

元素.setAttribute('属性名','属性值')

注意：操作自定义属性，只能通过getAttribute方法来进行访问。