【前端】DOM操作

目录

一、 属性

二、方法

三、DOM扩展

---

一、 属性

   1.返回节点名称 nodeName

    var ulList=document.querySelector('ul')

    var li=document.querySelector('.three')

    var ya=document.querySelector('.four')

    var btn=document.querySelector('button')

    var add=document.getElementsByClassName('btn')[0]

    console.log(ulList.nodeName);

  2. parentNode 返回当前节点的父节点

       Eg: console.log(ulList.parentNode.parentNode);

  3.返回所有子节点 childNodes 类数组  (几乎不用)

       Eg: console.log(ulList.childNodes);

  4.返回第一个子节点  firstChild

       Eg: console.log(ulList.firstChild);

    返回第一个子节点  firstElementChild

       Eg:console.log(ulList.firstElementChild);

   5.返回最后一个子节点 lastChild

        Eg: console.log(ulList.lastChild);

      返回最后一个子节点  lastElementChild

        Eg:console.log(ulList.lastElementChild);

    6.返回上一个节点 previousSibling

        Eg:console.log(li.previousSibling);

       返回上一个节点 previousElementSibling

        Eg:console.log(li.previousElementSibling);

    7.返回下一个节点 nextSibling

        Eg:console.log(li.nextSibling);

       返回下一个节点 nextElementSibling

        Eg:console.log(li.nextElementSibling);

二、方法

（一）

    1.判断是否有子节点 hasChildNodeS()  得到的是布尔值

        Eg: console.log(li.hasChildNodes());

     2.创建节点:

        document.createElement('节点名称')

        Eg: var newLi=document.createElement('li')

（二、添加）

     3.向当前节点末尾添加子节点

        appendChild()  父元素.appendChild(新节点)

         Eg: ulList.appendChild(newLi)

 btn.onclick=function(){

          // 1.创建li标签

          var newLi=document.createElement('li')

          newLi.innerHTML=Math.random()

          // 2.向ul添加li标签

          ulList.appendChild(newLi)

      }

      4.向指定位置添加

         insertBefore(新节点，参照节点)

 add.onclick=function(){

        // 1.创建li标签

          var newLi=document.createElement('li')

        // 1.1丰富li标签内容

          newLi.innerHTML=Math.round(Math.random())

        // 2.向ul添加li标签

        ulList.insertBefore(newLi,li)

（三、替换）

1.父元素.replaceChild( ) (新节点.替换节点)  接受俩个参数

var newL=document.createElement('li')

             newL.innerHTML="烤菠萝"

             ulList.replaceChild(newL,ya)

 2.删除 父元素.removeChild(子节点) 接受一个参数，要移除的节点

          Eg:  ulList.removeChild(li)

3.克隆 cloneNode(布尔值)  接受一个布尔值参数

    true克隆子节点  是深赋值

    flase不克隆子节点  默认是flase 是浅赋值

var newThree=li.cloneNode(true)

   ulList.appendChild(newThree)

三、DOM扩展

1.childElementCount( ):  返回子元素的个数

2.children:  返回元素子节点

3.firstElementChild( )：指向第一个子元素

4.lastElementChild( )：指向最后一个元素

5.nextElementSibling( )：指向下一个同辈元素

6.previousElementSibling( )：指向上一个同辈元素

7.innerHTML：可读写，获取或替换元素所有子节点

8.innerText：可读写，获取或替换元素所有文本

9.outerHTML：可读写，获取或替换元素所有子节点(包含自身)

---

四、Document类型：

1.属性： 

(1).获取html标签   document.documentElement

        Eg: var html = document.documentElement

           console.log(html);

     (2).获取body标签   document.body

        Eg:var body = document.body

          console.log(body);

     (3).设置或者获取title内容   document.title

        Eg:var title = document.title

          document.title = "大郎，该喝药了"

          console.log(title);

     (4).返回当前页面的网址    document.URL

        Eg:var URL = document.URL

          console.log(URL);

(5).返回当前文档的域名  document.domain

2.方法：

(1).查找元素

(2).文档写入: document.write( )

(3).创建元素: document.createElement( )

五、属性方法

1.设置属性setAttribute(属性名，属性值)

   为元素新增属性，或设置当前属性，接受俩个参数:属性名和值

2.获取元素属性 getAttribute(属性名)   获取元素属性，不存在则返回null

3.移除属性 removeAttribute(属性名)   删除元素属性

4. 点语法设置属性 只能体现标签本身有的属性

   setAttribute 设置属性 标签本身有的属性和自定义属性都可以体现

元素大小：

(1).Offset:

1. offsetLeft:获取元素左边框距离左边边缘距离

2. offsetTop:获取元素上边框距离上边缘距离

3. offsetHeight: 元素垂直方向所占空间

 height+padding+border（和子元素大小没有关系）

4.offsetWidth: 元素水平方向所占空间

width+padding+border（和子元素大小没有关系）

(2).Client:

1.clientHeight: 元素垂直方向所占空间 height+padding（和子元素大小没有关系）

2.clientWidth: 元素水平方向所占空间 width+padding（和子元素大小没有关系）

(3).Scroll:

      1.scrollHeight:  height+padding 子元素不大于父元素情况下和cliient相同，如果子元素大于父元素  大小为：子元素大小 padding+border+margin

      2.scrollWidth:   width+padding 子元素不大于父元素情况下和cliient相同，如果子元素大于父元素  大小为：子元素大小 padding+border+margin

和子元素大小有关系 当子元素超出父元素大小 : 

     scrollWidth  计算的是：子元素的width+padding+border+margin-left+父元素的border

     scrollHeight  计算的是：子元素的width+padding+border+margin-top+父元素的border

3.scrollLeft: 有滚动条的情况设置或者获取向左滚动的距离

4.scrollTop: 有滚动条的情况设置或者获取向上滚动的距离

(4).补充:

1).document.documentElement.clientWidth 可视窗口大小

2).页面之间如何传值:  a 标签  浏览器存储

         Eg: < a href="document.html?name=ss&age=24&like=eatrourou">document</ a>

(5). overflow: hidden 超出父元素的部分隐藏   应用：解决塌陷问题

      overflow: srcoll   超出父元素的部分隐藏可以滚动条显示

      overflow-x:hidden:x方向隐藏 y方向可以滚动条显示

      overflow-y:hidden:y方向隐藏 x方向可以滚动条显示