JS基础 DOM

基础知识

操作文档 HTML 的 JS 处理方式为 DOM 即 Document Object Model 文档对象模型。如果对HTML 很了解使用 DOM 并不复杂。

浏览器在加载页面是会生成 DOM 对象，以供我们使用 JS 控制页面元素。

文档渲染

浏览器会将HTML文本内容进行渲染，并生成相应的JS对象，同时会对不符规则的标签进行处理。

• 浏览器会将标签规范后渲染页面
• 目的一让页面可以正确呈现
• 目的二可以生成统一的JS可操作对象

标签修复

在html中只有内容 wgchen.blog.csdn.net 而没有任何标签时，通过浏览器的 检查 > 元素 标签查看会自动修复成以下格式的内容。

下面 H1 标签结束错误并且属性也没有引号，浏览器在渲染中会进行修复

  后盾人

处理后的结果

表格处理

表格 tabel 中不允许有内容，浏览器在渲染过程中会进行处理

  wgchen.blog.csdn.net
  
    csdn
  

渲染后会添加t body 标签并将 table 中的字符移出

标签移动

所有内容要写在BODY标签中，下面的SCRIPT标签写在了BODY后面，浏览器渲染后也会进行处理。

  console.dir('wgchen.blog.csdn.net')

渲染后处理的结果

操作时机

需要保证浏览器已经渲染了内容才可以读取的节点对象，下例将无法读取到节点对象。

  const node = document.getElementById('wgchen')
  console.log(node) //null

wgchen.blog.csdn.net

不过我们可以将脚本通过事件放在页面渲染完执行

  window.onload = () => {
    const node = document.getElementById('wgchen')
    console.log(node)
  }

wgchen.blog.csdn.net

或使用定时器将脚本设置为异步执行

  setTimeout(() => {
    const node = document.getElementById('wgchen')
    console.log(node)
  })

wgchen.blog.csdn.net

也可以放在文档加载后的事件处理函数中

  window.onload = function () {
    let hd = document.getElementById('wgchen')
    console.log(hd)
  }

wgchen.blog.csdn.net

或将脚本设置在外部文件并使用 defer 属性加载，defer即会等到DOM解析后迟延执行

节点对象

JS中操作DOM的内容称为节点对象（node)，即然是对象就包括操作NODE的属性和方法

• 包括12种类型的节点对象
• 常用节点为document、标签元素节点、文本节点、注释节点
• 节点均继承自Node类型，所以拥有相同的属性或方法
• document是DOM操作的起始节点

  
  wgchen
  
  


  


	// document节点 noteType为9
  console.log(document.nodeType)
  
  // 第一个子节点为，且nodetype为10
  console.log(document.childNodes.item(0).nodeType)
  
  // body 是标签节点 nodeType为1
  console.log(document.body.nodeType) 
  
  // body的属性节点 nodeType 为2
  console.log(document.body.attributes[0].nodeType)
  
	// body的第一个节点为文本节点，nodeType为3
  console.log(document.body.childNodes.item(0).nodeType)
  
  // body的第二个节点为注释，nodeType类型为8
  console.log(document.body.childNodes[1].nodeType)

原型链

在浏览器渲染过程中会将文档内容生成为不同的对象，我们来对下例中的 h1 标签进行讨论，其他节点情况相似。

• 不同类型节点由专有的构造函数创建对象
• 使用 console.dir 可以打印出DOM节点对象结构
• 节点也是对象所以也具有JS对象的特征

wgchen.blog.csdn.net

  function prototype(el) {
    console.dir(el.__proto__)
    el.__proto__ ? prototype(el.__proto__) : ''
  }
  const node = document.getElementById('wgchen')
  prototype(node)

最终得到的节点的原型链为

原型 说明 Object 根对象，提供hasOwnProperty等基本对象操作支持 EventTarget 提供addEventListener、removeEventListener等事件支持方法 Node 提供firstChild、parentNode等节点操作方法 Element 提供getElementsByTagName、querySelector等方法 HTMLElement 所有元素的基础类，提供childNodes、nodeType、nodeName、className、nodeName等方法 HTMLHeadingElement Head标题元素类

我们将上面的方法优化一下，实现提取节点原型链的数组

wgchen.blog.csdn.net


    function prototype(el) {
        const prototypes = []
        prototypes.push(el.__proto__)
        prototypes.push(...(el.__proto__ ? prototype(el.__proto__) : []))
        return prototypes
    }
    const h2 = document.querySelector('h2')
    const input = document.querySelector('input')

    console.log(prototype(input))

下面为标题元素增加两个原型方法，改变颜色与隐藏元素

wgchen.blog.csdn.net

  const h2 = document.querySelector('h2')
  HTMLHeadingElement.prototype = Object.assign(HTMLHeadingElement.prototype, {
    color(color) {
      this.style.color = color
    },
    hide() {
      this.style.display = 'none'
    },
  })

对象特征

即然DOM与我们其他JS创建的对象特征相仿，所以也可以为DOM对象添加属性或方法。

对于系统应用的属性，应该明确含义不应该随意使用，比如 ID 是用于标识元素唯一属性，不能用于其他目地。

• 后面会讲到其他解决方案，来自定义属性，ID属性可以直接修改但是不建议这么做

wgchen.blog.csdn.net

let hd = document.getElementById('hd')
hd.id = 'wgchen'
console.log(hd)

title 用于显示提示文档也不应该用于其他目地

wgchen.blog.csdn.net

  let hd = document.getElementById('hd')
  hd.title = 'wgchen'
  console.log(hd)

下面是为对象合并属性的示例

wgchen.blog.csdn.net


let hd = document.getElementById('hd')

Object.assign(hd, {
  //设置标签内容
  innerHTML: 'wgchen',
  color: 'red',
  change() {
    this.innerHTML = 'willem'
    this.style.color = this.color
  },
  onclick() {
    this.change()
  },
})

使用对象特性更改样式属性

wgchen.blog.csdn.net

  let hd = document.getElementById('hd')
  Object.assign(hd.style, {
    color: 'white',
    backgroundColor: 'red',
  })

常用节点

JS 提供了访问常用节点的 api

方法 说明 document document是DOM操作的起始节点 document.documentElement 文档节点即html标签节点 document.body body标签节点 document.head head标签节点 document.links 超链接集合 document.anchors 所有锚点集合 document.forms form表单集合 document.images 图片集合 DOCUMENT

document 是 window 对象的属性，是由 HTMLDocument 类实现的实例。

document 包含 DocumentType（唯一）或 html元素（唯一）或 comment 等元素

原型链中也包含 Node，所以可以使用有关节点操作的方法如 nodeType/NodeName等

console.dir(document.nodeType)
console.dir(document.nodeName)

使用title获取和设置文档标题

//获取文档标题
console.log(document.title)

//设置文档标签
document.title = 'wgchen-wgchen.blog.csdn.net'

获取当前URL

console.log(document.URL)

获取域名

console.log(document.domain) // tt.cc

获取来源地址

console.log(document.referrer)

系统针对特定标签提供了快速选择的方式

ID 获取元素

下面是直接使用 ID 获取元素（这是非标准操作，对浏览器有挑剔）

wgchen

  // 直接通过 ID 获取元素（非标准操作）
  console.dir(app)

links下面展示的是获取所有a标签

  wgchen.blog.csdn.net
  blog


  const nodes = document.links
  console.dir(nodes)

anchors 获取锚点集合

下例是获取锚点集合后能过 锚点 name 属性获取元素

  wgchen.blog.csdn.net
  blog


  // 通过锚点获取元素
  console.dir(document.anchors.n2)

images 获取所有图片节点

下面是获取所有图片节点

  // 获取所有图片节点
  console.dir(document.images)

节点属性

不同类型的节点拥有不同属性，下面是节点属性的说明与示例

nodeType 指以数值返回节点类型 nodeType说明1元素节点2属性节点3文本节点8注释节点9document对象

下面是节点 nodeType 的示例

  wgchen.blog.csdn.net
  blog
  


  const node = document.querySelector(`#app`)
  console.log(node.nodeType) //1
  console.log(node.firstChild.nodeType) //3
  console.log(node.attributes.id.nodeType) //2

  const xj = document.querySelector('.ycc')
  console.log(xj.childNodes[0].nodeType) //8

下面是根据指定的 nodeType 递归获取节点元素的示例

• 可获取文本、注释、标签等节点元素

博客 wgchen.blog.csdn.net

  
    
      
      
        
      
    
    
    
  



  function all(el, nodeType = 1) {
    const nodes = []

    Array.from(el.childNodes).map(node => {
      if (node.nodeType == nodeType) nodes.push(node)

      if (node.nodeType == 1) nodes.push(...all(node, nodeType))
    })
    return nodes
  }
  console.log(all(document.body))

Prototype 使用对象的原型进行检测

section 、main、aslide 标签的原型对象为 HTMLElement。

其他非系统标签的原型对象为 HTMLUnknownElement

wgchen
blog



let h1 = document.querySelector('h1')
let p = document.querySelector('p')
console.log(h1 instanceof HTMLHeadingElement) //true
console.log(p instanceof HTMLHeadingElement) //false
console.log(p instanceof Element) //true

下例是通过构建函数获取节点的示例

博客 wgchen.blog.csdn.net

  
    
      
      
        
      
    
    
    
  




function all(el, prototype) {
    const nodes = []

    Array.from(el.childNodes).map(node => {
      if (node instanceof prototype) nodes.push(node)
      if (node.nodeType == 1) nodes.push(...all(node, prototype))
    })
    return nodes
  }

  console.log(all(document.body, HTMLSpanElement))

nodeName 指定节点的名称

获取值为大写形式

nodeTypenodeName1元素名称如DIV2属性名称3#text8#comment

下面来操作 nodeName

  wgchen.blog.csdn.net
  blog
  
   博客


  const div = document.querySelector(`#app`)
  const span = document.querySelector('span')

  // 标签节点为大写的标签名DIV
  console.log(div.nodeName)
  console.log(span.nodeName)

  // 文本节点为 #text
  console.log(div.firstChild.nodeName)

  //属性节点为属性名
  console.log(div.attributes.id.nodeName)

  // 注释节点为#comment
  const xj = document.querySelector('.ycc')
  console.log(xj.childNodes[0].nodeName)

tagName 获取标签节点的名称

nodeName 可以获取不限于元素的节点名，tagName 仅能用于获取标签节点的名称

• tagName存在于Element类的原型中
• 文本、注释节点值为 undefined
• 获取的值为大写的标签名

  wgchen.blog.csdn.net
  blog
  
   博客


  const div = document.querySelector(`#app`)
  const span = document.querySelector('span')

  // 标签节点为大写的标签名 如DIV、SPAN
  console.log(div.tagName)
  console.log(span.tagName)

  // 文本节点为undefined
  console.log(div.firstChild.tagName)

  //属性节点为undefined
  console.log(div.attributes.id.tagName)

  // 注释节点为 undefined
  const xj = document.querySelector('.ycc')
  console.log(xj.childNodes[0].tagName)

nodeValue 获取节点值

使用 nodeValue 或 data 函数获取节点值，也可以使用节点的 data 属性获取节点内容。

nodeTypenodeValue1null2属性值3文本内容8注释内容

下面来看nodeValue的示例

  wgchen.blog.csdn.net
  博客
  



const node = document.querySelector(`#app`)

//标签的 nodeValue 值为 null
console.log(node.nodeValue)

//属性的 nodeVale 值为属性值
console.log(node.attributes.id.nodeValue)

//文本的 nodeValue 值为文本内容
const willem = document.querySelector('.willem')
console.log(willem.firstChild.nodeValue)

//注释的 nodeValue 值为注释内容
const xj = document.querySelector('.ycc')
console.log(xj.childNodes[0].nodeValue)

使用 data 属性可以获取文本与注释内容

  wgchen.blog.csdn.net
  



  const app = document.querySelector('#app')
  console.log(app.childNodes[0].data)
  console.log(app.childNodes[1].data)

树状节点

下面获取标签树状结构即多级标签结构，来加深一下节点的使用

  
    
    
    
  



function tree(el) {
  return Array.from(el.childNodes)
    .filter(node =>node.tagName)
    .map(node => ({
      name: node.nodeName,
      children: tree(node),
    }))
}
console.log(tree(document.getElementById('app')))

节点集合

Nodelist 与 HTMLCollection 都是包含多个节点标签的集合，大部分功能也是相同的。

• getElementsBy… 等方法返回的是 HTMLCollection
• querySelectorAll 返回的是 NodeList
• NodeList 节点列表是动态的，即内容添加后会动态更新

  //结果为NodeList
  console.log(document.querySelectorAll('div'))

  //结果为HTMLCollection
  console.log(document.getElementsByTagName('div'))

length 记录了节点元素的数量

Nodelist 与 HTMLCollection 包含 length属性，记录了节点元素的数量。

  wgchen.com
  willem.com


  const nodes = document.getElementsByTagName('div')
  for (let i = 0; i  {
    document.querySelector('body').insertAdjacentHTML('beforeend', '技术文章')
    console.log(elements)
  })
 

document.querySelectorAll 获取的集合是静态的

wgchen.blog.csdn.net
blog

添加元素


  let elements = document.querySelectorAll('h1')
  console.log(elements.length)

  let button = document.querySelector('#add')

  button.addEventListener('click', () => {
    document.querySelector('body').insertAdjacentHTML('beforeend', '博客')
    console.log(elements.length)
  })

使用静态

如果需要保存静态集合，则需要对集合进行复制。

wgchen.blog.csdn.net
博客

  const nodes = document.getElementsByTagName('div')
  const clone = Array.prototype.slice.call(nodes)
  console.log(nodes.length);//2
  
  document.body.appendChild(document.createElement('div'))
  console.log(nodes.length);//3
  console.log(clone.length);//2

遍历节点 forOf 遍历迭代对象

Nodelist与HTMLCollection是类数组的可迭代对象所以可以使用 for...of 进行遍历。

wgchen.blog.csdn.net
博客

  const nodes = document.getElementsByTagName('div')
  for (const item of nodes) {
    console.log(item)
  }

forEach 按顺序为数组中的每个元素调用一次函数

forEach()方法按顺序为数组中的每个元素调用一次函数。 注释：对于没有值的数组元素，不执行 forEach() 方法。

Nodelist节点列表也可以使用 forEach 来进行遍历，但HTMLCollection则不可以。

wgchen.blog.csdn.net
博客

  const nodes = document.querySelectorAll('div')
  nodes.forEach((node, key) => {
    console.log(node)
  })

call/apply

节点集合对象原型中不存在map方法，但可以借用Array的原型map方法实现遍历。

wgchen.blog.csdn.net
博客

  const nodes = document.querySelectorAll('div')
  Array.prototype.map.call(nodes, (node, index) => {
    console.log(node, index)
  })

当然也可以使用以下方式操作

wgchen.blog.csdn.net
博客

  const nodes = document.querySelectorAll('div');
  ;[].filter.call(nodes, node => {
    console.log(node)
  })

Array.from 将类数组转换为数组

Array.from用于将类数组转为组件，并提供第二个迭代函数。 所以可以借用Array.from实现遍历。

wgchen.blog.csdn.net
博客

  const nodes = document.querySelectorAll('div');
  Array.from(nodes, (node, index) => {
    console.log(node, index)
  })

展开语法，使用点语法转换节点为数组

wgchen.blog.csdn.net
willem

  let elements = document.getElementsByTagName('h1')
  console.log(elements)

  ;[...elements].map((item) => {
    item.addEventListener('click', function () {
      this.style.textTransform = 'uppercase'
    })
  })

节点关系

节点是父子级嵌套与前后兄弟关系，使用DOM提供的API可以获取这种关系的元素。

文本和注释也是节点，所以也在匹配结果中。

基础知识

节点是根据HTML内容产生的，所以也存在父子、兄弟、祖先、后代等节点关系，下例中的代码就会产生这种多重关系。

• h1 与 ul 是兄弟关系
• span 与 li 是父子关系
• ul 与 span 是后代关系
• span 与 ul 是祖先关系

博客

  
    wgchen
    wgchen.blog.csdn.net
  

下面是通过节点关系获取相应元素的方法。

节点属性说明childNodes获取所有子节点parentNode获取父节点firstChild第一个子节点lastChild最后一个子节点nextSibling下一个兄弟节点previousSibling上一个兄弟节点

子节点集合与首、尾节点获取。

文本也是node，所以也会在匹配当中。

  wgchen.blog.csdn.net
  技术文章
  博客


  const node = document.querySelector(`#app`)
  console.log(node.childNodes) //所有子节点
  console.log(node.firstChild) //第一个子节点是文本节点
  console.log(node.lastChild) //最后一个子节点也是文本节点

下面通过示例操作节点关联，文本也是node所以也会在匹配当中。

  wgchen.blog.csdn.net
  技术文章
  博客


  const node = app.querySelector(`.willem`)
  console.log(node.parentNode) //div#app
  console.log(node.childNodes) //文本节点
  console.log(node.nextSibling) //下一个兄弟节点是文本节点
  console.log(node.previousSibling) //上一个节点也是文本节点

document 是顶级节点 html 标签的父节点是 document

  console.log(document.documentElement.parentNode === document)
  // true

父节点集合

下例是查找元素的所有父节点

wgchen.blog.csdn.net


function parentNodes(node) {
  let nodes = []
  while ((node = node.parentNode)) nodes.push(node)
  return nodes
}

const el = document.getElementById('wgchen')
const nodes = parentNodes(el)

console.log(nodes)

使用递归获取所有父级节点

  
    
  



const span = document.querySelector('span')

function parentNodes(node) {
  const nodes = new Array(node.parentNode)
  if (node.parentNode) nodes.push(...parentNodes(node.parentNode))
  return nodes
}

const nodes = parentNodes(document.querySelector('span'))
console.log(nodes)

后代节点集合

获取所有的后代元素 SPAN 的内容

  wgchen.blog.csdn.net
  
    博客
  



function getChildNodeByName(el, name) {
  const items = []
  Array.from(el.children).forEach(node => {
    if (node.tagName == name.toUpperCase()) items.push(node)
    items.push(...getChildNodeByName(node, name))
  })

  return items
}
const nodes = getChildNodeByName(document, 'span')
console.log(nodes)

标签关系

使用 childNodes 等获取的节点包括文本与注释，但这不是我们常用的，为此系统也提供了只操作元素的关系方法。

基础知识

下面是处理标签关系的常用 API

节点属性说明parentElement获取父元素children获取所有子元素childElementCount子标签元素的数量firstElementChild第一个子标签lastElementChild最后一个子标签previousElementSibling上一个兄弟标签nextElementSibling下一个兄弟标签contains返回布尔值，判断传入的节点是否为该节点的后代节点

以下实例展示怎样通过元素关系获取元素

  wgchen.blog.csdn.net
  博客
  



  const app = document.querySelector(`#app`)
  console.log(app.children) //所有子元素
  console.log(app.firstElementChild) //第一个子元素 div.wgchen
  console.log(app.lastElementChild) //最后一个子元素 div.ycc

  const houdunwang = document.querySelector('.willem')
  console.log(houdunwang.parentElement) //父元素 div#app

  console.log(houdunwang.previousElementSibling) //上一个兄弟元素 div.wgchen
  console.log(houdunwang.nextElementSibling) //下一个兄弟元素 div.ycc

html 标签的父节点是document，但父标签节点不存在。

  console.log(document.documentElement.parentNode === document) //true
  console.log(document.documentElement.parentElement) //null

按类名获取标签

下例是按 className 来获取标签

  
    wgchen.blog.csdn.net
    willem
    wgchen
  


function getTagByClassName(className, tag = document) {
  const items = []
  Array.from(tag.children).map(el => {
    if (el.className.includes(className)) items.push(el)
    items.push(...getTagByClassName(className, el))
  })
  return items
}

console.log(getTagByClassName('hd'))

  
    wgchen.blog.csdn.net
    willem
    wgchen
  


function getTagByClassName(className, tag = document) {
  const items = []
  Array.from(tag.children).map(el => {
    console.log(el);
    if (el.className.includes(className)) items.push(el)
    items.push(...getTagByClassName(className, el))
  })
  return items
}

console.log(getTagByClassName('hd'))

标签获取

系统提供了丰富的选择节点（NODE）的操作方法，下面我们来 一 一 说明。

getElementById 根据元素的 id 属性获取一个元素节点对象

使用 ID 选择是非常方便的选择具有ID值的节点元素，但注意ID应该是唯一的。

只能通过document对象上使用

wgchen.blog.csdn.net

  const node = document.getElementById('wgchen')
  console.dir(node)

getElementById 只能通过 document 访问，不能通过元素读取拥有ID的子元素，下面的操作将产生错误。

  wgchen.blog.csdn.net
  博客


  const app = document.getElementById('app')
  console.log(app);

  const node = app.getElementById('wgchen') //app.getElementById is not a function
  console.log(node)

下面自定义函数来支持批量按ID选择元素

wgchen.blog.csdn.net


function getByElementIds(ids) {
  return ids.map((id) => document.getElementById(id))
}

let nodes = getByElementIds(['wgchen', 'app'])
console.dir(nodes)

拥有 ID 的元素可做为 WINDOW 的属性进行访问

  wgchen.blog.csdn.net


  console.log(app.innerHTML)

如果声明了变量这种访问方式将无效，所以并不建议使用这种方式访问对象。

  wgchen.blog.csdn.net


  let app = 'wgchen'
  console.log(app.innerHTML) // undefined

getElementsByName 返回带有指定名称的对象的集合

使用 getElementByName 获取设置了 name 属性的元素，虽然在DIV等元素上同样有效，但一般用来对表单元素进行操作时使用。

• 返回 NodeList 节点列表对象
• NodeList 顺序为元素在文档中的顺序
• 需要在 document 对象上使用

wgchen.blog.csdn.net



  const div = document.getElementsByName('wgchen')
  console.dir(div)
  
  const input = document.getElementsByName('username')
  console.dir(input)

getElementsByTagName 用于按标签名获取元素

使用 getElementsByTagName 用于按标签名获取元素

• 返回 HTMLCollection 节点列表对象
• 是不区分大小的获取

wgchen.blog.csdn.net


  const divs = document.getElementsByTagName('div')
  console.dir(divs)

通配符

可以使用通配符 * 获取所有元素

  
  wgchen
  
  
  
  
  
  



wgchen.blog.csdn.net


  const nodes = document.getElementsByTagName('*')
  console.dir(nodes)

某个元素也可以使用通配置符 * 获取后代元素，下面获取 id为 wgchen 的所有后代元素。

  wgchen.blog.csdn.net
  博客



  const nodes = document.getElementsByTagName('*').namedItem('wgchen').getElementsByTagName('*')
  console.dir(nodes)

getElementsByClassName 按class样式属性值获取元素集合

设置多个值时顺序无关，指包含这些class属性的元素。

wgchen.blog.csdn.net
博客


  const nodes = document.getElementsByClassName('willem')
  console.log(nodes.length) //2

  //查找同时具有 willem 与 wgchen 两个class属性的元素
  const tags = document.body.getElementsByClassName('willem wgchen ')
  console.log(tags.length) //1

下面我们来自己开发一个与 getElementsByClassName 相同的功能函数

wgchen.blog.csdn.net
博客



function getByClassName(names) {
  //将用户参数转为数组，并过滤掉空值
  const classNames = names.split(/\s+/).filter(t => t)

  return Array.from(document.getElementsByTagName('*')).filter(tag => {
    // 提取标签的所有 class 值为数组
    return classNames.every(className => {
      const names = tag.className
        .toUpperCase()
        .split(/\s+/)
        .filter(t => t)

      //检索标签是否存在class
      return names.some(name => name == className.toUpperCase())
    })
  })
}

console.log(getByClassName('willem wgchen '))

样式选择器

在CSS中可以通过样式选择器修饰元素样式，在DOM操作中也可以使用这种方式查找元素。使用过jQuery库的朋友，应该对这种选择方式印象深刻。

使用 getElementsByTagName 等方式选择元素不够灵活，建议使用下面的样式选择器操作，更加方便灵活。

querySelectorAll 找出所有匹配的节点后，返回对应的元素节点数组

使用 querySelectorAll 根据CSS选择器获取 Nodelist 节点列表。

获取的NodeList节点列表是静态的，添加或删除元素后不变。

获取所有div元素

博客

  wgchen.blog.csdn.net
  willem.com



  const app = document.getElementById('app')
  const nodes = app.querySelectorAll('div')
  console.log(nodes.length) //2

获取 id 为 app 元素的，class 为 wgchen 的后代元素

博客

  wgchen.blog.csdn.net
  willem.com


  const nodes = document.querySelectorAll('#app .willem')
  console.log(nodes.length) //2

根据元素属性值获取元素集合

  wgchen.blog.csdn.net
  willem.com


  const nodes = document.querySelectorAll(`#app .willem[data='hd']`)
  console.log(nodes.length) //2

再来看一些通过样式选择器查找元素

  wgchen.blog.csdn.net
  willem.com
  博客



  //查找紧临兄弟元素
  console.log(document.querySelectorAll('.wgchen+div.willem'))

  //查找最后一个 div 子元素
  console.log(document.querySelector('#app div:last-of-type'))

  //查找第二个 div 元素
  console.log(document.querySelector('#app div:nth-of-type(2)').innerHTML)

querySelector 找到一个后立刻返回找到的第一个节点对象，如果没有则返回null

querySelector 使用CSS选择器获取一个元素，下面是根据属性获取单个元素。

  wgchen.blog.csdn.net
  博客


  const node = app.querySelector(`#app .wgchen[data='hd']`)
  console.log(node)

matches 用于检测元素是否是指定的样式选择器匹配

Element.matches() 如果元素被指定的选择器字符串选择，Element.matches() 方法返回true; 否则返回false。

用于检测元素是否是指定的样式选择器匹配，下面过滤掉所有name属性的 LI元素。

  wgchen
  博客
  wgchen.blog.csdn.net


  const nodes = [...document.querySelectorAll('li')].filter(node => {
    return !node.matches(`[name]`)
  })
  console.log(nodes)

closest

查找最近的符合选择器的祖先元素（包括自身），下例查找父级拥有 .comment类的元素。

  
    wgchen.blog.csdn.net
  



  const li = document.getElementsByTagName('li')[0]
  const node = li.closest(`.comment`)
  //结果为 ul.comment
  console.log(node)

HTMLCollection 与 NodeList 的区别

HTMLCollection 是 HTML 元素的集合。

NodeList 是一个文档节点的集合。

NodeList 与 HTMLCollection 有很多类似的地方。

NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素。

NodeList 与 HTMLCollection 都有 length 属性。

HTMLCollection 元素可以通过 name，id 或索引来获取。

NodeList 只能通过索引来获取。

只有 NodeList 对象有包含属性节点和文本节点。

DOM HTMLCollection

HTMLCollection 是 HTML 元素的集合。

HTMLCollection 对象类似一个包含 HTML 元素的数组列表。

getElementsByTagName() 方法返回的就是一个 HTMLCollection 对象。

标准属性

元素的标准属性具有相对应的DOM对象属性。

• 操作属性区分大小写
• 多个单词属性命名规则为第一个单词小写，其他单词大写
• 属性值是多类型并不全是字符串，也可能是对象等
• 事件处理程序属性值为函数
• style属性为CSSStyleDeclaration对象
• DOM对象不同生成的属性也不同

属性别名

有些属性名与JS关键词冲突，系统已经起了别名。

属性别名classclassNameforhtmlFor 操作属性

元素的标准属性可以直接进行操作，下面是直接设置元素的className。

  wgchen.blog.csdn.net
  博客


  const app = document.querySelector(`#app`)
  app.className = 'wgchen willem'

下面设置图像元素的标准属性

  let img = document.images[0]
  img.src = 'https://img-blog.csdnimg.cn/20190918140053667.png?x-oss-process=image/resize,m_fixed,h_224,w_224'
  img.alt = 'wgchen'

使用 hidden 隐藏元素

wgchen.blog.csdn.net

  const app = document.querySelector('#app')
  app.addEventListener('click', function () {
    this.hidden = true
  })

多类型

大部分属性值是都是字符串，但并不是全部，下例中需要转换为数值后进行数据运算。

  let input = document.getElementsByName('age').item(0)
  input.value = parseInt(input.value) + 100

下面表单 checked 属性值为 Boolean 类型

 热门 

  const node = document.querySelector(`[name='hot']`)
  node.addEventListener('change', function () {
    console.log(this.checked)
  })

属性值并都与HTML定义的值一样，下面返回的 href 属性值是完整链接

博客

  const node = document.querySelector(`#home`)
  console.log(node.href)

元素特征

对于标准的属性可以使用DOM属性的方式进行操作，但对于标签的非标准的定制属性则不可以。但JS提供了方法来控制标准或非标准的属性。

可以理解为元素的属性分两个地方保存，DOM属性中记录标准属性，特征中记录标准和定制属性。

• 使用特征操作时属性名称不区分大小写
• 特征值都为字符串类型

方法说明getAttribute获取属性setAttribute设置属性removeAttribute删除属性hasAttribute属性检测

特征是可迭代对象，下面使用 for...of 来进行遍历操作

wgchen.blog.csdn.net

  const app = document.querySelector('#app')
  for (const { name, value } of app.attributes) {
    console.log(name, value)
  }

属性值都为字符串，所以数值类型需要进行转换

  let input = document.getElementsByName('age').item(0)
  let value = input.getAttribute('value') * 1 + 100
  input.setAttribute('value', value)

使用 removeAttribute 删除元素的 class 属性，并通过 hasAttribute 进行检测删除结果。

wgchen.blog.csdn.net

  let willem = document.querySelector('.willem')
  willem.removeAttribute('class')
  console.log(willem.hasAttribute('class')) //false

特征值与HTML定义是一致的，这和属性值是不同的。

博客

  const node = document.querySelector(`#home`)
  
  // http://tt.cc/testData/test2.html#wgchen
  console.log(node.href)
  
  // #wgchen
  console.log(node.getAttribute('href'))

attributes

元素提供了attributes 属性可以只读的获取元素的属性

wgchen.blog.csdn.net

  let wgchen = document.querySelector('.wgchen')
  console.dir(wgchen.attributes['class'].nodeValue) //wgchen
  console.dir(wgchen.attributes['data-content'].nodeValue) //博客

自定义特征

虽然可以随意定义特征并使用 getAttribute 等方法管理，但很容易造成与标签的现在或未来属性重名。建议使用以data-为前缀的自定义特征处理，针对这种定义方式JS也提供了接口方便操作。

• 元素中以data-为前缀的属性会添加到属性集中
• 使用元素的 dataset 可获取属性集中的属性
• 改变 dataset 的值也会影响到元素上

下面演示使用属性集设置DIV标签内容

wgchen.blog.csdn.net


  let wgchen = document.querySelector('.wgchen')
  let content = wgchen.dataset.content
  console.log(content) //博客
  wgchen.innerHTML = `