JavaScript之DOM操作

创建

DOM节点创建最常用的便是document.createElement和document.createTextNode方法：

1.document.createElement

        const oDiv=document.createElement('div');
        const oIpt=document.createElement('input');
        const oSpan=document.createElement('span');
        const oUl=document.createElement('ul')

2.document.createTextNode

const text=document.createTextNode('你好啊')

3.创建标签属性

标签对象.setAttribute('')

        const oDiv1=document.querySelector('div')
       
        // 添加class='name'
        oDiv1.setAttribute('class','name')
        // 添加id
        oDiv1.setAttribute('id','name')
        // 添加name
        oDiv1.setAttribute('name','name')

查询

1.document.querySelector

var 变量=document.querySelector('div'）

查询到第一个符合条件的；

       const oDiv2=document.querySelector('div')
        // 获取class=name的第一个
        const oDiv3=document.querySelector('.name')
        // 获取id=name的第一个
        const oDiv4=document.querySelector('#name')
        // 属性值为什么的第一个
        const oDiv5=document.querySelector('[name="name"]')
        // 属性值以什么结尾的第一个
        const oDiv8=document.querySelector('[name$="name"]')
        // 属性值以什么开头的第一个
        const oDiv9=document.querySelector('[name^="name"]')
        // 属性值包含name的第一个
        const oDiv10=document.querySelector('[name*="name"]')
        //获取的是查询到的第一个
        const oDiv6=document.querySelector('ul>li')
        const oDiv7=document.querySelector('ul>li:nth-child(1)')

2.document.querySelectorAll

查询所有符合条件的，返回值是伪数组，可以通过ForEach循环遍历；

         const oDiv3=document.querySelectorAll('.name')
        // 获取id=name的所有符合的
        const oDiv4=document.querySelectorAll('#name')
        // 属性值为什么的所有符合的
        const oDiv5=document.querySelectorAll('[name="name"]')
        // 属性值以什么结尾的所有符合的
        const oDiv8=document.querySelectorAll('[name$="name"]')
        // 属性值以什么开头的所有符合的
        const oDiv9=document.querySelectorAll('[name^="name"]')
        // 属性值包含name的所有符合的
        const oDiv10=document.querySelectorAll('[name*="name"]')
        //获取的是查询到的所有
        const oDiv6=document.querySelectorAll('ul>li')

3.获取标签属性属性值

标签对象.getAttribute( '属性' )，返回值为字符串；

        let res =oDiv1.getAttribute('id');

4.标签支持属性

标签对象.属性 进行操作

标签对象.id

标签对象.className

标签对象.title

a标签.href

img标签.src

5.获取标签css样式的值

获取行内式css样式：

var 变量=标签.style.css属性；

获取任何样式的css样式：

var 变量=window.getComputedStyle(标签对象).css属性;

6.获取标签站位及间距

1.获取content+border+pandding;

返回值为数字，不带单位；

1. 标签对象.offsetwidth:获取宽
2. 标签对象.offsetHeight:获取高

标签对象.offsetLeft:左侧距离父元素的值；

标签对象.offsetTop:上方距离父元素的值；

2.获取content+padding

1. 标签对象.clientWidth;获取对应宽；
2. 标签对象.clientHeight;获取对应高；；
3. 标签对象.clientLeft:左侧边框宽度；
4. 标签对象.clientTop:上侧边框高度；

7.获取节点

1. 获取所有节点
   1. 标签对象.childNodes()
2. 获取标签节点
   1. 标签对象.children
   2. 获取第一个标签节点
      1. 标签对象.firstChild
   3. 获取最后一个标签节点
      1. 标签对象.lastChild()
   4. 获取下一个标签对象
      1. 标签对象.nexSibling()

class属性值操作

1.删除

标签.classList.remove('div1','div2','div3',);

2.新增

标签.classList.add('div1','div2','div3',);

3.替换

标签.classList.remove('div1','div2');

4.切换

标签.classList.toggle('div1');

原来有这个值，执行删除操作

没有这个值，执行添加操作；