1.获取元素

获取非常规元素
    1. html
      => 语法: document.documentElement
    2. head
      => 语法: document.head
    3. body
      => 语法: document.body
    4. title
      => 语法: document.title
    5. style列表
      => 语法: document.styleSheets
      
常规元素获取方式(重点)
    1. 通过元素 id 名获取元素
      => 语法: document.getElementById('id名')
      => 返回值:
        -> 如果页面上有 id 对应的元素, 那么就是这个元素
        -> 如果页面上没有 id 对应的元素, 那么就是 null
    2. 通过元素 类名 获取元素
      => 语法: document.getElementsByClassName('类名')
      => 返回值: **必然是一个伪数组**
        -> 如果页面上有 类名 对应的元素, 那么有多少获取多少, 放在伪数组内返回
        -> 如果页面上没有 类名 对应的元素, 那么就是一个空的伪数组
    3. 通过 标签名 获取元素
      => 语法: document.getElementsByTagName('标签名')
      => 返回值: **必然是一个伪数组**
        -> 如果页面上有 标签名 对应的元素, 那么有多少获取多少, 放在伪数组内返回
        -> 如果页面上没有 标签名 对应的元素, 那么就是一个空的伪数组
    4. 通过 选择器 获取 一个元素
      => 语法: document.querySelector('选择器')
        -> 选择器: 你 css 捕获元素的选择器
      => 返回值:
        -> 如果页面上有该 选择器 对应的元素, 那么就是符合选择器的第一个元素
        -> 如果页面上没有该 选择器 对应的元素, 那么就是 null
    5. 通过 选择器 获取 一组元素
      => 语法: document.querySelectorAll('选择器')
      => 返回值: **必然是一个伪数组**
        -> 如果页面上有该 选择器 对应的元素, 那么有多少获取多少, 放在伪数组内返回
        -> 如果页面上没有该 选择器 对应的元素, 那么就是一个空的伪数组
        
    //1. 根据id获取元素
    // document.getElementById("div0");

    //2. 根据标签名获取列表
    // console.log(document.getElementsByTagName("div")); //HTMLCollection列表

    //3. 根据class名获取元素列表
    // console.log(document.getElementsByClassName("div1")); //HTMLCollection列表

    //4. 根据name属性获取节点列表
    // console.log(document.getElementsByName("ab")); //NodeList 列表

    //5. 根据选择器获取第一个元素 所有的css选择器都可以使用
    // console.log(document.querySelector("div"));
    // console.log(document.querySelector("#div1"));
    // console.log(document.querySelector(".div1"));
    // console.log(document.querySelector("[name=cd]"));
    // console.log(document.querySelector("div>span"));

    //6. 根据选择器获取所有节点列表   NodeList
    // console.log(document.querySelectorAll("div"));  
    // console.log(document.querySelectorAll(".div1"));

2.获取节点

HTML标签就是DOM节点     (记)
console.log(document.body)
整个DOM 是一个树形结构，每个支点就是树形结构的节点，所以每个标签又称为节点。
除了标签以外，还有注释、文本等内容，也叫做节点。 且把标签称为元素节点。
  + 获取节点
      1. 父节点.childNodes
        + 获取所有子节点(带标签和不带标签的文本内容)
      2. 父节点.children
        + 获取所有子元素节点(带标签的节点 有序号 从0开始 超过序号显示undefind)
      3. 父节点.firstChild
        + 获取第一个子节点
      4. 父节点.firstElementChild
        + 获取第一个子元素节点
      5. 父节点.lastChild
        + 获取最后一个子节点
      6. 父节点.lastElementChild
        + 获取最后一个子元素节点

      7. 节点.previousSibling
        + 获取上一个兄弟节点
      8. 节点.previousElementSibling
        + 获取上一个兄弟元素节点
      9. 节点.nextSibling
        + 获取下一个兄弟节点
      10. 节点.nextElementSibling
        + 获取下一个兄弟元素节点

      11. 节点.parentNode
        + 获取父节点
      12. 节点.parentElement
        + 获取父元素节点

      13. 节点.attributes(有序号 从0开始 超过序号显示undefind)
        + 获取该节点的所有属性节点
        
        
1.获取子元素和子节点例:       
console.log(document.body.children);//子元素
console.log(document.body.childNodes);//子节点
console.log(document.body.children.item(0)) //获取子元素列表中第几个标签  同下但是下面的好使
console.log(document.body.children[0]) //获取子元素列表中第几个标签
console.log(document.body.children.length); //子元素的数量 这个列表的数量
console.log(document.body.children.namedItem("cd")) //根据name获取列表中对应的元素

console.log(document.body.childNodes.item(0)) //获取列表中第几个节点
console.log(document.body.childNodes[0])

console.log(document.body.firstChild);//第一个子节点
console.log(document.body.firstElementChild);//第一个子元素

console.log(document.body.lastChild);//最后一个子节点
console.log(document.body.lastElementChild);//最后一个子元素

var div0=document.getElementById("div0");
console.log(div0.parentNode);//父节点
console.log(div0.parentElement);//父元素

console.log(div0.previousSibling);//向上的一个兄弟节点
console.log(div0.previousElementSibling);//向上的一个兄弟元素
console.log(div0.nextSibling);//向下的一个兄弟节点
console.log(div0.nextElementSibling);//向下的一个兄弟元素




2.子元素和子节点的存储位置 迭代器                Note！！！！！
console.log(document.body.children);//子元素 2    放在 HTMLCollection 列表中
         for(var value of document.body.children){       //子元素有迭代器 可以用 for of 遍历
             console.log(value)
         }
console.log(document.body.childNodes);//子节点 4   放在 NodeList 列表中 里面放着所有的节点
         for(var value of document.body.childNodes){     //子节点也有迭代器 可以用 for of 遍历
             console.log(value)
         }
         另一种遍历方式    NodeList是有forEach方法，可以直接遍历
         document.body.childNodes.forEach(function(item,index){
             console.log(item,index);
         })

3.节点属性

常见的节点属性
    1. nodeType(节点类型)
      => 元素节点: 1
      => 属性节点: 2
      => 文本节点: 3
      => 注释节点: 8
      => 语法: 节点.nodeType
    2. nodeName(节点名称)        // nodeName可以判断当前标签是什么标签 (记)！！！！！！
      => 元素节点: 大写标签名
      => 属性节点: 属性名
      => 文本节点: #text
      => 注释节点: #comment
    3. nodeValue(节点内容)
      => 元素节点: null
      => 属性节点: 属性值
      => 文本节点: 文本内容
      => 注释节点: 注释内容
// nodeName 节点名
// nodeType 节点类型
// nodeValue 节点值
// console.log(document.body.firstElementChild.nodeName);//DIV 标签是大写标签名
// console.log(document.body.firstElementChild.nodeType);//1
// console.log(document.body.firstElementChild.nodeValue);//元素的nodeValue是null

// console.log(document.body.firstChild.nodeName);//#text  如果文本节点 #text 
// console.log(document.body.firstChild.nodeType);//3 文本节点
// console.log(document.body.firstChild.nodeValue);// sss  节点的内容

4.节点操作

1.创建节点
    + 用 js 的代码制作一个节点出来

  1. 创建元素节点
    + 语法: document.createElement('标签名')
    + 返回值: 一个创建好的元素节点

  2. 创建文本节点
    + 语法: document.createTextNode('文本内容')
    + 返回值: 一个创建好的文本节点
 
例:
// 1. 创建元素节点
var creEle = document.createElement('div')
console.log(creEle)
var creEle1 = document.createElement('sxd')   //可以创建自定义标签
console.log(creEle1)

// 2. 创建文本节点
var creText = document.createTextNode('我是一个创建的文本节点')  //是dom节点 不是字符串
console.log(creText)
var str = '我是一个创建的文本节点'   //这个是字符串
console.log(str)

// 3. 创建文本内容
// span.textContent="23";
// span.innerText="2\n3"

4.1.1补充创建文本内容三者之间的区别

innerHTML
innerText
textContent

// 三者之间的区别

1.innerHTML
  console.log(div0.innerHTML);//是一个html文本内容

2,innerText
  console.log(div0.innerText); // 不具有格式
//是这个元素中文本内容及所有后代的文本内容 可以设置各种换行符等操作，但是不能获取到这些
// div0.innerText="a\nb"; //可以获取\n 但是不能设置
// ab                    //得到的没有换行内容

3.textContent
  console.log(div0.textContent); // 是有格式的
//是这个元素中文本内容及所有后代的文本内容，可以获取包含格式 比如换行符，回车符 空格等等操作，但是不能设置这些内容
// div0.textContent="a\nb"; //不可以设置\n
// a                       //得到的有换行内容
// b

4.2插入节点

2.插入节点
    + 把一个节点放在另一个节点内部

  1. appendChild()
    + 语法: 父节点.appendChild(子节点)
    + 作用: 把该子节点插入到父节点内部, 并且排列在最后的位置

  2. insertBeofre()
    + 语法: 父节点.insertBefore(要插入的子节点, 谁的前面)
    + 作用: 把该子节点插入到父节点内部, 并且排列在一个已知节点的前面
    
例:   
// 获取到页面上的 div
var pageDiv = document.querySelector('div')
var pageP = document.querySelector('p:nth-child(2)')

// 创建一个节点
var creDiv = document.createElement('div')
var creSpan = document.createElement('guoxiang')
creSpan.innerHTML = '我是创建的 span 标签'

1. 我想把 span 插入到 创建的 div 内
creDiv.appendChild(creSpan)
console.log(creDiv)

2. 我想把 创建的 div 插入到 页面的 div 内
pageDiv.appendChild(creDiv)
  // 我想把 创建的 div 插入到 页面的 第二个 p 前面
pageDiv.insertBefore(creDiv, pageP)

4.3删除节点

3.删除节点
  1. removeChild()
    + 语法: 父节点.removeChild(子节点)
    + 作用: 把该子节点从父节点内移除

  2. remove()
    + 语法: 节点.remove()
    + 作用: 把该节点自己删除
    
例:
0. 获取元素
var eleDiv = document.querySelector('div')
var eleP = document.querySelector('p')
var eleSpan = document.querySelector('span')

1. 删除 div 内的 p
eleDiv.removeChild(eleP)
eleDiv.removeChild(eleSpan)
document.body.removeChild(eleDiv)

2. 删除 div 内的 p
eleP.remove()
eleDiv.remove()

4.4替换节点

4.替换节点
  1. 替换节点
    + 语法: 父节点.replaceChild(换上节点, 换下节点)
    + 作用: 在该父节点内, 使用换上节点替换掉换下节点

例:
// 获取元素
var eleDiv = document.querySelector('div')
var eleP = document.querySelector('p:nth-child(2)')

// 创建节点
var creEle = document.createElement('guoxiang')
creEle.innerHTML = '你好 世界'

// 1. replaceChild()
eleDiv.replaceChild(creEle, eleP)

4.5克隆节点

5.克隆节点
    + 把节点复制一份一模一样的

  1. cloneNode
    + 语法: 节点.cloneNode(参数)
      => 参数默认是 false, 表示不克隆后代节点
      => 参数选填是 true, 表示克隆后代节点
例:
// 获取元素
var eleDiv = document.querySelector('div')
console.log(eleDiv)

// 开始克隆(在控制台显示)
var cloneDiv = eleDiv.cloneNode(true)
console.log(cloneDiv)

5.小案例-在ul内创建这个列表

var arr=[
    {site:"网易",url:"http://www.163.com"},
    {site:"淘宝",url:"http://www.taobao.com"},
    {site:"京东",url:"http://www.jd.com"},
    {site:"腾讯",url:"http://www.qq.com"},
    {site:"百度",url:"http://www.baidu.com"},
]

1.在ul内创建这个列表(最简单的)
var str="";
for(var i=0;i<arr.length;i++){
    str+=`<li><a href='${arr[i].url}'>${arr[i].site}</a></li>`
}
ul2.innerHTML=str;


2.方法2 reduce
ul2.innerHTML=arr.reduce(function(v,t){
    return v+`<li><a href='${t.url}'>${t.site}</a></li>`
},"");


3.方法3 DOM元素处理             // DOM操作第一麻烦，优点保留原有的DOM元素，不会产生覆盖
for(var i=0;i<arr.length;i++){
    var li=document.createElement("li");
    var a=document.createElement("a");
    li.appendChild(a);
    a.href=arr[i].url;
    a.textContent=arr[i].site;
    ul.appendChild(li);//每次把li放在ul中都会产生回流       这样效率太低
}


4.创建文档碎片节点       解决上面回流问题   类似胶囊
var elem=document.createDocumentFragment(); 
for(var i=0;i<arr.length;i++){
    var li=document.createElement("li");
    var a=document.createElement("a");
    li.appendChild(a);
    a.href=arr[i].url;
    a.textContent=arr[i].site;
    elem.appendChild(li);
}
ul2.appendChild(elem);//这样只会造成一次回流

6.DOM属性

认识元素属性
  1. 原生属性(写在页面上的内容id不行)
    => 在 W3C 规范内有的属性
    => 比如: id class type src href ...
    => 对标签进行修饰, 有各自的特殊意义

  2. 自定义属性(在规范内就是个名字)
    => 在 W3C 规范内没有的属性
    => 就是我们自己定义了一个属性书写在标签身上, 没有特殊意义, 用来记录一些信息

  3. H5 自定义属性
    => 约定了一种书写自定义属性的形式
      -> 以 data- 开头
      -> 书写规范: data-属性名 = 属性值
    => 就是我们自己定义了一个属性书写在标签身上, 没有特殊意义, 用来记录一些信息

操作元素属性
  1. 操作原生属性
    + 直接使用属性名操作即可
    + 注意: 这个方法一般不操作 类名 和 样式
    + 读:
      => 语法: 元素.属性名
      => 得到: 该元素身上该原生属性的值
    + 写:
      => 语法: 元素.属性名 = 属性值
      => 作用: 设置元素身上该原生属性的值
    + 有一种特殊的属性, 叫做 布尔类型 属性
      => 书写的时候, 只要有属性名就可以生效的属性
      => 比如: checked, selected, ...
      => 获取到的内容就是 布尔值
      => 设置的时候, 也可以使用 布尔值 直接进行设置

  2. 操作自定义属性
    + 注意: 操作自定义属性的方法可以操作原生属性, 但是不建议操作
    + 设置
      => 语法: 元素.setAttribute(属性名, 属性值)
      => 作用: 该该元素设置一个自定义属性
    + 获取
      => 语法: 元素.getAttribute(属性名)
      => 返回值: 元素身上该属性对应的值
    + 删除
      => 语法: 元素.removeAttribute(属性名)
      => 作用: 删除元素身上该属性

  3. 操作 H5 自定义属性
    + 每一个元素身上天生自带一个 dataset 属性, 是一个类似于对象的数据结构
    + 对于元素 H5 自定义属性的操作, 就是对这个 dataset 数据结构的操作
    + 增: 元素.dataset.属性名 = 属性值
    + 删: delete 元素.dataset.属性名
    + 改: 元素.dataset.属性名 = 属性值
    + 查: 元素.dataset.属性名
  
  
<div id="box" class="box" data-id="box" data-index="1" hello="world" abc="100"></div>
<input type="checkbox" checked>

0. 获取元素 (ele自定义属性  inp原生属性就是写在网页上的)
var ele = document.querySelector('div')
var inp = document.querySelector('input')
console.log(ele)

1. 操作原生属性
// 1-1. 获取原生属性
console.log(ele.id)
console.log(inp.type)
console.log(inp.checked)
// 1-2. 设置原生属性
ele.id = 'container'
inp.checked = false
ele.id = ''


2. 自定义属性
// 2-1. 设置
ele.setAttribute('gx', '前端小灰狼') 
// 2-2. 获取
var res = ele.getAttribute('gx')
console.log(res)
// 2-3. 删除
ele.removeAttribute('hello')


3. H5 自定义属性
console.log(ele.dataset)
// 3-1. 增
ele.dataset.gx = '前端小灰狼'
ele.dataset.userEmail = '1111@163.com'
// 3-2. 删
delete ele.dataset.id
delete ele.dataset.index
delete ele.dataset.userEmail
// 3-3. 改
ele.dataset.gx = '你好 世界'
// 3-4. 查
console.log(ele.dataset.gx)

6.1全选小案例

<div id="abc" ab="3" title="abc" class="div0" ab-cd="aaa" type="abc">1</div>
<input type="checkbox" placeholder="aa">

<ul open>
    <li>北京</li>
    <li>上海</li>
    <li>武汉</li>
    <li>天津</li>
    <li>广州</li>
    <li>西安</li>
</ul>

 //全选
var ck=document.querySelector("input");
    var ul=document.querySelector("ul");
    ck.addEventListener("click",clickHandler);  //监听事件   clickHandler是一个回调函数 

    function clickHandler(e){
        // console.log(ck.checked)     //多选框是否选中  ck的对象属性checked
        ck.checked ? ul.setAttribute("open","") : ul.removeAttribute("open");
    }

7.DOM样式

操作元素样式
    + 在前端 JS 内操作样式分成三类
      => 获取元素行内样式
      => 获取元素非行内样式(元素所有的样式都能拿得到)
      => 设置元素行内样式

获取元素行内样式
  => 语法: 元素.style.样式名
  => 注意: 如果是带有 中划线(-) 的样式名, 修改成驼峰命名法或者使用数组关联语法   ！！！！！！！！！！！

获取元素非行内样式
  => 标准浏览器: window.getComputedStyle(你要获取样式的元素).样式名
  => IE 低版本: 元素.currentStyle.样式名
  => 注意: 如果是带有 中划线(-) 的样式名, 修改成驼峰命名法或者使用数组关联语法
  
设置元素行内样式
  => 语法: 元素.style.样式名 = 样式值
  => 注意: 样式值, 你的 css 应该怎么写, 这里就怎么写
  => 注意: 如果是带有 中划线(-) 的样式名, 修改成驼峰命名法或者使用数组关联语法

// 获取元素                                  
var ele = document.querySelector('div')
console.log(ele)

// 1. 获取元素行内样式
console.log(ele.style.width)
  // (font-size得写成下面这样)
console.log(ele.style['font-size'])
console.log(ele.style.fontSize)

console.log(ele.style.height)
console.log(ele.style.backgroundColor)

2. 获取元素非行内样式(行内和非行内都能获取)
console.log(window.getComputedStyle(ele).width)
console.log(window.getComputedStyle(ele).height)
console.log(window.getComputedStyle(ele).fontSize)
console.log(window.getComputedStyle(ele)['background-color'])

3. 设置元素行内样式
ele.style.width = '300px'
ele.style.backgroundImage = 'url(https://img2.baidu.com/it/u=1572613686,938558453&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=400)'
ele.style.backgroundSize = '300px 100px'

7.1 DOM样式补充-重要

 样式：
    1、行内样式  标签属性 -->DOM树创建时
    2、CSS样式  CSS树
    当DOM渲染时，将CSS树和DOM树合并，DOM树上的样式权重最高（DOM树上样式是针对这个标签）
    大多数CSS样式都是针对一类标签

    行内样式在设置时，给了这个对象一个属性，style属性，style属性会把这个行内样式的字符串
    自动转换为一个CSSStyleDeclaration对象，包含了所有针对该div的样式内容，但是不包含
    CSS样式的内容
 
 1.获取行内样式
    div.style="width:100px;height:100px";
    div.setAttribute("style","width:100px;height:100px");
    div.style.width="100px";
    div.style.height="100px";
    console.log(div.style);
    div.style 的值有两种类型，一种可以设置为字符串，另一种可以当做一个对象，设置对象的属性


 1.1 一般使用       这个是还没有完成DOM树的渲染时 拿到的数据
    getComputedStyle(div)  可以获取到这个元素的所有的计算后样式，包括行内样式和css样式
    console.log(getComputedStyle(div).color)
    console.log(getComputedStyle(div).width)
    console.log(getComputedStyle(div).height)

 1.2 IE8  兼容问题         IE8以前的不支持getComputedStyle(div)   
    console.log(div.currentStyle.color)
    console.log(document.styleSheets);    //StyleSheetList  每个css样式列表

    StyleSheetList  也是迭代器 这个列表里 存放的都是CSSStyleSheet对象  
  
 2.设置行内样式   DOM元素的style属性
    设置CSS样式   document.styleSheets[下标].addRule() 添加样式

 3. 获取行内样式  DOM元素的style属性
     获取DOM元素的计算后样式  getComputedStyle(DOM对象).样式
     获取某个CSS样式  document.styleSheets[下标].cssRules[下标].cssText

7.1.1 补充

 这个是每个style   style中可能有若干个css样式
        CSSStyleSheet
            href  如果这个值是null表示当前页面的style标签，如果是某个地址
                表示使用link引入的外部css样式
            title 标题
            type css的类型

            cssRules  CSSRuleList
            rules  CSSRuleList

       上述这两个列表都是同一个对象CSSRuleList

        addRule() 添加css
        insertRule() 插入css

        deleteRule() 删除css
        removeRule() 删除css

        replace() 替换css

        这个列表中的对象都是CSSStyleRule
            CSSStyleRule对象
            cssText  css文本
            parentStyleSheet 父级的样式对象
            style CSSStyleDeclaration 和行内样式类型相同
            selectorText 当前css的选择器
            
console.log(document.styleSheets);
var styles=document.styleSheets[document.styleSheets.length-1];
console.log(styles.cssRules)
styles.addRule(".div2","width:100px;height:100px;background-color:red;",0);
styles.addRule(".div3>div","width:50px;height:50px;background-color:green;",1);
styles.insertRule(".div4 {width:150px;height:150px;background-color:blue;}",2)
console.log(styles.cssRules)
console.log(styles.cssRules[1].cssText)
console.log(styles.cssRules[1].style.width)
正则表达式的内容              通过 js 写 css

8.浏览器的窗口尺寸

浏览器的窗口尺寸
    + 获取浏览器可视窗口的尺寸
    + 注意: 获取到的尺寸是包含滚动条在内的尺寸
    + 语法:
      => window.innerWidth  获取宽度
      => window.innerHeight 获取高度
      
// 获取浏览器窗口尺寸
console.log('宽度 : ', window.innerWidth)
console.log('高度 : ', window.innerHeight)

9.浏览器卷去的尺寸(滚动条定位)

浏览器卷去的尺寸(滚动条定位)
 卷去的高度
    + 语法:
      => document.documentElement.scrollTop
        -> 页面有 DOCTYPE 标签的时候能获取到值
      => document.body.scrollTop
        -> 页面没有 DOCTYPE 标签的时候能获取到值
    + 兼容: 使用 || 短路表达式
      => var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

 卷去的宽度
    + 语法:
      => document.documentElement.scrollLeft
        -> 页面有 DOCTYPE 标签的时候能获取到值
      => document.body.scrollLeft
        -> 页面没有 DOCTYPE 标签的时候能获取到值
    + 兼容: 使用 || 短路表达式
      => var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
      
  window.onscroll = function () {
  // 卷去的高度
  console.log(document.documentElement.scrollTop)
  console.log(document.body.scrollTop)
  // 兼容
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  console.log('卷去的高度 : ', scrollTop)


  // 卷去的宽度
  console.log(document.documentElement.scrollLeft)
  console.log(document.body.scrollLeft)
  var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
  console.log('卷去的宽度 : ', scrollLeft)
}

10.浏览器滚动到

浏览器滚动到
    + 浏览器滚动条定位
    + 语法: window.scrollTo()
    + 通过传递不同的参数, 来实现不同的效果

  传递数字
    + 语法: window.scrollTo(x, y)
      => x 表示横向滚动条位置
      => y 表示纵向滚动条位置
    + 注意: 如果你是传递数字, 必须传递两个, 一个会报错
    + 只能瞬间定位(秒滚动)

  传递对象
    + 语法: window.scrollTo({ top: yyy, left: xxx })
    + 默认是瞬间定位, 加一个 behavior: 'smooth' 属性表示是否平滑滚动(可平滑滚动)


btn.onclick = function () {
  // 浏览器滚动到 - 传递数字
  window.scrollTo(100, 1000)

  // 浏览器滚动到 - 传递对象
  window.scrollTo({
    left: 100,
    top: 0,
    behavior: 'smooth'
  })
}

11.获取元素尺寸

  1. offset 一组
    + 语法:
      => 元素.offsetWidth
      => 元素.offsetHeight
    + 得到: 该元素 内容 + padding + border 区域的尺(注意边框border分左右的)
    + 注意: 当该元素在页面上不占位置的时候, 拿不到尺寸

  2. client 一组
    + 语法:
      => 元素.clientWidth
      => 元素.clientHeight
    + 得到: 该元素 内容 + padding 区域的尺寸
    + 注意: 当该元素在页面上不占位置的时候, 拿不到尺寸
 
 // 获取元素
var ele = document.querySelector('div')


// 1. offset 一组
console.log('offsetWidth : ', ele.offsetWidth)
console.log('offsetHeight : ', ele.offsetHeight)

console.log('----------------------------')

// 2. client 一组
console.log('clientWidth : ', ele.clientWidth)
console.log('clientHeight : ', ele.clientHeight)

12.获取可视窗口尺寸

    + 之前: BOM 级别的获取
      => 语法:
        -> window.innerWidth
        -> window.innerHeight
      => 得到: 包含滚动条在内的尺寸

    + 现在: DOM 级别的获取
      => 语法:
        -> document.documentElement.clientWidth
        -> document.documentElement.clientHeight
      => 得到: 不包含滚动条在内的尺寸

13.获取元素偏移量

  1. offset 一组
    + 偏移量参考父级
      => 语法: 元素.offsetParent
      => 得到: 将来你获取该元素偏移量的时候, 参考的是哪一个元素
        -> 其实就是该元素的定位父级
    + 获取偏移量
      => 语法:
        -> 元素.offsetLeft
        -> 元素.offsetTop
      => 得到: 该元素和参考父元素左上角的距离

  2. client 一组
    + 语法:
      => 元素.clientLeft
      => 元素.clientTop
    + 得到:
      => 把元素的(内容 + padding) 当做一个整体, 和边框左上角的偏移量
      => 其实就是上边框和左边框的宽度

day9

1.获取元素

2.获取节点

3.节点属性

4.节点操作

4.1.1补充 创建文本内容 三者之间的区别

4.2插入节点

4.3删除节点

4.4替换节点

4.5克隆节点

5.小案例-在ul内创建这个列表

6.DOM属性

6.1全选小案例

7.DOM样式

7.1 DOM样式补充-重要

7.1.1 补充

8.浏览器的窗口尺寸

9.浏览器卷去的尺寸(滚动条定位)

10.浏览器滚动到

11.获取元素尺寸

12.获取可视窗口尺寸

13.获取元素偏移量

4.1.1补充创建文本内容三者之间的区别