操作DOM

• • 一、操作DOM
  • • 1、步骤
    • 2、创建元素节点
    • 3、创建文本节点
    • 4、增加dom(添加到指定父节点的最后)
    • 5、增加dom(添加到指定父节点的最后)
    • 6、增加dom(添加到父节点的最前边)
    • 7、删除DOM
    • 8、修改某一个节点
  • 二、克隆DOM
  • • 1、说明
    • 2、复制(克隆)一个LI
  • 三、获取元素尺寸(占地面积)
  • 四、获取浏览器窗口尺寸
  • 五、获取元素偏移量

一、操作DOM

• 常规意义上的操作DOM, 就是增删改查

1、步骤

1. 创建 (创建完成之后, 页面并不会有)
2. 增删改查

        
1
2
3

2、创建元素节点

• 语法：document.createElement(标签对象);

        var myLi = document.createElement('li');console.log(myLi);

3、创建文本节点

• 语法：document.createTextNode(文本内容);

        var myStr = document.createTextNode('我是li标签');console.log(myStr);

将文本节点写到元素节点中去

        // 创建元素节点var myLi = document.createElement('li')// 创建文本节点var myStr = document.createTextNode('我是li标签');myLi.appendChild(myStr);console.log(myLi);

4、增加dom(添加到指定父节点的最后)

• 语法：父节点.appendChild(创建的元素节点);

        // 创建元素节点var myLi = document.createElement('li')// 创建文本节点var myStr = document.createTextNode('我是li标签');myLi.appendChild(myStr);console.log(myLi);// 获取标对象签var oUl = document.querySelector('ul') ;// 增加dom(添加到指定父节点的最后)oUl.appendChild(myLi);

5、增加dom(添加到指定父节点的最后)

• 语法：父节点.insertBefore(要插入的新节点, 插入到那个节点前(传递Null的话是插入到父节点最后))

        // 创建元素节点var myLi = document.createElement('li')// 创建文本节点var myStr = document.createTextNode('我是li标签');myLi.appendChild(myStr);console.log(myLi);// 获取标对象签var oUl = document.querySelector('ul') ;// 增加dom(添加到指定父节点的最后) oUl.insertBefore(myLi, null);

6、增加dom(添加到父节点的最前边)

        // 创建元素节点var myLi = document.createElement('li')// 创建文本节点var myStr = document.createTextNode('我是li标签');myLi.appendChild(myStr);console.log(myLi);// 获取标对象签var oUl = document.querySelector('ul') ;// 增加dom(添加到父节点的最前边)oUl.insertBefore(myLi, oUl.firstElementChild);

7、删除DOM

• 语法：父节点.removeChild(要删除的节点);

        // 获取标对象签var oUl = document.querySelector('ul') ;// 删除DOM   oUl.removeChild(oUl.firstElementChild);

8、修改某一个节点

语法：父节点.replaceChild(新的节点, 要被修改的节点);

        // 创建元素节点var myLi = document.createElement('li')// 创建文本节点var myStr = document.createTextNode('我是li标签');myLi.appendChild(myStr);console.log(myLi);// 获取标对象签var oUl = document.querySelector('ul') ;var oLi = document.getElementsByTagName('li')[1];// 修改某一个节点    oUl.replaceChild(myLi, oLi);

二、克隆DOM

        
1
2
3

1、说明

        var oUl = document.querySelector('ul');var oLi = document.querySelector('li');console.log(oUl);console.log(oLi);oUl.appendChild(oLi);    

2、复制(克隆)一个LI

• 语法：想要复制的节点.cloneNode(参数布尔值)
• 参数false不克隆子节点(默认)
• 参数true克隆子节点

        var oUl = document.querySelector('ul');var oLi = document.querySelector('li');var newLi = oLi.cloneNode(true);oUl.appendChild(newLi);

三、获取元素尺寸(占地面积)

1. offsetXXX —> 实际宽度 + padding + border
2. clientXXX —> 实际宽度 + padding

        var oDiv = document.querySelector('div')// 1. offsetXXX         ---> 实际宽度 + padding + borderconsole.log('oDiv.offsetWidth：', oDiv.offsetWidth);console.log('oDiv.offsetHeight：', oDiv.offsetHeight);console.log('----------------------------')// 2. clientXXX         ---> 实际宽度 + paddingconsole.log('oDiv.clientWidth：', oDiv.clientWidth);console.log('oDiv.clientHeight：', oDiv.clientHeight);

四、获取浏览器窗口尺寸

1. window.innerXXX —> 计算时会包含浏览器的滚动条
2. document.documentElement.clientXXX —> 计算时不会计算滚动条(只计算浏览器的可视区域)

        var oDiv = document.querySelector('div')// 1. window.innerXXX   ---> 计算时 会包含浏览器的滚动条console.log('window.innerWidth', window.innerWidth)console.log('window.innerHeight', window.innerHeight)// 2. document.documentElement.clientXXX    ---> 计算时 不会计算滚动条(只计算浏览器的可视区域)console.log('document.documentElement.clientWidth', document.documentElement.clientWidth)console.log('document.documentElement.clientWidth', document.documentElement.clientHeight)

五、获取元素偏移量

• 元素.offsetParent
• 元素.offsetLeft
• 元素.offsetTop

        // 0. 获取元素var box2 = document.querySelector('.box2');// 1. 获取元素相对父级      元素.offsetParentconsole.log(box2.offsetParent);// 2. 获取元素的偏移量console.log('box2.offsetLeft', box2.offsetLeft);console.log('box2.offsetTop', box2.offsetTop);