JavaScript DOM [13 个练习和解决方案]

1.这是一个带有提交按钮的示例 html 文件。现在通过javascript代码修改段落文本的样式。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
    <style>
       
    </style>
</head>
<body>
   
    <p id="text">JavaScript Exercises</p>

    <button id="jsstyle" onclick="js_style()">Style</button>


    <script src="./script.js"></script>
</body>
</html>
复制代码
  function js_style(){
    // var aa=document.getElementById("text")
    console.log(text)
    text.style.fontSize="14pt";
    text.style.fontFamily="Comic Sans Ms";
    text.style.color="green"
  }

 

 

 

2.编写一个 JavaScript 函数来获取以下形式的 First name 和 Last name 的值。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
    <style>
       
    </style>
</head>
<body>
    <form action="#" id="form1" onsubmit="getFormvalue()">
        First name: <input type="text" name="fname" value="Davud"><br>
        kast name: <input type="text" name="lname" value="Beckham"><br>
        <input type="submit" value="Submit">
    </form>
    <script src="./script.js"></script>
</body>
</html>
复制代码
  function getFormvalue(){
    var x=document.getElementById("form1");
    for(var i=0; i<x.length;i++){
      if(x.elements[i].value!="Submit"){
        console.log(x.elements[i].value);
      }
    }
  }

 

 

3.编写一个 JavaScript 程序来设置段落的背景颜色

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
    <style>
       
    </style>
</head>
<body>

    <input type="button" value="Click to set paragraph background color" onclick="set_background()">
    <p>w3resource JavaScript Exercises</p>
    <p>w3resource PHP Exercises</p>
    <script src="./script.js"></script>
</body>
</html>
复制代码
复制代码
function set_background(){
  docBody=document.getElementsByTagName("body")[0];

  myBodyElements = docBody.getElementsByTagName("p");

  myp1=myBodyElements[0];
  console.log(myp1)
  myp1.style.background="rgb(255,26,120)"
  

  myp2=myBodyElements[1];
  myp2.style.background="rgb(255,255,0)"
}
复制代码

 

 

 

4.这是一个带有提交按钮的示例 html 文件。编写一个 JavaScript 函数来获取指定链接的 href、hreflang、rel、target 和 type 属性的值

 

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
    <style>
       
    </style>
</head>
<body>
    <p><a  id="w3r" type="text/html" hreflang="en-us" rel="nofollow" target="_self" href="https://www.w3resource.com/">w3resource</a> </p>
    <button onclick="getAttributes()">click here to get the attribute's value</button>


    <script src="./script.js"></script>
</body>
</html>
复制代码
复制代码
  function getAttributes(){
    var u = document.getElementById("w3r").href;
    alert("the value of attribute"+u);
    var t = document.getElementById("w3r").type;
    alert("the value of attribute"+t);
    var f = document.getElementById("w3r").hreflang;
    alert("the value of attribute"+f);
    var l = document.getElementById("w3r").rel;
    alert("the value of attribute"+l);
    var g = document.getElementById("w3r").target;
    alert("the value of attribute"+g);



  }
复制代码

 

 

5.编写一个 JavaScript 函数来向表中添加行。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
    <style>
       
    </style>
</head>
<body>
   
    <table id="sampleTable" border="1">
        <tr>
            <td>Row1 cell1</td>
            <td>Row1 cell2</td>
        </tr>
        <tr>
            <td>Row2 cell1</td>
            <td>Row2 cell2</td>
        </tr>
    </table>

    <input type="button" onclick="insert_Row()" value="insert">
    <script src="./script.js"></script>
</body>
</html>
复制代码
  function insert_Row(){
    var x=document.getElementById('sampleTable').insertRow(0)
    var y=x.insertCell(0);
    var z=x.insertCell(1);
    y.innerHTML="new cell1"
    z.innerHTML="new cell2"
  }

 

 

6.编写一个接受行、列（以标识特定单元格）和字符串来更新该单元格内容的 JavaScript 函数。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
    <style>
       
    </style>
</head>
<body>
   
    <table id="myTable" border="1">
        <tr>
            <td>Row1 cell1</td>
            <td>Row1 cell2</td>
        </tr>
        <tr>
            <td>Row2 cell1</td>
            <td>Row2 cell2</td>
        </tr>
        <tr>
            <td>Row3 cell1</td>
            <td>Row3 cell2</td>
        </tr>
    </table>

    <input type="button" onclick="changeContent()" value="changeContent">
    <script src="./script.js"></script>
</body>
</html>
复制代码
  function changeContent(){
    rn=window.prompt("Input the Row number(0,1,2)","0");
    cn=window.prompt("Input the Column number(0,1)","0");
    content=window.prompt("Input the Cell content");
    var x=document.getElementById('myTable').rows[parseInt(rn,10)].cells;
    x[parseInt(cn,10)].innerHTML=content;
  }

 

7.编写一个创建表格的JavaScript 函数，从用户那里接受行号、列号，并输入行-列号作为单元格的内容（例如Row-0 Column-0）

 

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
    <style>
       
    </style>
</head>
<body>
   
   <table id="myTable" border="1"></table>

    <form>
        <input type="button" onclick="createTable()" value="Create the table">
    </form>
    <script src="./script.js"></script>
</body>
</html>
复制代码
复制代码
  function createTable(){
    rn=window.prompt("Input number of rows",1);
    cn=window.prompt("Input number of columns",1);

    // console.log(typeof cn)
    for(var r=0; r<parseInt(rn,10);r++){
        var x=document.getElementById("myTable").insertRow(r);
        for(var c=0;c<parseInt(cn,10);c++){
          var y=x.insertCell(c);
          y.innerHTML="Row"+r+"column"+c
        }
    }


  }
复制代码

 

 

 

8.编写一个 JavaScript 程序从下拉列表中删除项目

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
    <style>
       
    </style>
</head>
<body>
   
  <form>
      <select id="colorSelect">
          <option>Red</option>
          <option>Green</option>
          <option>White</option>
          <option>Black</option>
      </select>
      <input type="button" onclick="removecolor()" value="select and remove">
  </form>
    <script src="./script.js"></script>
</body>
</html>
复制代码
  function removecolor(){
    var x=document.getElementById("colorSelect");
    // console.log(x.selectedIndex);
    x.remove(x.selectedIndex);
  }

 

 

10.编写一个 JavaScript 程序来计算球体的体积。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
    <style>
       
    </style>
</head>
<body>
    <p>Input radius value and get the volume of a sphere</p>
    <form action="" method="post" id="MyForm">
        <label for="radius">Radius</label>
        <input type="text" name="radius" id="radius" required>
        <label for="volume">volume</label>
        <input type="text" name="volune" id="volume" id="volume">

        <input type="submit" value="Calculate" id="submit">
    </form>
    <script src="./script.js"></script>
</body>
</html>
复制代码
复制代码
  function volume_sphere(){
    var colume;
    var radius=document.getElementById("radius").value;
    radius=Math.abs(radius);
    volume=(4/3) * Math.PI * Math.pow(radius,3);
    volume=volume.toFixed(4)
    document.getElementById("volume").value=volume;
    return false;
  }
  window.onload=document.getElementById("MyForm").onsubmit=volume_sphere;
复制代码

 

 

 

11.编写一个 JavaScript 程序来显示以下列表中的随机图像（单击按钮）。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
    <style>
       
    </style>
</head>
<body>
    <button id="jsstyle" onclick="display_random_image()">Show Image</button>
    <script src="./script.js"></script>
</body>
</html>
复制代码
复制代码
  function display_random_image(){
    var theImages=[{
      src: "http://farm4.staticflickr.com/3691/11268502654_f28f05966c_m.jpg",
        width: "240",
        height: "160"
    },
  {
    src: "http://farm1.staticflickr.com/33/45336904_1aef569b30_n.jpg",
    width: "320",
    height: "195"
  },
  {
    src: "http://farm6.staticflickr.com/5211/5384592886_80a512e2c9.jpg",
    width: "500",
    height: "343"
  }];

  var preBuffer=[];
  for(var i=0,j=theImages.length;i<j;i++){
    preBuffer[i]=new Image();
    preBuffer[i].src=theImages[i].src;
    preBuffer[i].width=theImages[i].width;
    preBuffer[i].height=theImages[i].height;
  }
  console.log(preBuffer)

    function getRandomInt(min,max){
      imn=Math.floor(Math.random()*(max-min+1))+min;
      return preBuffer[imn];
    }


    var newImage = getRandomInt(0,preBuffer.length - 1)


    var images = document.getElementsByTagName('img');
    var l = images.length;
    for(var p =0; p<l;p++){
      images[0].parentNode.removeChild(images[0])
    }

    document.body.appendChild(newImage)
  }
复制代码

 

 

12.编写一个 JavaScript 程序，在鼠标悬停在某个链接上时突出显示下一段的粗体字。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
    <style>
       
    </style>
</head>
<body>

    <p>[<a href="#" onmouseover="highlight()" onmouseout="return_normal()">On mouse over here bold words of the following paragraph will be highlighted</a>]</p>
    <p><strong>We</strong> have just started <strong>this</strong> section for the users (<strong>beginner</strong> to intermediate) who <strong>want</strong> to work with <strong>various</strong> JavaScript <strong>problems</strong> and write scripts online to <strong>test</strong> their JavaScript <strong>skill</strong>.</p>

    <script src="./script.js"></script>
</body>
</html>
复制代码
复制代码
var bold_items;
window.onload=getBold_items();

function getBold_items(){
  bold_items=document.getElementsByTagName('strong');
}


function highlight(){
  for(var i =0;i<bold_items.length;i++){
    bold_items[i].style.color="green";
  }
}

function return_normal(){
  for(var i=0;i<bold_items.length;i++){
    bold_items[i].style.color="black";
  }
}
复制代码

 

 

 

 

 

13.编写一个 JavaScript 程序来获取窗口的宽度和高度（任何时候调整窗口大小）

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
    <style>
       
    </style>
</head>
<body onload="getSize()" onresize="getSize()">
    <div id="wh"></div>
    <script src="./script.js"></script>
</body>
</html>
复制代码
  function getSize(){
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;

    document.getElementById('wh').innerHTML="<h1>width:"+w+"<br>"+h+"</h1>"
  }

 

posted @   漫漫长路</>  阅读(58)  评论(0)  编辑  收藏  举报
相关博文：
·  JavaScript DOM 示例
·  JavaScript HTML DOM 事件示例
·  JavaScript_DOM小练习
·  6.JavaScript HTML DOM和事件
·  JavaScript_dom小练习
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
SQL AI 助手