WebAPI

DOM : 一套操作网页内容的函数
- DOM 一般指文档对象模型。文档对象模型（Document Object Model，简称 DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口(api)
BOM : 一套操作浏览器窗口的函数
- Brower Object Model 缩写 BOM
Web : DOM+BOM
API : 预先定义的接口 ( 一般指函数 )

DOM

1. DOM 工作的流程

浏览器将硬盘中的代码读取到内存
编译器解析代码生成一颗 Dom 树
- DOM 树在内存中以对象的方式存储，称之为 DOM 对象(document)
- DOM 的工作原理就是在这个环节，通过 js 语法修改 DOM 对象，DOM 树变了，渲染的页面也变化
渲染引擎开始渲染 Dom 树生成页面

2. 节点

页面 ( DOM树 ) 主要由节点（node）组成 : 一切内容皆节点

元素节点(标签)
属性节点
文本节点
注释节点
实际业务中使用最多的是： 元素节点

3. Dom 网页动态操作

查

1. 查元素 ( 查询页面元素 )

根据 css 选择器获取 Dom 元素

获取一个元素
- 语法 : document.querySelect( 'css选择器' ) 得到的是 Dom 对象,可以直接对 Dom 修改。
- 选择器存在获取满足条件的第一个元素,选择器不存在获取 null
获取多个元素
- 语法 : document.querySelectAll( 'css选择器' ) 得到的是一个伪数组,不能直接操作
- 获取满足条件的所有元素返回伪数组 { '1':dom对象1,'2':dom对象2 }，不能直接修改，需要通过下标取出DOM对象才可以操作
根据id名获取 : 具有唯一性
- 语法 : let btn = document.getElementById('btn') 得到的是 Dom 对象
根据标签名获取
- 语法 : let liList = document.getElementsByTagName('li') 得到的是一个伪数组
根据类名获取
- 语法 : boxList = document.getElementsByClassName('box') 得到的是一个伪数组
根据 name 获取表单元素
- 语法 : let genderList = document.getElementsByName('gender') 得到的是一个伪数组
注意 : 伪数组 (有数组三要素：元素、下标、长度。不能使用数组的方法)

2. 查内容 ( 元素内容操作 )

元素.innerText : 获取文本( 包含子元素文本 )
- 设置的时候：无法解析字符换串中的标签
元素. innerHtml : 获取文本+标签
- 设置的时候：可以解析字符换串中的标签

3.查属性 ( 元素属性操作 )

普通元素
- href: a 标签链接
- src : img 标签路径

 //修改a标签的href
 document.querySelector('a').href = 'http://www.baidu.cn'
 
 //修改img标签的src，页面的图片就会改变
 document.querySelector('img').src = './images/02.jpg'

表单元素
- value : 表单值
- disabled : 是否禁用布尔类型
- checked : 是否选中( radio 和 chekbox ) 布尔类型
- selected : 是否选中( 下拉菜单 ) 布尔类型

4.查样式

style 操作
- 语法: 元素. style .样式名='属性值'
- 注意: 样式名有杠的在 Dom 语法中用驼峰命名
- 应用场景: 单个样式修改

 document.querySelector('.box').style.width = '200px' // 修改宽度
 document.querySelector('.box').style.backgroundColor = 'green' // 修改颜色     
 document.querySelector('.box').style.opacity = 0.5 // 修改透明度

className 操作
- 语法 : 元素. className = '类名'
- 注意 :
  1. Dom操作类名不能只用class, class是js的关键字
  2. 会覆盖原先的类名
- 场景 : 由于只能操作一个类所以实际开发中很少使用

    <style>
        .one{
            margin: 20px auto;
        }
        .two{
            border:  10px solid yellow;
        }
    </style>
    <script>
     /* 使用className会覆盖原先的类名 */
     document.querySelector('.box').className = 'two'
     </script>

lassList 操作
- 语法 :
  1. 元素 . classList . add( '类名' ) 追加类名 , 多个类名使用逗号隔开
  2. 元素 . classList . remove( '类名' ) 移出类名
  3. 元素 . classList. toggle( '类名' ) 切换类名
- 注意: 切换类名, 有则移除,无则追加

    //1 追加类名：      
    document.querySelector('.box').classList.add('two','three')
    //2 移除类名:   
    document.querySelector('.box').classList.remove('one')
    //3 切换类名:    
    document.querySelector('.box').classList.toggle('two')

注意点： 如果样式名有-, border- margin- font-, 在 Dom 语法中都需要转成驼峰命名
- 原因：因为- 不符合 js 命名规则
- 驼峰：去掉- , -后面的首字母大写 margin-top : marginTop

5. 查节点

1. 查找子节点
- 子节点： 父元素.childNodes ( 包含标签、文本、注释 )
- 子元素节点 : 父元素.children
2. 查找兄弟元素节点
- 上一个兄弟元素 : 元素.previousElementSibling
- 下一个兄弟元素 : 元素.nextElementSibling

  let box = document.querySelector('.box')
  box.previousElementSibling.style.color = 'red' // 修改上一个元素的样式
  box.nextElementSibling.style.color = 'red' // 修改下一元素的样式

3. 查找父元素节点 元素.parentNode

<body>
    <ul>
      <li>我是班长1</li>
      <li id="li2">我是班长2</li>
    </ul>
  <script>
      let li2 = document.querySelector('#li2')
      console.log(li2.parentNode)//ul
      console.log(li2.parentNode.parentNode)//body
      console.log(li2.parentNode.parentNode.parentNode)//html
      console.log(li2.parentNode.parentNode.parentNode.parentNode)//document
      console.log(li2.parentNode.parentNode.parentNode.parentNode.parentNode)//null   
    </script>
  </body>

增

1. 新增节点

（1）创建空节点： document.createElement('标签')
（2）设置内容
（3）追加到页面
- 追加到最后面： 父元素.appendChild(子元素)
- 追加指定元素前面： 父元素.insertBefore(子元素,哪个元素的前面)

      //1.在内存中创建空标签
      //参数传 '标签名'
      let li =  document.createElement('li')
      //2.设置内容
      li.innerText = '我是新创建的li元素'
      console.log(li)
      //3.追加到页面   （默认创建元素只是在内存中，不会添加到DOM树，所以渲染引擎不渲染）
      let ul = document.querySelector('ul')//获取父元素
      //3.1 追加到最后面    父元素.appendChild(子元素)
      // ul.appendChild(li)//追加到ul中
      //3.2 追加到指定位置  父元素.insertBefore(子元素,要加到哪个元素的前面)
      let li2 = document.querySelector('#li2')//班长2
      ul.insertBefore(li, li2 )//li 追加到 li2的前面

2. 新增自定义属性

attribute 语法作用： 操作元素自定义属性
- 元素标准属性： HTML 和 CSS 有的属性（W3C标准）
- 自定义属性： HTML 和 CSS 没有的属性，自己添加的属性
  - 自定义属性不会渲染样式的，只是起到存储作用
attribute语法：
- 添加属性： 元素.setAttribute('属性名',属性值)
- 获取属性： 元素.getAttribute('属性名')
- 移除属性： 元素.removeAttribute('属性名')

删

语法： 父元素.removeChild(子元素)

克隆节点: 复制节点

语法： 元素.cloneNode(布尔类型)
- false: 不克隆后代元素
- true: 克隆所有后代元素

    let box = document.querySelector('.box')
    let cloneBox = box.cloneNode(true)
    //追加到body
    document.body.appendChild(cloneBox)

【前端知识点总结】WebAPI DOM篇（一）DOM操作

WebAPI

DOM

1. DOM 工作的流程

2. 节点

3. Dom 网页动态操作

查

1. 查元素 ( 查询页面元素 )

2. 查内容 ( 元素内容操作 )

3.查属性 ( 元素属性操作 )

4.查样式

5. 查节点

增

1. 新增节点

2. 新增自定义属性

删

克隆节点: 复制节点

猜你喜欢