JavaScript文档对象总结

[小菜鸟..]

JavaScript文档对象总结
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Adobe Dreamweaver JavaScript
作者：唐文坚
撰写时间：2020年4月25日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
什么是DOM?
DOM就是文档对象模型英文全称是Document Object Model。
文档：就可以说整个的HTML的网页。
对象：在玩网页里的每一部分都可以转换成对象。
模型：可以来表示关系，比如说<ul>里的<li>
模型关系图：

节点：
节点是网页组成最基本的部分网页里的每一个部分都可以称为一个节点
比如说 一些标签a标签li标签这些可以说是一个节点，但是节点的种类是
不同的。
比如说：
文档节点，就是HTML，document就是文档节点。
元素节点：div这些就是元素节点，可以通过document的方法来获取元素节点。
文本节点：
不是HTML里自带的文本节点比如P标签里的内容。
属性节点：
不是子节点是个元素的一部分比如Id,class等

nodeName:
这个东西就只是读取要读的东西并不会改变什么。
列：console.log(document.nodeName);
nodeValue：
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值
nodeType 属性:
只读并返回节点类型
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
获取元素节点的几个方法：
getElementById() 通过id属性获取一个元素节点对象
getElementsByTagName() 通过标签名获取一组元素节点对象
getElementsByName() 通过name属性获取一组元素节点对象
getElementsByClassName() 通过标类名获取一组元素节点对象，该方法不支持IE8及以下版本
通过具体的元素节点调用
etElementsByTagName()
方法，返回当前节点的指定标签名后代节点
childNodes
属性，表示当前节点的所有子节点
firstChild
属性，表示当前节点的第一个子节点
lastChild
属性，表示当前节点的最后一个子节点
列：
var input=box.getElementsByTagName("input");
console.log(input);
var nodes=box.childNodes;
var nodes=box.firstChild;
var nodes=box.lastChild;
通过具体的节点调用：
parentNode：
属性，表示当前节点的父节点
previousSibling：
属性，表示当前节点的前一个兄弟节点
nextSibling：
属性，表示当前节点的后一个兄弟节点
设置，元素对象.属性名=新的值
例：element.value = "hello"
innerHTML：
可以在JS里设置html里的代码。
querySelector()：
获取一个元素
querySelectorAll()：
获取多个元素
节点的修改：
创建节点
document.createElement("标签名")
删除节点
父节点.removeChild(子节点)
替换节点
父节点.replaceChild(新节点 , 旧节点)
插入节点
父节点.appendChild(子节点)
父节点.insertBefore(新节点 , 旧节点)
获取元素的样式：
1 currentStyle：
语法：元素.currentStyle.属性名，又或者元素.currentStyle[属性名]
这个可以读取当前的样式如果说没设置的话就是一个auto了，这个只能在IE里用
getComputedStyle()：
列：var obj=getComputedStyle(要获取的元素,null);
这个方法就可以到别的浏览器用，但是IE8以下就不可以用了。
使两个方法融合的写法：


解释：用一个if语句写好条件如果说第一个可以用就返回第一个，如果不是就是第二个，然后封装到一个函数里。
getComputedStyle()方法与currentStyle属性都是只读的属性，不能修改属性，如果需要修改属性的值，只能使用style属性
clientHeight|| clientWidth：
这两个方法都是获取元素的样式不带单位包括内容区和内边距，只读不改。
列：console.log("box.offsetHeight="+box.offsetHeight);
console.log("box.offsetWidth="+box.offsetWidth);
offsetParent：
获取当前距离最近的定位的父元素如果都没有就返回body。
var ele=box.offsetParent;
console.log(ele);
offsetLeft：
当前元素相对应其定位元素的水平偏移量
offsetTop：
当前元素相对应其定位元素的垂直偏移量
列：console.log("box.offsetLeft="+box.offsetLeft);
scrollWidth|| scrollHeight：
获取元素滚动区的宽高。
列：console.log("wrap.scrollWidth="+wrap.scrollWidth);
scrollLeft|| scrollTop：
获取水平与垂直滚动的距离
列：console.log("wrap.scrollTop="+Math.round(wrap.scrollTop));