DOM相关知识

DOM操作，可以简单理解成“元素操作”。
我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法进行相关操作。
1、节点类型(DOM常见的三种节点类型)

节点类型	node Type值
元素节点	1
属性节点	2
文本节点	3

2、获取元素

getElementById(“id名”)	通过id来选中元素
getElemenstByTagName(“标签名”)	通过标签名选中元素 类数组
getElementByClassName(“类名”)	通过class来选中元素
getElementsByClass(“name名”)	用于表单元素 一般只用于单选按钮和和复选框
querySelector(“选择器”)	选取满足条件的第一个
querySelectorAll(“选择器”)	选取满足条件的所有元素 类数组

    <!-- getElementById() -->
    <div id="div1">JS</div>
    <script>
       let div1=document.getElementById('div1');
            div1.style.color="red";
    </script>
    <!-- getElemntByTagName() -->
      <p>JS</p>
       <script>
      let p=document.getElementsByTagName('p')[0];
      p.style.fontSize="20px";
       </script>


      <!-- getElemntByClassName() -->
      <ul id="list">
          <li>HTML</li>
          <li class="select">CSS</li>
          <li class="select">JS</li>
          <li>JQ</li>
      </ul>
   <script>
       let list=document.getElementById('list');
       let select=list.getElementsByClassName('select');
      for(var i=0;i<select.length;i++){
        select[i].style.color="yellow";
      }
     
   </script>

<!-- querySelector()和querySelectorAll() -->

<div>1</div>
<div>2</div>
<div class="test">3</div>
<div class="test">4</div>
<div>5</div>

<script>
let div2=document.querySelectorAll('.test');
for(let i=0;i<div2.length;i++){
    div2[i].style.color="skyblue";
}
// querySelector()
let div3=document.querySelector("div:nth-last-of-type(1)");
div3.style.color="green";
</script>

3、如何创建元素

创建元素
用creatElement()来创建一个元素节点 用creatTextNode()创建文本节点
<script>
let el=document.createElement("元素名");    //创建元素节点
let txt=document.createTextNode("文本内容");  //创建文本节点
el.appendChild(txt);    //把文本节点插入到元素中
e2.appendChild(el);    // 把组装好的元素插入到已经存在的元素中
</script>

<div>

</div>

<input type="text">
<input type="button" value="提交" onclick="jz()">
<script>
// 获取div元素节点
let div=document.querySelector('div');
div.style.width="200px";
div.style.height="100px";
div.style.border="1px solid red";
div.style.marginBottom="30px";
// 获取文本的内容
let input=document.querySelectorAll('input')[0];

// 当按钮按下去时
function jz(){
    // 获取输入的值
let inputnum=input.value;

// 创建元素
let p=document.createElement('p');
let pt=document.createTextNode(inputnum);
p.appendChild(pt);
div.appendChild(p);
// 当按钮按下去后 文本框的值 只能一次有效
input.value=" ";
div.style.overflowX="auto";
}
</script>

4、插入元素

/* 插入元素
appendChild()是把一个新元素插入到父元素的内部子元素的末尾
书写格式：A.appendChild(B);
A表示父元素 B代表动态创建好的新元素*/
<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<input type="text">
<input type="button" value="提交" onclick="on()">
<script>
let list1=document.getElementById('list');
let input=document.querySelectorAll('input')[0];
function on(){
    // 创建一个li
    let li=document.createElement('li');
    let lit=document.createTextNode(input.value);
    li.appendChild(lit);
    list1.appendChild(li);
}
</script>

/* 插入元素
inserBefore()是把一个新元素插入到父元素中的某一个子元素之前
书写格式：A.inserBefore(B,ref);
A表示父元素 B表示新子元素 ref指定子元素
*/
<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<input type="text">
<input type="button" value="提交" onclick="on()">
<script>
let list1=document.getElementById('list');
let input=document.querySelectorAll('input')[0];
function on(){
    // 创建一个li
    let li=document.createElement('li');
    let lit=document.createTextNode(input.value);
    li.appendChild(lit);
    list1.insertBefore(li,list1.firstElementChild);
}
</script>

5、删除元素

/* 插入元素
removeChild()方法来删除父元素下的某个子元素  firstElementChild(第一个)  lastElementChild(最后第一个)    
书写格式：A.removeChild(B)
A表示父元素 B表示父元素中的某个子元素*/
<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<input type="button" value="删除" onclick="on()">
<script>
let list=document.getElementById('list');
let input=document.getElementsByTagName('input')[0];
function on(){
list.removeChild(list.lastElementChild);
}
 //删除整个列表  document.body.removeChild(list); 
</script>

5、复制(克隆)元素

<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<input type="button" value="复制" onclick="on()">
<script>
let list=document.getElementById('list');
let input=document.getElementsByTagName('input')[0];
let li=list.querySelector('li:nth-child(2)');
console.log(li);
function on(){
    /*
      clonNode()方法来实现复制元素
      obj.clonNode(bool);
      bool是一个布尔值
      1或true:表示复制元素以及复制该元素下的所有子元素
      0或false:表示仅仅复制元素本身，不复制该元素下的子元素
    */
   // list.appendChild(li.cloneNode(1)); 克隆一个CSS
     document.body.appendChild(list.cloneNode(1));//克隆整个列表
}
</script>

6、替换元素

<p>JavaScript</p>
<hr>
输入标签:<input id="tag" type="text">
<br/>
输入内容:<input id="txt" type="text">
<br/>
<input id="btn" type="button" value="替换">
<script>
/* 
replaceChild()方法来实现替换元素
A.replaceChild(new,old);
A表示父元素、new 表示新子元素、old表示旧子元素
*/
let btn=document.getElementById('btn');
btn.onclick=function(){
   let p=document.querySelector('p');
   let tag=document.getElementById('tag');
   let txt=document.getElementById('txt');
    // 创建新节点
let span=document.createElement('span');
let spant=document.createTextNode(txt.value);
span.appendChild(spant);
document.body.replaceChild(span,p);
// 清空输入内容
txt.value=" ";
}
</script>

    <!-- getAttribute获取元素的某个值 -->
    <input type="button" value="获取" id="btn">
<button data="JavaScript">插入</button>
<script>
let input=document.getElementsByTagName('input')[0];
input.onclick=function(){
   alert(input.getAttribute('id'));
}
let button=document.getElementsByTagName('button')[0];
button.onclick=function(){
  alert(button.getAttribute("data"));
}
</script> 

 <!-- setAttribute设置元素的某个值 有这个属性名就覆盖属性值 没有属性名或值 就添加 属性名和属性值 -->

     <button name="f76">我是按钮</button>
<script>
let button=document.querySelector('button');
  button.onclick=function(){
     button.setAttribute("name","zhangxu");
  }

</script> 

  <!-- removeAttibute() 删除某个属性-->

    <div class="main">
        未到结局，焉知生死。
    </div>
    <script>
        let div = document.getElementsByTagName('div')[0];
        div.onclick = function () {

            div.removeAttribute("class");

        }
    </script> 

  <style>
        .main {
            height: 100px;
            width: 100px;
            background-color: red;
        }
    </style>

<p>煎和熬都是变成美味的方法,加油也是</p>
<input type="button" value="添加样式" id="add">
<input type="button" value="修改样式" id="re">
<script>
let p=document.getElementsByTagName('p')[0];
let input=document.getElementById('add');
let input1=document.getElementById('re');
// 添加class
input.onclick=function(){
    p.className="main";
}
// 删除class
input1.onclick=function(){
    // p.removeAttribute('class'); 等同于p.className="";
    p.className="";
}
</script> 

  <style>
        .main {
            height: 100px;
            width: 100px;
            background-color: red;
        }
    </style>
<!-- hasAttribute() 用来判断元素是否含有某个属性 
书写格式：
        obj.hasAttribute("attr");
    这个方法会返回一个布尔值 包含该属性就返回true 反则就放回false
-->
 <p class="main">煎和熬都是变成美味的方法,加油也是</p>
<input type="button" value="添加样式" id="add">
<input type="button" value="修改样式" id="re">
<script>
let p=document.getElementsByTagName('p')[0];
if(p.hasAttribute("class")){
    alert('存在！！！');
}
else{
    alert('不存在!!!');
}
</script>