今天上来就讲了一下获取DOM元素的方法，和大家分享一些常用的和需要知道的。

DOM方法

查看大元素的方法

console.log(document.documentElement);
console.log(document.head);
console.log(document.body);

返回结果

这是都是获取的大元素，实用性不是特别强，了解即可。

万能选择器

const header = document.querySelector('.header');
const allSections = document.querySelectorAll('.section')
console.log(header);
console.log(allSections);

返回结果

这个选择器应该是我们平时获取元素最长用的了，他很灵活，.+类名可以获取类，#+id可以获取id，以此类推。

最常用的id选择器

const section = document.getElementById('section--1')
console.log(section);

返回结果

如果只是获取id的话，他可能必万能选择器更加适合。

标签选择器

const allButtons = document.getElementsByTagName('button')
console.log(allButtons);

返回结果

它可以获取HTML中所有对应的标签属性。

类选择器

const btn = document.getElementsByClassName('btn')
console.log(btn);

返回结果

它可以获取HTML中所有对应的标签属性。

创建一个DOM元素并获取

const header = document.querySelector('.header');
const message = document.createElement('div')
message.classList.add('cookie-message')
message.textContent = 'We use cookied for improved functionality and analytics'
message.innerHTML = '<button class="btn btn--closs-cookie-message">Got it!</button>'
header.prepend(message)
header.append(message)
header.before(message)
header.after(message)

返回结果

确实有一个盒子被添加进去了，createElement是创造一个标签元素的方法，classList.add是给标签元素添加类名，textContent是为一个标签元素添加文本消息。innerHTML是为一个标签元素添加里面的标签解构。 prepend是在目标位置最开始放置我们所创造的标签元素，append是在目标位置最后面放置我们所创造的标签元素。before和after，和前两者很类似，不过前者在目标位置内部，后者在外部。

删除一个DOM元素

header.remove()

返回结果

你不会真想看吧，都删了哪来的结果 φ(*￣0￣)

获取当前元素的样式

console.log(getComputedStyle(message).color);
console.log(getComputedStyle(message).height);

返回结果

运用getComputedStyle()可以轻松获取到。

为元素添加样式

message.style.backgroundColor = '#37383d'
message.style.width = '120%'

返回结果

元素.style.需要改变的样式，这种格式可以改变当前元素样式，但是需要注意，后面的样式必须用驼峰命名法，不能加"-"，不然会没作用。

总结

这些东西在我现在看来，实用性不是特别打，但是了解这些是有很大好处的。明天继续加油吧。

第十九天前端浅记录

DOM方法

总结