DOM树——快速入门

DOM树——文本对象模型

由浏览器解析文档，生成树状图来查看网页结构！——查看HTML结构！DOC树!

可以来调试和查看整个网页的每一项，检查bug

Google的HTML tree Generator，很快速的帮助你了解这个HTML的结构！配合上F12开发者工具！快速查看别人网页结构！或者是自己网页找BUG！找每一项的ID！方便写CSS

Console来执行，和调试代码！

document;

执行后，可以直接复制别人的网页，这是JS中三大对象之一！JS操作DOM对象来操作网页显示！

选择-选中后网页部分会高亮！

通过document对象查找和选择！

一、Get查找

1. document.getElementsByTagName("body");

执行后，第一行显示HTMLCollection [body]，这个是body的数组！

2. document.getElementsByTagName("body")[0];

使用数组形式读取第一个元素，就可以调出第一个body！

现在HTML可以搞定了，怎么去搞定CSS和JS呢！

3. document.getElementsByTagName("li").length;

查看长度，也就是有几个li。

查看有多少方式！

4. document.getElementsByClassName(“”);

通过类名来查找！可以查看同类名有没有重复的呀！

还可以用document.querySelector

二、Query查找，更精准！

1. document.querySelector("li");

从上到下查找，返回第一个符合的ID、style类等！

查找类：document.querySelector(“.box1 h1”);用类选择器

2. document.querySelectorAll("");

查找所有；但是会出现很多无相关的信息，反而选择起来麻烦！

3. document.querySelectorAll("#button-bottom");

查找ID：用类选择器

在ID里面查找类名：document.querySelectorAll(“#boxidniu .box1 h1”);先用ID选则，再类选择！

页面中调整CSS

可以看到选中的h1，可以改动的style有很多，能改的都显示出来了！

1. document.querySelector("h1").style.color="red";

就把h1的颜色css改为红色！

知识点1：在JS中，CSSstyle样式命令是驼峰命名法。

知识点2：如果想快速选择一个类、ID，那么在JS中，可以把这个ID、类等选择器直接用变量命名，再使用变量访问时，就能查到到对应的类、ID，极大方便console里面去查找调整！

在Elements-Style中可以实时调整页面中选中的tag！各种CSS，随时调整，随时改！

修改class类名

在CSS的style中，给其中一个class赋予属性，然后再到HTLM中加类！通过console完成！

一、找类

document.querySelector("div").classList;

找类！(“”)括号中可以是tag的名字！h1、p、div、list、table、bottom、a、ul、ol、li!

二、改类

1. document.querySelector("h1").classList.add("wahaha");

加类名，找.cassList.add(“”),括号里面就可以加上自己已有的类名字！

2. document.querySelector("h1").classList.remove("wahaha");

移除类名！

用taggle快速加和减！执行一次是加，再执行一次是减！

3. document.querySelector("h1").classList.toggle("wahaha");

用按钮去执行这个命令！

document.querySelector("button").addEventListener("click",function(){

document.querySelector("h1").classList.toggle("wahaha");});

addEventListener让button监听事件，有很多【事件】可以调用！“事件”，function（）执行的命令！当事件被监听到时，就执行这个函数！

修改文本内容

1. document.querySelector("h1").innerHTML="GoodBye";

innerHTML修改文本

2. document.querySelector("h1").innerText="Hello";

找到要改的文本，赋值！innerHTML，.innerText都可以！

3. document.querySelector("h1").innerHTML="<em>Hello</em>";

用强调文本

4. document.querySelector("h1").textContent="Google";

text修改文本！

修改属性

也就是opening tag里加的属性！

1. document.querySelector("h1").attributes;

可以找出有哪几个属性！

2. document.querySelector("h1").attributes.class.value;

在属性中，可以找到class的类名

3. document.querySelector("h1").attributes.class.value="box2";

在属性中，可以直接赋值，修改类名！

4. document.querySelector("h1").setAttribute("class","wahaha");

设置属性，setAttribute(“”,””);第一个里面选则属性，比如ID、class等，第二个就是设置的内容！我这里就是把h1，的属性中，把类名设置为wahaha。