DOM

1.获取DOM元素

1.1 根据id名获取

通过element.getElementById()

语法：

var element = document.getElementById('id');

参数

接收一个字符串作为参数，即标签元素的id名，id严格区分大小写
element是一个Element对象如果当前文档中拥有特定的id的元素不存在则返回null

返回值：

返回一个匹配到id的dom对象

1.2 根据标签名获取

通过getElementsBtTagName()

返回值：返回的是获取过来对象元素的集合，以伪数组的形式存储，使用下标来使用

语法：

var lis = document.getElementsBtTagName('li');

若想要以此打印里面的元素对象，可以采取遍历的方式

for(var i=0;i<lis.length;i++){   
    console.log(lis[i]); 
}

注意：

如果页面中只有一个li，返回的还是伪数组的形式
如果页面中没有这个元素，返回空的伪数组的形式

1.2.1 根据父元素获取子元素标签

通过element.getElementsByTagName()，获取某个元素（父元素）内部所有指定的标签名的子元素

语法：

element.getElementsByTagName('标签名');

element为父元素

注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己

1.3 根据类名获取

通过getElementsByClassName()

作用：通过类名获取元素

获取相同类名的节点列表（IE8及以下不支持），返回类数组，使用下标[0]来使用

document.getElementsByClassName('.类名')；

1.4 querySelector

作用：

根据参数的不同，可获取不同的元素
参数为一个字符串
参数的写法和css选择器一致，如选择类用.className，选择id用#idName
获取单个元素节点，只能获取到一个元素，如果存在多个则获取到的是第一个

var xxx = document.querySelector("值"); 
//例如： 
var ulbox1 = document.querySelector(".ulbox");
var ulbox2 = document.querySelector(".box ul");

1.5 querySelectorAll()

获取多个元素的节点列表，返回伪数组，使用下标来使用
值可以是 #id .class name 元素名 .....

var xxx = document.querySelectorAll("值");
//例如：
var lis1 = document.querySelector(".box ul li"); 
var ulbox2 = document.querySelector("li");

1.5 获取特殊元素

//获取body元素 
var body=document.body; 
//获取html元素 
var html=document.html;

2.获取和设置元素内容

2.1 innerText

获取标签内从起始位置到终止位置的内容，但它除去html标签，同时空格和换行也会去掉

2.1.1 获取内容

html

<ul>
    <li>111</li>
</ul>
<script>
    const ul=document.querySelector('ul')
    console.log(ul.innerText)
    // 111
</script>

2.1.2 设置内容

通过直接赋值的方式设置内容，不会解析标签

html

<ul>
    <li></li>
</ul>
<script>
    const li=document.querySelector('ul li')
    li.innerText='你好'
</script>

2.2 innerHTML

获取标签内从起始位置到终止位置的内容，包括html标签，同时保留换行和空格

2.2.1 获取内容

html

<ul>
    <li>111</li>
</ul>
<script>
    const ul=document.querySelector('ul')
    console.log(ul.innerHTML)
    // <li>111</li>
</script>

2.2.2 设置内容

通过直接赋值的方式设置内容，可以解析标签

html

<ul></ul>
<script>
    const ul=document.querySelector('ul')
    ul.innerHTML='<li>你好<li/>'
</script>

innerText和innerHTML的区别

innerText不识别html标签
innerHTML识别html标签

outerHTML和outerText

和innerText和innerHTML不同之处在于

outerHTML和outerText可以获取和设置自身以及标签内的内容
innerText和innerHTML只设置标签内的内容

3.操作元素样式和属性

3.1 操作行内样式属性

3.1.1 书写格式：

如果 css属性由一个单词构成，中间不存在 - ，就直接书写
如果 css属性由多个单词构成，中间有 - 连接，就需要转换成驼峰命名
1. font-size 转写 fontSize
2. text-align 转写 textAlign
3. ransition-timing-function 转写 transitionTimingFunction

3.1.2 获取

此种获取方式，只能获取到行内样式，非行内样式获取不到

元素对象.style.css属性;
const div=document.querySelector('div')
console.log(div.style.color)

3.1.3 修改

此种方式设置的样式，全部是行内样式

元素对象.style.css属性 = '属性值';

oBox1.style.color = 'red'; 
oBox1.style.textAlign = 'center'; 
oBox1.style.border = '20px solid yellow';

cssText属性可以一次性，设置多个css属性

oBox1.style.cssText = 'font-style: italic;padding: 10px;margin: 5px';

3.2 操作标签自带属性

3.2.1 获取

element.属性

3.2.2 修改

element.属性='newValue'

举例

html

<img src="./img/cxk1.jpg" alt="蔡徐坤" title="打篮球" id="img">
<input type="text" name="user" placeholder="请输入账号" id="user">

<script>
    // 获取元素节点    
    var img = document.getElementById("img");        
    // 获取标签属性       
    img.src       
    img.alt       
    img.title        
    // 设置标签属性       
    img.src="./img/lxr08.jpg";    
    img.alt="不要打篮球了";       
    img.title="请您不要打篮球了";     
    // 获取元素节点    
    var user = document.getElementById("user");        
    // 获取标签属性     
    user.type;       
    user.name;     
    user.placeholder;      
    //  设置标签属性   
    user.placeholder="输入账号";
</script>

3.3 获取类名

3.3.1 className

如果需要获取或设置元素的class属性，需要使用element.className实现，直接使用class无效。

如果要保留原类名，或添加多个类名，多个类名之间用空格隔开

html

<div class="test">123</div>  
<script>      
    var test=document.querySelector('.test')       	
    console.log(test.className);      //test  	

    test.className='test1'       						
    console.log(test.className);  	//test1

    test.className='test test1 box'       				
    console.log(test.className);  	//test test1 box
</script>

3.3.2 classList

以伪数组的形式返回元素的所有类名

html

<div class="box box2 box3"></div>
<script>
    const box=document.querySelector('.box')
    console.log(box.className) // DOMTokenList(3) ['box', 'box2', 'box3', value: 'box box2 box3']
</script>

可以通过add()方法添加类名，remove()方法移除类名

3.4 自定义属性值

3.4.1 获取自定义属性

element.getAttribute('属性')

3.4.2 设置自定义属性

element.setAttribute('属性')

3.4.3 移除自定义属性

element.removeAttribute('属性')

3.4.4 获取元素data-*属性

data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。
data-* 属性包括两部分：
- 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
- 属性值可以是任意字符串

语法：

定义属性：data-xxx=""
获取属性：dom.dataset.key
若自定义属性通过data-abc-de的形式定义，则第二个-往后，获取时需要使用大驼峰，如dom.dataset.abcDe

html

<div class="box" data-attr="123" data-attr-a="456"></div>
<script>
    const box = document.querySelector(".box");
    console.log(box.dataset.attr);
    console.log(box.dataset.attrA);
</script>

3.5 获取非行间样式

ie8以上

getComputedStyle(element,false)["属性"]

ie8以下

element.currentStyle['属性']

封装一个函数解决解决兼容问题

/**
 * 
 * @param {*} ele - dom元素
 * @param {string} attr - 需要获取的非行内样式属性
 * @returns 返回非行内属性值
 */
function getstyle(ele, attr) {
    if (ele.currentStyle) {
        return ele.currentStyle[attr];
    } else {
        return getComputedStyle(ele, false)[attr]
    }
}

4.节点操作

4.1 父节点

node.parentNode

parentNode可返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回null

4.2 子节点

通过node.attr获取

节点属性	描述
childNodes	返回包含指定节点的所有子节点的集合，包括元素节点，文本节点等
children	只返回所有子元素节点，其余节点不返回
firstChild	返回第一个子节点，找不到则返回null，同样也是包含所有的节点
lastChild	最后一个子节点，找不到则返回null，同样也是包含所有的节点
firstElementChild（IE9以上）	返回第一个子元素节点，找不到则返回null
lastElementChild（IE9以上）	返回最后一个子元素节点，找不到则返回null

4.3 兄弟节点

通过node.attr获取

节点属性	描述
previousSibling	获取前一个兄弟节点（所有类型节点中获取）
previousElementSibling	获取前一个兄弟元素节点
previousElementSibling	获取后一个兄弟节点（所有类型节点中获取）
nextElementSibling	获取后一个兄弟元素节点

4.4 获取属性节点

节点.attributes：获取当前节点的所有属性节点 返回的是数组

html

<input type="text" name="user" id="001" hello="nihao" class="user">   
<script>      
    var user=document.querySelector('.user')      
	console.log(user.attributes);      
	console.log(user.attributes[3]);    
</script>

4.5 节点的属性

通过节点.nodeType，返回数字，1、2、3分别代表元素节点、属性节点、文本节点

-	nodeType	nodeName	nodeValue
元素节点	1	大写标签名	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容

5.元素的操作

5.1 创建节点

var nnn = document.createElement('span');   
// 创建一个元素节点,括号里写标签名，要写在' '里，不然报错 
var nnn = document.createTextNode('你好');   
// 创建一个文本节点，括号里写文本，要写在' '里，不然报错

创建的文本是一个节点，插入需要使用appendChild或insertBefore，不能使用innerHtml

5.2 添加节点

xxx.appendChild(node)      
// 把node节点插入到xxx的内部最后的位置 
xxx.insertBefore(newNode, existNode)      
// 把newNode节点插入到xxx里existNode的前面

append()和appendChild()的不同点在于：

append()还是一个实验中的方法，因此使用时可能存在兼容性问题，特别是IE浏览器（IE11不支持append方法）
append方法也是既可以插入新节点或者文档中原有的节点，这一点和appendChild方法一样。append方法与上述的appendChild方法主要存在以下3个区别：
append方法的参数可以是一组Node对象或者String对象，而appendChild方法的参数只能是一个Node对象
append方法没有返回值
append方法可以同时插入几个子节点（包括字符串），而appendChild一次只可以插入一个子节点

5.3 删除节点

box.removeChild(node)   // 删除box里的node节点

5.4 克隆节点

obj.cloneNode(false)    // 复制节点,复制obj元素标签，

可以传一个布尔值为参数，如果参数为true，**连同obj所有子元素一起复制。**默认为false

5.5 替换节点

obj.replaceChild(新添加的节点 , 被替换的节点):    // 替换节点

6.元素属性offset系列

6.1 offset概述

offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移)、大小等。

获得元素距离带有定位父元素的位置
获得元素自身的大小(宽度高度)
注意，返回的数值都不带单位，获取的属性是只读的

6.2 常用offset属性

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父元素
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding + border + 内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding + border + 内容区的高度，返回数值不带单位

6.3 offset与style区别

offset	style
offset可以得到任意样式表中的样式值	style只能得到行内样式表中的样式值
offset系列获得的数值是没有单位的	style.width获得的是带有单位的字符串
offsetWidth包含padding+border + width	style.width获得不包含padding和border,的值
offsetWidth等属性是只读属性，只能获取不能赋值	style.width是可读写属性，可以获取也可该赋值
所以，我们想要获取元素大小位置，用offset更合适	所以，我们想要给元素更改值，则需要用style改变

7.元素属性scroll系列

7.1 属性描述

scroll系列属性为只读属性，不能修改
返回数字，没有单位

scroll系列属性	描述
element.scrollWidth	获取元素可滚动内容的宽度，包含padding+content
element.scrollHeight	获取元素可滚动内容的高度，包含padding+content
element.scrollLeft	有横向滚动条时，获取元素内容被卷去的长度
element.scrollTop	有竖向滚动条时，获取元素内容被卷去的长度

element.scrollTop也可以理解为滚动条滑块顶部距离整个滚动条顶部的距离

7.2 滚动条距离顶端距离

获取滚动条距离浏览器顶端的距离,不仅可以获取，也可以设置

返回的都是不带单位的数字
生效的情况下返回 滚动条距离顶端的距离（页面被卷去的距离）
不生效的情况下返回0

属性	描述
document.body.scrollTop	在网页没有声明文档类型的情况下生效
document.documentElement.scrollTop	在网页声明了文档类型的情况下生效,即html文件顶部的

兼容

// 获取滚动条滑块顶部 距离 整个滚动条顶部 的距离
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 获取整个滚动条的长度
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
// 获取页面可视区长度，也可以理解为滚动条滑块的长度
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;

8.元素属性client系列

client系列属性为只读属性，不能修改
返回数字，没有单位

client系列属性	描述
element.clientWidth	获取元素宽度，包含padding+content，不包含border、margin
element.clientHeight	获取元素高度，包含padding+content，不包含border、margin
element.clientLeft	获取元素左边框的宽度
element.clientTop	获取元素上边框的宽度

注意：

clientLeft如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。
内联元素clientHeight为0

元素属性总结

9.获取浏览器窗口的大小

返回的是一个不带单位的数字

9.1 获取浏览器窗口的宽度

不计算滚动条区域
1. 获取到的宽度值，是减去了滚动条宽度的值
2. document.documentElement.clientWidth
计算滚动条区域
1. 获取到的宽度值，是包含了滚动条宽度的值
2. window.innerWidth

//自动检测是否有滚动条，有就获取没有就不获取 
var clientWidth = window.innerWidth || document.documentElement.clientWidth

9.2 获取浏览器窗口的高度

不计算滚动条区域
1. 获取到的高度值，是减去了滚动条高度的值
2. document.documentElement.clientHeight
计算滚动条区域
1. 获取到的高度值，是包含了滚动条高度的值
2. window.innerHeight

//自动检测是否有滚动条，有就获取没有就不获取 
window.innerHeight || document.documentElement.clientHeight

兼容方法

// 方式1 
var scrollTop1 = document.body.scrollTop || document.documentElement.scrollTop; 
// 方式2
var scrollTop2 = document.body.scrollTop + document.documentElement.scrollTop;

兼容函数

window.onscroll = function(){ 
    var scrollTop1 = document.body.scrollTop || document.documentElement.scrollTop; 
    console.log(scrollTop1); 
}

回到顶部案例

html

<style>
    button{
        display: block;
        position: fixed;
        bottom: 20px;
        right: 20px;
    }
</style>
</head>
<body>
    <div class="box" style="height: 10000px;"></div>
    <button>回到顶部</button>
    <script>
        var btn = document.querySelector('button')
        window.onscroll = function(){
            var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
            if(scrollTop>150){
                btn.style.display = 'block';
            }else{
                btn.style.display = 'none';
            }
        }
        btn.onclick = function(){
            var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
            var timer = setInterval(function(){
                scrollTop-=100;
                document.documentElement.scrollTop = scrollTop;
                if(scrollTop<=0){
                    clearInterval(timer);
                }
            },10);
        }
    </script>

10.DOMRect对象

一个 DOMRect 代表一个矩形。是包含整个元素的最小矩形（包括 padding 和 border-width）。

该对象使用 left、top、right、bottom、x、y、width 和 height 这几个以像素为单位的只读属性描述整个矩形的位置和大小。
除了 width 和 height 以外的属性是相对于视图窗口的左上角来计算的。

10.1 构造函数

DOMRect()

创建一个新的 DOMRect 对象。

const domRect = new DOMRect();
console.log(domRect);

10.2 属性

通过domRect.key获取

属性	描述
x	`DOMRect` 原点相对于视口左上角的 x 坐标。
y	`DOMRect` 原点相对于视口左上角的 y 坐标。
width	`DOMRect` 的宽度。
height	`DOMRect` 的高度。
top	返回 `DOMRect` 的最上方相对视口左上角的垂直距离（与 `y` 具有相同的值，如果 `height` 为负值，则为 `y + height` 的值）。
right	返回 `DOMRect` 的最右侧相对视口左上角坐标值的水平距离（与 `x + width` 具有相同的值，如果`width` 为负值，则为 `x` 的值）。
bottom	返回 `DOMRect` 的最下侧相对视口左上角坐标值的垂直距离（与 `y + height` 具有相同的值，如果 `height` 为负值，则为 `y` 的值）。
left	返回 `DOMRect` 的最左侧相对视口左上角坐标值的水平距离（与 `x` 具有相同的值，如果 `width` 为负值，则为 `x + width` 的值）。

11.getBoundingClientRect()

返回值是一个 DOMRect对象

11.1 属性

const box=document.getElementById('box');         // 获取元素
const rect=box.getBoundingClientRect()

alert(rect.top);         // 元素上边距离页面上边的距离

alert(rect.right);       // 元素右边距离页面左边的距离

alert(rect.bottom);      // 元素下边距离页面上边的距离

alert(rect.left);        // 元素左边距离页面左边的距离

该方法返回的left、top、right、bottom、x、y属性是矩形相对于视口的距离，注意不是document

该方法返回的 DOMRect对象中的 width 和 height 属性是包含了 padding 和 border-width 的，而不仅仅是内容部分的宽度和高度。

在标准盒子模型中，这两个属性值分别与元素的 width/height + padding + border-width 相等。
而如果是 box-sizing: border-box，两个属性则直接与元素的 width 或 height 相等。

DOM ​

1.获取DOM元素 ​

1.1 根据id名获取 ​

1.2 根据标签名获取 ​

1.2.1 根据父元素获取子元素标签 ​

1.3 根据类名获取 ​

1.4 querySelector ​

1.5 querySelectorAll() ​

1.5 获取特殊元素 ​

2.获取和设置元素内容 ​

2.1 innerText ​

2.1.1 获取内容 ​

2.1.2 设置内容 ​

2.2 innerHTML ​

2.2.1 获取内容 ​

2.2.2 设置内容 ​

3.操作元素样式和属性 ​

3.1 操作行内样式属性 ​

3.1.1 书写格式： ​

3.1.2 获取 ​

3.1.3 修改 ​

3.2 操作标签自带属性 ​

3.2.1 获取 ​

3.2.2 修改 ​

3.3 获取类名 ​

3.3.1 className ​

3.3.2 classList ​

3.4 自定义属性值 ​

3.4.1 获取自定义属性 ​

3.4.2 设置自定义属性 ​

3.4.3 移除自定义属性 ​

3.4.4 获取元素data-*属性 ​

3.5 获取非行间样式 ​

4.节点操作 ​

4.1 父节点 ​

4.2 子节点 ​

4.3 兄弟节点 ​

4.4 获取属性节点 ​

4.5 节点的属性 ​

5.元素的操作 ​

5.1 创建节点 ​

5.2 添加节点 ​

5.3 删除节点 ​

5.4 克隆节点 ​

5.5 替换节点 ​

6.元素属性offset系列 ​

6.1 offset概述 ​

6.2 常用offset属性 ​

6.3 offset与style区别 ​

7.元素属性scroll系列 ​

7.1 属性描述 ​

7.2 滚动条距离顶端距离 ​

8.元素属性client系列 ​

9.获取浏览器窗口的大小 ​

9.1 获取浏览器窗口的宽度 ​

9.2 获取浏览器窗口的高度 ​

10.DOMRect对象 ​

10.1 构造函数 ​

10.2 属性 ​

11.getBoundingClientRect() ​

11.1 属性 ​

DOM

1.获取DOM元素

1.1 根据id名获取

1.2 根据标签名获取

1.2.1 根据父元素获取子元素标签

1.3 根据类名获取

1.4 querySelector

1.5 querySelectorAll()

1.5 获取特殊元素

2.获取和设置元素内容

2.1 innerText

2.1.1 获取内容

2.1.2 设置内容

2.2 innerHTML

2.2.1 获取内容

2.2.2 设置内容

3.操作元素样式和属性

3.1 操作行内样式属性

3.1.1 书写格式：

3.1.2 获取

3.1.3 修改

3.2 操作标签自带属性

3.2.1 获取

3.2.2 修改

3.3 获取类名

3.3.1 className

3.3.2 classList

3.4 自定义属性值

3.4.1 获取自定义属性

3.4.2 设置自定义属性

3.4.3 移除自定义属性

3.4.4 获取元素data-*属性

3.5 获取非行间样式

4.节点操作

4.1 父节点

4.2 子节点

4.3 兄弟节点

4.4 获取属性节点

4.5 节点的属性

5.元素的操作

5.1 创建节点

5.2 添加节点

5.3 删除节点

5.4 克隆节点

5.5 替换节点

6.元素属性offset系列

6.1 offset概述

6.2 常用offset属性

6.3 offset与style区别

7.元素属性scroll系列

7.1 属性描述

7.2 滚动条距离顶端距离

8.元素属性client系列

9.获取浏览器窗口的大小

9.1 获取浏览器窗口的宽度

9.2 获取浏览器窗口的高度

10.DOMRect对象

10.1 构造函数

10.2 属性

11.getBoundingClientRect()

11.1 属性