DOM

一些基础概念

Document Object Model 文档对象模型，通过DOM可以来任意来修改网页中各个内容

文档：指的是网页，一个网页就是一个文档
对象：指将网页中的每一个节点都转换为对象，转换完对象以后，就可以以一种纯面向对象的形式来操作网页了
模型：用来表示节点和节点之间的关系，方便操作页面

节点（Node）：

节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点。虽然都是节点，但是节点的类型却是不同的

常用的节点：

文档节点（Document），代表整个网页
元素节点（Element），代表网页中的标签
属性节点（Attribute），代表标签中的属性
文本节点（Text），代表网页中的文本内容

DOM操作

DOM查询

document查询方法：

document.getElementById("id属性值"); (根据元素的id属性查询一个元素节点对象)
document.getElementsByName("name属性值"); (根据元素的name属性值查询一组元素节点对象)

document.getElementsByTagName("标签名"); (根据标签名来查询一组元素节点对象)

事件（Event）：用户和浏览器之间的交互行为。比如：点击按钮、关闭窗口、鼠标移动等。可以为事件来绑定回调函数来响应事件。

绑定事件的方式：

1.可以在标签的事件属性中设置相应的JS代码

　　　　　　　　　　　　　　　　<button onclick="js代码">按钮</button>

- 2.可以通过为对象的指定事件属性设置回调函数的形式来处理事件

                    <button id="btn">按钮</button>
                    <script>
                        var btn = document.getElementById("btn");
                        btn.onclick = function(){
                        
                        };
                    </script>

如果将js代码编写到页面的上边，当代码执行时，页面中的DOM对象还没有加载，此时将会无法正常获取到DOM对象，导致DOM操作失败。

解决一：可以将js代码编写到body的下边

　　　　　　　<body>
                <button id="btn">按钮</button>
                <script>
                    var btn = document.getElementById("btn");
                    btn.onclick = function(){                    
                    };
                </script>
            </body>

- - 解决二：将js代码编写到window.onload = function(){}中（window.onload 对应的回调函数会在整个页面加载完毕以后才执行，所以可以确保代码执行时，DOM对象已经加载完毕了）

            <script>
                window.onload = function(){
                    var btn = document.getElementById("btn");
                    btn.onclick = function(){                    
                    };
                };            
            </script>

DOM查询

通过具体的元素节点来查询

元素.getElementsByTagName() （通过标签名查询当前元素的指定后代元素）
元素.childNodes （获取当前元素的所有子节点，会获取到空白的文本子节点）
元素.children （所有子元素）
元素.firstChild
元素.lastChild
元素.parentNode
元素.previousSibling（前一个兄弟节点）
元素.nextSibling（后一个兄弟节点）
关于innerHTML和innerText：这两个属性并没有在DOM标准定义，但是大部分浏览器都支持这两个属性。两个属性作用类似，都可以获取到标签内部的内容，不同是innerHTML会获取到html标签，而innerText会自动去除标签。如果使用这两个属性来设置标签内部的内容时，没有任何区别的。

读取标签内部的文本内容（<h1>h1中的文本内容</h1>）：元素.firstChild.nodeValue
document对象的其他的属性和方法

document.all，相当于document.getElementsByTagName("*");
document.documentElement （获取html根元素）
document.body
document.getElementsByClassName() （根据class属性值，查询一组元素节点对象，不支持IE8及以下的浏览器）
document.querySelector() （根据CSS选择器查询，返回查询到的第一个）
document.querySelectorAll() （根据CSS选择器去页面中查询，封装到一个数组中返回）

DOM修改

document.createElement() （根据标签名创建一个元素节点对象）
document.createTextNode() （根据文本内容创建一个文本节点对象)
父节点.appendChild(子节点) (向父节点中添加指定的子节点)
父节点.insertBefore(新节点,旧节点) (将一个新的节点插入到旧节点的前边)
父节点.replaceChild(新节点,旧节点)
父节点.removeChild(子节点) （推荐：子节点.parentNode.removeChild(子节点)）

DOM对CSS的操作

读取和修改内联样式（使用style属性来操作元素的内联样式）

读取内联样式：元素.style.样式名（如：元素.style.width）

注意：如果样式名中带有-，则需要将样式名修改为驼峰命名法（将-去掉，然后-后的字母改大写）

比如： border-width ---> borderWidth

修改内联样式：元素.style.样式名 = 样式值

通过style修改的样式都是内联样式，由于内联样式的优先级比较高，所以我们通过JS来修改的样式，往往会立即生效，但是如果样式中设置了!important，则内联样式将不会生效。

读取元素的当前样式

正常浏览器，使用getComputedStyle()

这个方法是window对象的方法，可以返回一个对象，这个对象中保存着当前元素生效样式
参数：1.要获取样式的元素 2.可以传递一个伪元素，一般传null
如： getComputedStyle(box , null)["width"]; （获取元素的宽度）

IE8，使用currentStyle （元素.currentStyle.样式名）

如：box.currentStyle["width"]

其他的样式相关的属性（只读）

clientHeight （元素的可见高度，指元素的内容区和内边距的高度）
clientWidth（元素的可见宽度，指元素的内容区和内边距的宽度）
offsetHeight （整个元素的高度，包括内容区、内边距、边框）
offfsetWidth （整个元素的宽度，包括内容区、内边距、边框）
offsetParent （当前元素的定位父元素）（离他最近的开启了定位的祖先元素，如果所有的元素都没有开启定位，则返回body）
offsetLeft，offsetTop （当前元素和定位父元素之间的偏移量）（offsetLeft水平偏移量 offsetTop垂直偏移量）
scrollHeight，scrollWidth （获取元素滚动区域的高度和宽度）
scrollTop，scrollLeft （获取元素垂直和水平滚动条滚动的距离）
判断滚动条是否滚动到底

垂直滚动条： scrollHeight - scrollTop = clientHeight
水平滚动：scrollWidth - scrollLeft = clientWidth

posted @ 2020-02-08 14:40 是余是我阅读(94) 评论(0) 收藏举报

刷新页面返回顶部