js：dom笔记

dom:document object model,  文档对象模型

        元素获取

        id--document.getElementById(id名)，结果是单个dom元素

        class--document.getElementsByClassName(class名)，结果是dom元素集合(HTMLCollection)

        tag--document.gerElementsByTagName(标签名)，结果是dom元素集合(HTMLCollection)

        name--document.getElementsByName(name值)，结果是dom元素结合(NodeList，支持forEach)

        选择器--document.querySelector(css选择器)，结果是单个dom元素(选择器匹配的第一个)

            document.querySelectorAll(css选择器)，NodeList集合

            document.body

            document.head

            document.title

            document.images

            document.links

            document.documentElement 整个文档

        内容、样式、属性的设置

            获取内容

                innerHTML:获取的结果包含html标签

                innerText:结果不包含html标签

            设置内容

                innerHTML=""，将html标签解析成页面元素

                innerText=""，将html标签作为文本内容

            设置样式

                dom.style.css属性="值"，css属性是驼峰式(font-size->fontSize)

            获取样式

                getComputedStyle(dom).css属性，获取内联样式，style标签，link引入，import引入，未设置的默认样式

            属性获取：

                .属性名

                    用于获取dom所支持(能在html中生效)的属性,结果是字符串

                    用获取自定义属性(不在html显示的属性)，结果是设置属性

                    .getAttribute(属性名)

                        主要用于获取dom不支持的属性(凡是html上显示的属性都可获取)，结果是字符串

                    html结构中显示的属性：

                        dom.getAttribute("属性名")

                        标签支持的属性也可以用dom.属性名获取

                        特殊的data

                    html结构上不显示的属性：取出存储时的数据格式

                        dom.属性名获取

            属性设置

                .属性名=值

                    设置的属性被标签支持，会显示在html结构上，存储字符串；不被标签支持，不在html结构显示，存储任意数据

                    设置的属性在结构显示，dom。setAttribute("属性名"，值)

                        特殊的data属性，用dom.dataset.属性=值结果在标签上增加data-属性

                    设置结构上显示的属性：储存结果时字符串dom.setAttribute("属性名"，值)设置标签支持的属性吗，也可以用.属性名=值的方式

                    设置结构上不显示的属性：

                        dom.属性名=值，储存任意数据

                    当显示的属性值为特殊类型时，处理方式：

                        将数据转换成JSON字符串:JSON.stringify(数据)

                        将JSON字符串转换成真正的JSON:JSON.parse(json字符串)

                            dom元素的尺寸

                                dom.clientWidth,宽+左右padding

                                dom.offsetWidth，宽+左右padding+左右border

                                dom.scrollWidth，宽+左右padding

                            有滚动条时

                                dom.clientWidth -17px

                                dom.offsetWidth 不变

                                dom.scrollWidth=内部元素offsetWidth+内部元素的margin+外部元素的padding