doucument

查找

这里要注意，TagName和ClassName都是数组，因为他们不是唯一的

let a=document.querySelector('#haha')
let a=document.querySelectorAll('.haha')
let a=document.querySelectorAll('p.haha')

可以看到query的作用范围更大点，写法也更方便点，尤其可以指定元素+class，查找更精确

改变

注意这里的element.class比较特殊，后面会讲到

setAttribute

let a=document.getElementById('demo')
    a.innerHTML='ixix'
a.setAttribute('class','a')  //就是设置class的value等于a

但是a.class=’a’就不行,因为class是一个object，不可以直接等于1个值
需要a.classList.add(‘a’)

删除增加元素

添加事件

事件有很多种

event事件

onclick

鼠标点击元素发生的时间，这是用的最多的event了

document.getElementById("myBtn").onclick = displayDate; //这里注意不能加括号，不然就还没点呢就直接执行了
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}

这里注意不能加括号，不然就还没点呢就直接执行了
但是如果我们把它放到html里就不一样了

function displayDate(i) {
    document.getElementById("demo").innerHTML =i;
}

<h1 class="one a" id="demo"></h1>
    <h2 id="haha" onclick="displayDate('xixxixix')">sxsx</h2>//我们就可以带参数运行了

onload and onunload

加载和离开页面事件
当用户进入或离开页面时触发 onload 和 onunload 事件。 onload 事件可用于检查访问者的浏览器类型和浏览器版本，并根据这些信息加载适当版本的网页。 onload 和 onunload 事件可用于处理 cookie。

onchange

onchange 事件通常与输入字段的验证结合使用。 以下是如何使用 onchange 的示例。当用户更改输入字段的内容时，将调用 upperCase() 函数。比如这里你输入了字母之后你按回车，小写字母就会自动编程大写了。
点击查看【codepen】

onmouseover and onmouseout

很简单就是鼠标经过，和鼠标离开

onmousedown, onmouseup and onclick

The onmousedown, onmouseup, and onclick events are all parts of a mouse-click. First when a mouse-button is clicked, the onmousedown event is triggered, then, when the mouse-button is released, the onmouseup event is triggered, finally, when the mouse-click is completed, the onclick event is triggered.

DOM事件监听器

document.getElementById("myBtn").addEventListener("click", displayDate);

addEventListener() 方法将事件处理程序附加到元素而不覆盖现有的事件处理程序。
您可以将多个事件处理程序添加到一个元素。
您可以将事件侦听器添加到任何 DOM 对象，而不仅仅是 HTML 元素。即窗口对象。
addEventListener() 方法可以更轻松地控制事件对冒泡的反应。
You can easily remove an event listener by using the removeEventListener() method.

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（如“click”或“mousedown”或任何其他 HTML DOM 事件。）
第二个参数是我们要在事件发生时调用的函数。
第三个参数是一个布尔值，指定是使用事件冒泡还是事件捕获。此参数是可选的。

window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = sometext;
});

DOM导航

我们用dom导航到任意一个我们想要到达的节点
使用 HTML DOM，节点树中的所有节点都可以通过 JavaScript 访问。 可以创建新节点，也可以修改或删除所有节点。

节点关系

节点树中的节点彼此之间具有层次关系。 术语父、子和兄弟用于描述关系。
在节点树中，顶部节点称为根（或根节点）
每个节点都只有一个父节点，除了根节点（没有父节点）
一个节点可以有多个子节点
兄弟姐妹（兄弟姐妹）是具有相同父节点的节点

From the HTML above you can read:

• is the root node
• has no parents
• is the parent of and
• is the first child of
• is the last child of

and:

• has one child: