DOM(Document Object Model )
DOM是文档对象模型 ,DOM是关于创建,插入,修改,删除页面元素的标准。页面中的内容本质上都是字符串,但是js会把这些字符串转成DOM树,DOM树中的内容会被解析成DOM节点,那就是说,我们在操作DOM本质上就是操作每一个节点,页面中的任何内容都是节点。
attributes
元素的所有属性集合。每一个属性都会对应一个下标,它还有一个length属性,代表属性的个数。
html代码
<div id="div1" class="div1" style="100px"></div>
js代码
1 var div1=document.getElementById("div1");2 console.log(div1.attributes);//{0: id, 1: class, 2: style, length: 3}
nodeType
语法:
1 节点.nodeName;
返回值:
返回节点的类型,这个节点类型是一个数字。
html代码
1 <div id="div1"></div>
js代码
1 var div1=document.getElementById("div1");2 console.log(div1.nodeType);//1
nodeName
语法:
1 节点.nodeName;
返回值:
返回节点的名字。
html代码
1 <div id="div1"></div>
js代码
1 var div1=document.getElementById("div1");2 console.log(div1.nodeName);//DIV
任何节点都有这个属性(文本、注释)。
tagName
语法:
1 元素.tagName;
返回值:
返回元素的标签名(大写)。
1 console.log(document.body.tagName);//BODY
只有标签元素才有这个属性。
parentNode
语法:
1 节点.parentNode;
返回值:
返回这个节点的父节点。
html代码
1 <div id="box">2<p id="p1"></p>3 </div>
js代码
1 var div1=document.getElementById("box");2 var p1=document.getElementById("p1");3 var div11=div1.attributes[0];4 var p11=p1.attributes[0];5 console.log(p1.parentNode);//div16 console.log(p11.parentNode);//null
属性节点是没有父节点的。
childNodes
语法:
1 元素.childNodes;
返回值:
返回的是元素第一层的所有子节点的集合,包含文本和注释节点。
children
语法:
1 元素.children;
返回值:
返回的是元素第一层的所有子节点的集合,但是它只包含标签元素。它是一个类数组,每一个子节点都会对应一个下标,可以通过下标值取到某个子节点。
firstElementChild
语法:
1 元素.firstElementChild;
返回值:
返回这个元素下的第一个子节点,如果没有,返回null。
lastElementChild
语法:
1 元素.lastElementChild;
返回值:
返回这个元素下的最后一个子节点,如果没有,返回null。
previousElementSibling
语法:
1 节点.previousElementSibling;
返回值:
返回节点的上一个兄弟节点,如果没有找到,那返回一个null。
nextElementSibling
语法:
1 节点.nextElementSibling;
返回值:
返回节点的下一个兄弟节点,如果没有找到,那返回一个null。
offsetParent
作用:
找到最近的有定位(不能为static)的父级,它会一层一层往外找,如果没找到的话,默认为body。父级必需为相对定位或者绝对定位,自己有没有定位无所谓。
语法:
1 元素.offsetParent;
offsetTop
作用:
找到最近的有定位的父级,获取到它与父级的top距离(从元素的最上边到定位父级的最上边的距离 )。
语法:
1 元素.offsetTop;
如果没找到有定位的父级,默认是到html的距离。
offsetLeft
作用:
找到最近的有定位的父级,获取到它与父级的left距离(从元素的最左边到定位父级的最左边的距离)。
语法:
1 元素.offsetLeft;
如果没找到有定位的父级,默认是到html的距离。
getAttribute()
作用:
获取属性,它不光能获取标签自带的属性,也可以获取到自定义属性。
语法:
1 元素.getAttribute(属性名);
参数:
要获取的属性名字。
返回值:
返回属性名对应的属性值,假如是src或者href地址,里面的地址是什么,获取到的就是什么(颜色值也一样)。
setAttribute()
作用:
设置属性,可以设置自定义属性,也可以设置标签自带的属性。
语法:
1 元素.setAttribute(attr,value);
参数:
attr 要设置的属性名。
value 要设置的属性值。
返回值:
无。
removeAttribute()
作用:**
删除属性。
语法:
1 元素.removeAttribute(attr);
参数:
要删除的那个属性名字。
返回值:
无。
getBoundingClientRect()
作用:
获取元素的盒模型的相关信息(如:width、height、left等)。
语法:
1 元素.getBoundingClientRect();
返回值:
返回一个对象,这个对象当中存了元素的盒模型的相关信息。
注意:
得到的left,是元素左边到左边可视区的距离。
得到的right,是元素右边到左边可视区的距离。
得到的top,是元素上边到上边可视区的距离。
得到的bottom,是元素下边到上边可视区的距离。
得到的width,是包含边框的。\
createElement()
作用:
根据参数的名字创建相对应的标签。
语法:
1 document.createElement(tagName);//只有document才有这个方法
参数:
要创建的标签名字。
返回值:
返回新创建的元素。
创建后的标签可以给它添加属性样式等,但是它不能创建文本、注释节点。
appendChild()
作用:
往父级元素里面添加相应的子节点。
语法:
1 父节点.appendChild(childNode);
参数:
要添加的元素(只能是一个标签节点)。
返回值:
返回要添加的那个元素(参数)。
removeChild()
作用:
删除节点。
语法:
1 父节点.removeChild(childNodes);
参数:
要删除的子节点(只能为单个节点)。
返回值:
被删除的元素(参数),这个方法可以把文本节点与注释节点删掉。
insertBefore()
作用:
插入节点,把一个节点插入到另一个节点前面。
语法:
1 父节点.insertBefore(childNode1,childNode2);
参数:
childNode1 要插入的节点。
childNode2 决定插入节点位置的节点。
第二个参数的结果为null的话,相当于appendChild,把参数1的节点添加到父节点的最后。两个参数必需同时存在,不然会报错 。
返回值:
返回要插入的节点(第一个参数) 。
replaceChild()
作用:
替换节点,用节点1替换节点2 。
语法:
1 父节点.replaceChild(node,childNode);
参数:
node 替换成的节点。
childNode 被替换的节点。
两个参数必需同时出现,不然报错。
返回值:
返回被替换掉的那个元素(参数2)。
cloneNode()
作用:
克隆节点。
语法:
1 要被克隆的节点.cloneNode(Boolean);
参数:
true 克隆元素和元素包含的子孙节点。
false 克隆元素但不包含元素的子孙节点。
如果没有参数,默认为false。
返回值:
返回被克隆的节点。
文本节点与注释节点都可以被克隆,克隆的只克隆css、html不克隆js。克隆后的节点的id与原来的是一样,所以要修改一下。
可视区的宽高
1 document.documentElement.clientWidth;//可视区的宽2 document.documentElement.clientHeight;//可视区的高
如果窗口改变,这两个值也会改变。
获取元素的宽高
元素的宽:
1 元素.offsetWidth;//得到元素的宽度,包含边框2 元素.clientWidth;//得到元素的宽度,不包含边框
元素的高:
1 元素.offsetHeight;//得到元素的高度,包含边框2 元素.clientHeight;//得到元素的高度,不包含边框
滚动条距离
1 document.body.scrollTop;//Chrome2 document.documentElement.scrollTop;//其它
DOM操作元素的特性
appendChild、insertBefore、replaceChild在操作一个已有的元素时, 是将已有的元素移动(剪切),而不是复制一份进行操作。
innerHTML与DOM的区别
用innerHTML方法添加后,其它是先把原来的内容清空,再把新的内容添加进来,所以原来的事件会被删除。
DOM方法只是在原来的基础上增加了一些元素,原来的事件还会有。
动态获取元素和静态获取元素
getElementsByTagName:
动态获取元素,一旦获取的元素有变化,那它就会重新获取一下,原来的索引就会变成新获取的。
querySelectorAll:
静态获取元素,只获取一次,每个元素对应的下标是不会变的,即使元素有变化,它也不会重新再去获取,原来的下标不会变。