DOM（document、api、事件）

对标签进行增删改查操作或修改css，借助js实现动态页面

基本操作：

1、doucument对象：（DOM的核心，基本上大多数DOM API由该对象提供)

基础api：

• 获取body标签
• 获取html标签
• 获取页面上的标题
• 获取页面上地址
• 获取页面上的所有图片
• 获取页面上所有表单

• 1、获取body标签
  var body = document.body;
  2、获取html标签
  var html =document.documentElement;
  3、获取页面上的标题
  var title=document.title;
  4、获取页面地址
  var url =document.URL;
  5、获取页面上的所有图片
  var imgs=document.images;
  6、获取页面上的所有表单
  var forms=documet.forms;

2、获取修改html元素的内容/属性

        内容：

•         value属性

• 1、先获取html标签
  var 标签变量名=document.querySelector（'input'）；
  2、获取HTML内容
  标签变量名.value;
  
  3、修改
  标签变量名.value=新内容；
  eg:
  获取input标签内容
  var input =document.querySelector("demo"); // 有个demo的id标签
  获取内容
  var text =input.value;
  console.log(text);
  

• innerText（获取标签内容，一般针对于双标签）

• 1、先获取html标签
  var 标签变量名 =document.querySelector("#box p");
  2、获取html标签的内容
  标签变量名.innerText;
  3、修改
  标签变量名.innerText=新内容；

• innerHTML(获取标签里的html代码，一般针对于双标签）

• 1、先获取html标签
  var 标签变量名 =document.querySelector("#box p");
  2、获取html标签的内容
  标签变量名.innerHTML;
  3、修改
  标签变量名.innerHTML=新内容；

• innerHTML、innerText、value区别

        1、innerHTML和innerText都是针对双标签

        2、innerHTML是改变的标签内部的HTML代码，而innerText改变的是标签内部的文本

        3、value针对带有value属性的标签，比如input

获取html标签（querySid、class、标签名、elector/querySelectorAll）

• 通过id：

var 变量名=document.getElementBiId("标签的id属性值");

• 通过class(获取的是一个数组）

• var 变量名=document.getElementsByClassNanme("标签的class属性值");
  
  eg:
  var elems=document.getElementsByClassNmae("btn");
  获取第一个标签：elems[0];
  获取第二个标签：elems[1];
  获取最后个标签：elems[elems.length-1];

• 通过标签名（获取的是一个数组）

• var 变量名=document.getElementsByTagNanme("标签名");
  
  eg:获取页面所有的div
  var divs=document.getElementsByTagNmae("div");

• 通过querSelector/querySelectorAll(匹配一个html标签/所有html标签）：通过css选择器查找标签(querySecectorAll返回是一个数组）

• var 变量名=document.querySelector("标签的class选择器");
  
  eg:获取id为box下的第一个p标签
  var ps=document.querySelector("#box p");
  获取所有p标签
  var pss=document.querSelectorAll("#box p");

事件

事件三要素：

1、事件源（被触发的对象）

2、事件类型（如何触发）

3、事件处理程序（函数赋值方式运行）

执行事件步骤：

1、获取事件源

2、注册事件（绑定事件）

3、添加事件处理程序（采取函数赋值方式）

点击事件：(onclick)

当用户点击某个按钮的时候，执行指定的js代码

1、在标签上书写onclick="js代码";所有标签都可以添加
<div onclick ='alert(123)'>点击我</div>

eg：<button onclick="demo()">登录</button>//html代码
    function demo() {       //js代码
    console.log("被点击了");
}

2、在js中书写代码
标签变量名.onclick=function() {
当该标签被点击时要执行的代码 
}

eg：<button id="reg-btn">登录</button>//html代码
var button =document.querySelector('#reg-btn');//js代码
button.onclick =function() {
console.log('button被点击了');
}

属性（自定义)

获取（标签属性）：

1、先获取标签
标签变量名.getAttribute("属性名");

eg:
<img src="img/id1.jpg" id="img">

js:
var img=document.querySelector("#img");
var src =img.getAttribute("src");
document.write(src);//输出img/id1.jpg

设置（修改属性）： 先获取再设置

标签变量名：setAttribute("属性名"，“属性值");


eg:修改地址为img/id2.jpg
<img src="img/id1.jpg" id="img">
js:
var img=document.querySelector("#img");
img.setAttribute("src","img/id2.jpg");

移除属性：removeAttribute

eg：div.removeAttribute("id");

 添加或删除HTML元素(节点）

节点：元素节点1  属性节点2  文本节点3

添加：

api:

document.parentNode (获取父级标签）

document.childNodes(获取自己所有子元素和节点）

documen.children(获取自己所有子元素和节点）  常用

document.firestChild(获取第一个子节点）ie兼容问题

document.lastchild(获取最后一个子节点）ie兼容问题

 获取兄弟标签：

标签.perviousElementSibling：上一个兄弟标签

标签.nextElementSibling:下一个兄弟标签

标签变量名.nextElementSibling;
标签变量名.previousElmentSibling;

eg:
html:
 <div>
        <button onclick="sub(this)">-</button>
        年龄：<input type="text" value="1" id="demo1"/>
        <button onclick="add(this)">+</button>
    </div>
    <div>
        <button onclick="sub(this)">-</button>
        年龄：<input type="text" value="1" id="demo2"/>
        <button onclick="add(this)">+</button>
    </div>
js:
 // 减少
        function sub(aa) {
            var input =aa.nextElementSibling;
                input.value--;
        }
        // 增加
        function add(bb) {
            var input =bb.previousElementSibling;
            input.value++;
        }

创建节点：（动态创建元素节点）

document.createElement（创建标签）

var 变量名 =document.createElement("标签名");
var newDiv =document.createElement("div");//添加一个div标签

父标签.appendChild（添加标签）：讲某个标签追加到页面中，作为父标签的最后一个子标签，保证父标签的页面上已存在标签 （先创建后添加） 后面添加

父标签.insertBefore（新标签名，指定元素-兄弟标签）:将某个标签追加到页面上，并作为其父标签的子标签并放在指定兄弟标签之前（先创建后添加） 前面添加

父标签变量名.appendChild(新标签变量名）；
eg：把新建的div标签作为body的最后一个子标签放在页面上
var newDiv =document.createElement（"div");
document.body.appendChild(newDiv);

父标签变量名.insertBfore（新标签变量名，兄弟标签变量名）；

eg:将新建的p标签放入id为box的div标签中，作为其第一个子标签

<div id="box">
<p>这是第一个子标签</p>
</div>
js:
var newp =document.createElement("p");
newP.innerText = "我才是第一个p标签";
var father = document.querySelector("#box");
var brother=document.querySelector("#box p");
father.insertBefore(newP,brother);

删除：

api：

父节点.removeChild()//先获取待删除的标签，再执行删除

父标签名.removeChild(待删除的子标签）；

eg：删除div里面的标签
<div id="box">
<p>这是一个div</p>
</div>
js:
var father=document.querySelector("#box");
var p=querSelector("#box p");
father.removeChild(p);

批量删除：1、获取所有待删除的标签

                   2、对待删除的进行for遍历，依次调用删除

复制节点

父标签.cloneNode()  括号里面是空或者是false是浅拷贝 只复制标签不复制内容

var ul=document.querySelector("ul");
括号里面是空或者是false是浅拷贝 只复制标签不复制内容
括号里面是空或者是true是深拷贝 复制标签和复制内容
var lili=ul.children[0].cloneNode(true);
ul.appendchild(lili);

修改css

获取css样式：getComputedStyle（js内置函数，能够获取某个标签的所有最终使用样式）

getComputedStyle（标签名，null）；
eg：获取div所使用的with，height
html：
<div id="box"></div>

js；
var div=document.querySelector("#box");
//获取所有样式
var style=getComputedStyle(div,null);
//获取width，和height
console.log(style.width,style.height);

该函数会返回一个对象，需要我们定义变量接收后使用。该对象包含了该标签的所有样式，可以通过对象变量名，css属性来获取某个css属性

设置：标签变量名.style.css属性名=css属性值

eg：改变背景颜色为红色
<div></div>
js:
var div=documnet.querySelector("div");
div.style.backgroundColor="red";

注： js会将设置的css样式作为嵌入样式放在标签的style属性中，这样可以保证css样式优先级最高