DOM
DOM基础
节点层次
node类型
1.属性：
| nodeName：保存的始终都是元素的标签名
| nodeValue ：始终为 null
2.操作节点：
l appendChild()：向节点的childNodes列表末尾添加一个节点
插入新节点：someNode.appendChild(newNode);
移动节点到最后一位：someNode.appendChild(someNode.firstChild)
l insertBefore() : 插入节点，两个参数：第一个是要插入的节点，第二个是位置参照节点
someNode.insertBefore(newNode,null); //插入后成为最后一个节点
someNode.insertBefore(newNode,someNode.firstChild); //插入成为第一个节点
l replaceChild(): 替换节点。接收两个参数：要传入的节点和要替换的节点，父节点调用。
l removeChild()：移除节点。接收一个参数：要移除的节点。
子节点.parentNode.remove(子节点)
Document类型：（html文档）
1.属性：
|nodeName：保存的始终都是#document
|nodeValue 的值则始终为 null
2.查找元素：
|getElementById( ):通过ID来取得一个元素，id唯一
|getElementsByTagName( ): 通过标签名称来获得元素（div，p等）
|getElementsByName( )[0]：通过name来获得一类元素，name相同的元素，加个[0]获得这一类的第一个元素
|getElementsByClassname（ ）：使用指定的calss名称返回所有相关元素的集合(节点列表对象)
3.文档写入:
|document.write()
|document.open()
|document.close()
element类型
1.属性：nodeName为元素标签名 nodeValue为null
2.特性（取的名字，自定义）：
|getAttribute()：获取特性
|setAttribute()：设置特性
|removeAttribute()：取消特性
3.attributes属性：
|getNamedItem(name)返回nodeName属性等于name的节点
|removeNamedItem(name)从列表移除nodeName等于name的节点
|setNamedItem(node)向列表添加节点,以节点的nodeName属性为索引
|item(pos)返回处于数字pos位置处的节点
4.创建元素：document.creatElement()
text类型
1.属性：nodeName为"#text" nodeValue为节点所包含的文本
2.操作文本节点：
l appendData(text)：将 text 添加到节点的末
l deleteData(offset, count)：从 offset 指定的位置开始删除 count个字符。
l insertData(offset, text)：在 offset 指定的位置插入文本
l replaceData(offset, count, text)：用 text 替换从 offset 指定的位置开始到 offset+ count 为止处的文
l splitText(offset)：从 offset 指定的位置将当前文本节点分成两个文本节点
l substringData(offset, count)：提取从 offset 指定的位置开始到 offset+count 为止 处的字符串
l document.createTextNode()：创建文本节点
拓展技术
querySelector（）
接收一个CSS选择符，返回与该模式匹配的第一个元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KDhXe74L-1595406950851)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\1595340207877.png)]
querySelectorAll( )
返回的值实际上是带有所有属性和方法的 NodeList对象。要返回nodelist所有元素，可以用item（）方法，也可以用括号语法
DOM2和DOM3
元素大小
1.偏移量：
|offsetHeight：元素在垂直方向上占用的空间大小。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。
|offsetWidth：元素在水平方向上占用的空间大小。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。
|offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离
offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离
-
客户区大小：元素内容及其内边距所占据的空间大小
| clientWidth：元素内容区宽度加左右内边距宽度
|clientHeight：元素内容区高度加上下内边距高度
-
滚动大小：包含滚动内容的元素的大小
|scrollHeight：在没有滚动条的情况下，元素内容的总高度。
|scrollWidth：在没有滚动条的情况下，元素内容的总宽度
|scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
|scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
scrollWidth – scrollLeft == clientWidth 说明水平滚动条到底了
scrollHeight – scrollTop == clientHeight 说明垂直滚动条到底了
遍历
-
NodeIterator：用 document.createNodeIterator()，接收4个参数，具体看书
-
TreeWalker：用document.createTreeWalker()，接受4个参数（同上）除了nextNode()和 previousNode()的功能之外：
|parentNode()：遍历到当前节点的父节点；
|firstChild()：遍历到当前节点的第一个子节点；
|lastChild()：遍历到当前节点的后一个子节点；
|nextSibling()：遍历到当前节点的下一个同辈节点；
|previousSibling()：遍历到当前节点的上一个同辈节点。
DOM深入
DOM查询
1.获取元素节点：document.getElementsbyTagname
2.获取元素节点的子节点：
l getElementsbyTagname通过具体的元素节点调用 （var出来的）
l 所有子节点：city.childNodes (会获取文本，注释，空格，换行)
l 所有子元素（标签）：city.children
l firstChild/lastChild:第一个子节点和最后一个子节点
l firstElementChild/lastElementChild：第一个和最后一个元素节点
3.获取父节点和兄弟节点：
l parentNode:当前节点的父节点
l previousSibling:当前节点前一个兄弟节点（previousElementSibling：当前节点前一个兄弟元素）
l nextSibling:当前节点后一个兄弟节点
l nextElementSibling：当前节点后一个兄弟元素
4.获取元素的样式：
l 直接设置style的属性（内联样式优先）：element.style.height = ‘100px’; 如果设置了*！important则无效，若属性中有 - ，则采用驼峰式*命名
l 正常浏览器：getComputedStyle(element,null).height
l IE8及以下：element.cueerentStyle.height
l length 属性与item()方法配套使用，以便迭代在元素中定义的 CSS属性，此时style相当于一个集合，可以使用方括号语法来代替item()来取得给定位置的 CSS属性
- disabled：表示样式表是否被禁用的布尔值。这个属性是可读/写的，将这个值设置为 true 可以禁用样式表。
事件对象
https://www.runoob.com/jsref/dom-obj-event.html
l当事件的响应函数被触发，浏览器都会将一个事件对象作为实参传进函数里，在事件对象中封装了当前事件相关的一切信息 (下面例子中的event就是一个鼠标移动事件的object)
*注意：IE8有些属性不兼容 ：event = event||window.event
l 事件冒泡：事件的向上传导，当后代元素上的事件被触发，祖先的相同事件也会被触发
l 事件委托：将统一事件绑定给元素的共同祖先（利用了冒泡）减少绑定事件的次数（跨浏览器的事件对象EventUtil）
l 事件的绑定（dom2级）：
1.addEventListener()：为元素添加监听事件（一个元素的相同事件绑定多个函数）
取消默认行为用event.preventDefault（）
一般的方法用return false
2.removeEventListener() 方法来移除 addEventListener() 方法添加的事件，传入的参数必须相同，function必须另外写。
*event：事件名，不要使用 “on” 前缀；
*function：事件触发时执行的函数
*useCapture:布尔值；true - 事件在捕获阶段执行;false（默认）-事件在冒泡阶段执行
.removeEventListener() 方法来移除 addEventListener() 方法添加的事件，传入的参数必须相同，function必须另外写。
语法： [外链图片转存中…(img-XCeXb8cP-1595406950861)]
*event：事件名，不要使用 “on” 前缀；
*function：事件触发时执行的函数
*useCapture:布尔值；true - 事件在捕获阶段执行;false（默认）-事件在冒泡阶段执行
扫一扫
1116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
