JavaScript之DOM 操作_dom操作设计一张如下图的网页，当选择“待选名单”“一个或多个元素，点击移入，则将选中的名字从”待-CSDN博客

本文链接：https://blog.csdn.net/hxwm_8937/article/details/77337279

 
 DOM简介 

 
 HTML DOM （文档对象模型） 

 
 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 

 
 HTML DOM 模型被构造为对象的树。 

 
 HTML DOM 树 

 
 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。 

 
   （1）JavaScript 能够改变页面中的所有 HTML 元素 
  
   （2）JavaScript 能够改变页面中的所有 HTML 属性 
  
   （3）JavaScript 能够改变页面中的所有 CSS 样式 
  
   （4）JavaScript 能够对页面中的所有事件做出反应 
  
     元素的获取方法 
    
    getelement系列方法： 
   
    getElementById： 通过ID查找元素 
   
    getElementsByClassName：通过class查找元素 
   
    getElementsByName： 通过name查找元素 
   
    getElementsByTagName： 通过标签找元素 
   
    getElementById 
   
    通过ID查找元素， 
    只会返回一个匹配的元素 
   
    function change() { 
   
    document.getElementById 
    ("jereh").style.color = "red"; 
   
    } 
   
    getElementsByClassName 
   
    通过class查找元素，返回一个匹配的元素数组 
   
    function change2() { 
   
    var result = 
     document.getElementsByClassName 
    ("jredu"); 
   
    for (var i = 0;i < result.length;i++){ 
   
    result[i].style.fontSize = '40px'; 
   
    } 
   
    } 
   
    getElementsByName 
   
    通过name查找元素，返回一个匹配的元素数组 
   
    function change3() { 
   
    var result =  
    document.getElementsByNam 
    e("jredu"); 
   
    for (var i = 0;i < result.length;i++){ 
   
    result[i].style.fontWeight = '800px'; 
   
    } 
   
    } 
   
    getElementsByTagName 
   
    通过标签找元素，返回一个匹配的元素数组 
   
    function change4() { 
   
    var result =  
    document.getElementsByTagName 
    ("p"); 
   
    for (var i = 0;i < result.length;i++){ 
   
    result[i].style.fontWeight = '80px'; 
   
    } 
   
}
  
      JS对文档流的操作 
     
     document.write() 
    
     改变 HTML 输出流 
    
     JavaScript 能够创建动态的 HTML 内容： 
    
     在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。 
    
     <script> 
    
     var i = prompt("请输入一个字）; 
    
     document.wtite(i) 
     ; 
    
     </srcript> 
    
     innerHTML 
    
     改变 HTML 内容 
    
     修改 HTML 内容的最简单的方法时使用 innerHTML 属性。 
    
     <script> 
    
     var result = document.geteElementById("p1"); 
    
     result.innerHTML="new text" 
     ; 
    
     </script> 
    
     Attribute 
    
     改变 HTML 属性 
    
     如需改变 HTML 元素的属性，则使用 
     Attribute 
     语法 
    
     <body> 
    
     <img id="img" src="../../img/f3_Android1.png" alt=""> 
    
     <button οnclick="getUrl()"> 
     获取图片路径信息 
     </button> 
    
     <br> 
    
     <button οnclick="changeUrl()"> 
     改变图片 
     </button> 
    
     </body> 
    
     <script> 
    
     var img = document.getElementById("img"); 
    
     function getUrl() { 
    
     var src = img. 
     getAttribut 
     e 
     ("src");/*相对路径*/ 
    
     var src = img.src;/*绝对路径*/ 
    
     console.log(src); 
    
     } 
    
     function changeUrl() { 
    
     img. 
     setAttribute 
     ("src","../../img/f3_Android2.png"); 
    
     img.src = "../../img/f3_Android2.png"; 
    
     } 
    
     </script> 
    
       js对css的操作方法 
      
       改变HTML样式的三种方法： 
      
       1： 
       .style 
        逐个去给元素添加样式；速度慢 
      
       p.style.textAlign = "center"; 
      
       p.style.color = "red"; 
      
       p.dtyle.fontSize = "40px"; 
      
       <body> 
      
       <p id="school">青岛理工大学</p> 
      
       <button οnclick="change()">改变字体</button> 
      
       </body> 
      
       <script> 
      
       var p = document.getElementById("school"); 
      
       p.style.textAlign = "center"; 
      
       p.style.color = "red"; 
      
       p.dtyle.fontSize = "40px"; 
      
       </script> 
      
       2： 
       .className 
        直接给元素添加一个样式，速度快 
      
       前提是样式类已存在 
      
       元素已存在默认类的时候，再次添加样式类需要使用+="（空格）类名称 
      
       <style> 
      
       .p1{ 
      
       font-weight: bold; 
      
       margin-top: 50px; 
      
       } 
      
       .yut 
       { 
      
       text-align: center; 
      
       font-size: 30px; 
      
       color: red; 
      
       } 
      
       </style> 
      
       <body> 
      
       <p id="school"  
       class="p1" 
         
       style="margin-top: 100px;color: yellow;" 
       >青岛大学</p> 
      
       <button οnclick="change()">改变字体</button> 
      
       </body> 
      
       <script> 
      
       var p = document.getElementById("school"); 
      
       function change() { 
      
       document.getElementById("school").className = "yut"; 
      
       p 
       .className += 
       " 
         
       yut"; 
      
       </script> 
      
       3： 
       .cssText 
      
       用法与.className类似，但不需要其前提。 
      
       <body> 
      
       <p id="school"  
       style="margin-top: 100px;color: yellow;" 
       >青岛大学</p> 
      
       <button οnclick="change()">改变字体</button> 
      
       </body> 
      
       <script> 
      
       var p = document.getElementById("school"); 
      
       function change() { 
      
       p.style 
       .cssText 
        +=  
       " 
       ; 
       color:red;font-size:bold;text-align:center" 
      
       } 
      
       </script>