wangjie-fourth 的个人博客

may be just need work hard

目录
DOM编程
/    

DOM编程

DOM编程是指使用JSwindow.document对象操作网页。

DOM:Document Object Model文档对象模型

HTML元素的原型链

div元素举例:
image.png
Node有很多类型,比如说元素节点、文本节点、注释节点等。

获取元素的API

1、通用方法

  • document.getElementById('idxxx')
  • document.getElementsByTagName('div')[0]
  • document.getElementsByClassName('red')[0]
  • document.querySelector('#idxxx')//可以填css选择器
  • document.querySelectorAll('.red')[0]//可以填css选择器

工作上可以使用后俩种
前面三种一般在兼容IE游览器才使用

2、获取指定元素
(1)获取html元素

  • document.documentElement

(2)获取head元素

  • document.head

(3)获取body元素

  • document.body

(4)获取窗口

  • window

(5)获取所有元素

  • document.all

document.all是第6个falsy值

添加元素

1、添加一个标签节点

  • let div1 = document.createElement('div')

2、创建一个文本节点

  • let text1 = document.createTextNode('你好')

3、向标签里插入文本

  • div1.appendChild(text1)
  • div1.innerText = '你好'
  • div1.textContent = '你好'

4、向页面中插入
因为上述代码创建的标签是处于JS线程中,需要将其插入到head或者body里面,才可以生效。

  • document.body.appendChild(div)
  • 已在页面中的元素.appendChild(div)

(1)appendChild的坑
image.png
位于test2中。一个元素不能出现在俩个地方,除非复制一份,即let div2 = div.cloneNode(true)

删除元素

  • div1.parentNode.removeChild(div1)
  • div1.remove()

改元素

改属性

1、添加标准属性
(1)添加class

  • div1.className = 'red blue';// 全覆盖
  • div1.classList.add('red')

(2)添加style

  • div1.style = 'width:100px; color:blue;'// 全覆盖
  • div1.style.width = '200px'

2、读取标准属性

  • div.classList
  • div.getAttribute('class')
改事件处理函数

1、div1.onclick默认为null
默认点击div不会有任何事情发生。但是如果把div.onclick改为一个函数fn,那么点击div的时候,游览器就会调用这个函数,即fn.call(div,event)。div会被当作this,event则包含了点击事件的所有信息,如坐标

2、div.addEventListener
这是div1.onclick的升级版

改内容

1、改文本内容

  • div1.innerText = 'xxx'
  • div1.textContent = 'xxx'

2、改HTML内容

  • div1.innerHTML = '重要内容'

3、改标签

  • div1.innerHTML = '';// 先清空
  • div1.appendChild(div2);//再加内容
改父标签
  • 新父标签.appendChild(div1)// 这样div1就会从原来的地方消失

查标签

1、查父亲标签

  • 标签.parentNode
  • 标签.parentElement

2、查孩子

  • 标签.childNodes
  • 标签.children

3、查兄弟姐妹

  • 标签.parentNode.children:包含自己
  • 标签.parentNode.childNodes:包含自己

4、查第一个孩子节点

  • 标签.firstChild

5、查最后一个孩子

  • 标签.lastChild

6、查看上一个兄弟节点

  • 标签.previousSibling
  • 标签.previousElementSibling

7、查看下一个兄弟节点

  • 标签.nextSibling
  • 标签.nextElementSibling

遍历div里面的所有元素

image.png

DOM操作是跨线程的

游览器里面有渲染引擎和JS引擎,我们的DOM操作都是在JS引擎操作的,但JS引擎不能操作页面,它只能通过线程之间的通信告诉渲染引擎如何修改页面。

评论