看程序学js-5 DOM

最新推荐文章于 2024-08-02 08:30:00 发布

涂家豪

最新推荐文章于 2024-08-02 08:30:00 发布

阅读量153

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/tujiahao1/article/details/92837944

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、节点的概念

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  function p(s){
    document.write(s);
    document.write("<br>");
  }
  var  div1 = document.getElementById("d1");
  p("文档节点"+document);
  p("元素"+div1);
  p("属性节点"+div1.attributes[0]);
  p("内容节点"+div1.childNodes[0]);
</script>
</body>
</html>

2、获取节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">hello HTML DOM</div>
<script>
  var  div1 = document.getElementById("d1");
  document.write(div1);
</script>

<div >hello javascript</div>
<div >hello BOM</div>
<div >hello DOM</div>
<br>
<script>
  var  divs = document.getElementsByTagName("div");

  for(i=0;i<divs.length;i++){
    document.write(divs[i]);
    document.write("<br>");
  }

</script>

<h1  class="d" >hello javascript</h1>
<h2  class="d" >hello BOM</h2>
<div  class="d" >hello DOM</div>
<br>
<script>
  var  elements= document.getElementsByClassName("d");

  for(i=0;i<elements.length;i++){
    document.write(elements[i]);
    document.write("<br>");
  }

</script>

用户名 <input name="userName"> <br>
密码  <input name="userPassword">
<br>
<script>
  var  elements= document.getElementsByName("userName");

  for(i=0;i<elements.length;i++){
    document.write(elements[i]);
    document.write("<br>");
  }

</script>

<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
  var  div1 = document.getElementById("d1");
  var as = div1.attributes;
  document.write("div总共有"+as.length +" 个属性");
  document.write("分别是:");
  for(i = 0; i< as.length; i++){
    document.write("<br>");
    document.write(as[i].nodeName);
    document.write(":");
    document.write(as[i].nodeValue);
  }
  document.write("<br>");
  document.write("div的id属性值是："+ as["id"].nodeValue);

</script>

<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
  var  div1 = document.getElementById("d1");
  var content = div1.childNodes[0];
  document.write("div的内容节点名是:"+content.nodeName);
  document.write("<br>");
  document.write("div的内容节点值是:"+content.nodeValue);

</script>
</body>
</html>

3、节点的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">hello HTML DOM</div>
<script>
  function p(s){
    document.write(s);
    document.write("<br>");
  }
  var  div1 = document.getElementById("d1");
  p("document的节点名称:"+document.nodeName);
  p("div元素节点的节点名称:"+div1.nodeName);
  p("div下属性节点的节点名称:"+div1.attributes[0].nodeName);
  p("div下内容节点的节点名称:"+div1.childNodes[0].nodeName);
</script>

<script>
  function p(s){
    document.write(s);
    document.write("<br>");
  }
  var  div1 = document.getElementById("d1");
  p("document是没有nodeValue的："+document.nodeValue);
  p("元素节点是没有nodeValue的："+div1.nodeValue);
  p("属性节点id的nodeValue："+div1.attributes[0].nodeValue);
  p("内容节点的nodeValue："+div1.childNodes[0].nodeValue);
</script>

<script>
  function p(s){
    document.write(s);
    document.write("<br>");
  }
  var  div1 = document.getElementById("d1");
  p("document的nodeType是："+document.nodeType);
  p("元素节点的nodeType是："+div1.nodeType);
  p("属性节点的nodeType是："+div1.attributes[0].nodeType);
  p("内容节点的nodeType是："+div1.childNodes[0].nodeType);
</script>

<script>

  function changeDiv1(){
    document.getElementById("d1").childNodes[0].nodeValue= "通过childNode[0].value改变内容";
  }
  function changeDiv2(){
    document.getElementById("d1").innerHTML= "通过innerHTML改变内容";
  }
</script>

<button onclick="changeDiv1()">通过内容节点方式改变div的内容</button>
<button onclick="changeDiv2()">通过innerHTML改变div的内容</button>

<script>

  function get(){

    var input1 = document.getElementById("input1");
    var s = "id="+input1.id + "<br>";
    s += "value="+input1.value + "<br>";
    s += "class="+input1.className + "<br>";
    s += "test="+input1.getAttribute("test")+ "<br>";
    s += "test="+input1.attributes["test"].nodeValue+ "<br>";

    document.getElementById("d1").innerHTML= s;
  }
</script>

<input id="input1" class="class1 class2" test="t1" value="这是一个输入框">
<br>
<button onclick="get()">获取input的属性</button>

<div style="height:30px"></div>

<script>
  function check(){
    var name = document.getElementById("name").value;
    var noMessage= document.getElementById("noMessage");
    var yesMessage= document.getElementById("yesMessage");
    noMessage.style.display="none";
    yesMessage.style.display="none";
    if(0!=name.length){
      var firstChar = name.charAt(0);
      if('a'==firstChar || 'A'==firstChar)
        noMessage.style.display="inline";
      else
        yesMessage.style.display="inline";
    }
  }
</script>

<input id="name">

<input type="button" value="验证" onclick="check()">
<span id="noMessage" style="color:red;display:none;">账号已经存在</span>
<span id="yesMessage" style="color:green;display:none;">账号可以使用</span>
</body>
</html>

4、DOM样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="hide()">隐藏div</button>

<button onclick="show()">显示div</button>

<br>
<br>

<div id="d">

  这是一个div

</div>

<script>
  function hide(){
    var d = document.getElementById("d");
    d.style.display="none";
  }

  function show(){
    var d = document.getElementById("d");
    d.style.display="block";
  }

</script>

<div id="d1" style="background-color:pink">Hello HTML DOM</div>

<button onclick="change()">改变div的背景色</button>

<script>
  function change(){
    var d1 = document.getElementById("d1");
    d1.style.backgroundColor="green";
  }
</script>

<style>
  table{
    border-collapse:collapse;
    width:90%;
  }
  tr{
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: lightgray;
    height:35px;
  }

  td{
    width:25%;
    text-align:center;
  }

</style>
<table id="t">
  <tr >
    <td>id</td>
    <td>名称</td>
    <td>血量</td>
    <td>伤害</td>
  </tr>
  <tr >
    <td>1</td>
    <td>gareen</td>
    <td>340</td>
    <td>58</td>
  </tr>
  <tr >
    <td>2</td>
    <td>teemo</td>
    <td>320</td>
    <td>76</td>
  </tr>
  <tr >
    <td>3</td>
    <td>annie</td>
    <td>380</td>
    <td>38</td>
  </tr>
  <tr >
    <td>4</td>
    <td>deadbrother</td>
    <td>400</td>
    <td>90</td>
  </tr>
</table>

<script>
  var trs = document.getElementsByTagName("tr");
  for(i=0;i<trs.length;i++){
    if(1==i%2)
      trs[i].style.backgroundColor='#f8f8f8';
  }
</script>
</body>
</html>

5、DOM事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" onfocus="f()" onblur="b()" id="input1" placeHolder="输入框1" >
<br>
<br>
<input type="text" id="input2" placeHolder="输入框2">
<br>
<br>
<div id="message"></div>

<script>
  function f(){
    document.getElementById("message").innerHTML="输入框1获取了焦点";
  }

  function b(){
    document.getElementById("message").innerHTML="输入框1丢失了焦点";
  }

</script>

<input type="button" onmousedown="down()" onmouseup="up()" value="用于演示按下和弹起" >
<br>
<br>

<input type="button" onmousemove="move()"  value="用于演示鼠标经过" >
<br>
<br>

<input type="button" onmouseover="over()" value="用于演示鼠标进入" >
<br>
<br>

<input type="button" onmouseout="out()" value="用于演示鼠标退出" >

<br>
<br>
<div id="message"></div>

<script>
  var number = 0;

  function down(){
    document.getElementById("message").innerHTML="按下了鼠标";
  }

  function up(){
    document.getElementById("message").innerHTML="弹起了鼠标";
  }

  function move(){
    document.getElementById("message").innerHTML="鼠标经过次数:"+(++number);
  }

  function over(){
    document.getElementById("message").innerHTML="鼠标进入次数:"+(++number);
  }

  function out(){
    document.getElementById("message").innerHTML="鼠标退出";
    number = 0;
  }

</script>

“记得要先用鼠标选中该组件，然后敲击键盘”
<br>
<input type="button" onkeydown="down(event)" value="用于演示按下keydown" >
<br>
<br>

<input type="button" onkeypress="press(event)" value="用于演示按下keypress" >
<br>
<br>

<input type="button" onkeyup="up()" value="用于演示弹起" >
<br>
<br>

<div id="message">

</div>

<script>
  var number =0;
  function down(e){

    var text = "按下了键" + e.keyCode;
    if(e.shiftKey==1)
      text += " 并且按下了shift键";

    document.getElementById("message").innerHTML=text ;
  }

  function up(){
    document.getElementById("message").innerHTML="弹起了键盘";
  }

  function press(e){
    var text = "按下了键" + e.keyCode;
    if(e.shiftKey==1)
      text += " 并且按下了shift键";

    document.getElementById("message").innerHTML=text ;
  }

</script>

<input type="button" onclick="singleClick()" ondblclick="doubleClick()"  value="用于演示单击和双击" >

<br>
<br>
<div id="message"></div>

<script>
  function singleClick(){
    document.getElementById("message").innerHTML="单击按钮";
  }

  function doubleClick(){

    document.getElementById("message").innerHTML="双击按钮";
  }
</script>

<input type="text" id="t1" onchange="change()"  value="" >

<br>
<br>
<input type="button" value="令输入框失去焦点的按钮" >
<br>
<br>
<div id="message"></div>

<script>
  function change(){
    var message = document.getElementById("message");
    var t1 = document.getElementById("t1");
    message.innerHTML = "输入框的值变为了: "+ t1.value;
  }

</script>

<form action="/study/login.jsp" onsubmit="login()">
  账号：<input type="text" name="name"> <br/>
  密码：<input type="password" name="password" > <br/>
  <input type="submit" value="登录">
</form>

<script>
  function login(){
    alert("提交表单");
  }
</script>

<script>
  function loadBody(){
    document.getElementById("message1").innerHTML="文档加载成功";
  }
  function loadImg(){
    document.getElementById("message2").innerHTML="图片加载成功";
  }

</script>

<body onload="loadBody()">
<div id="message1"></div>
<div id="message2"></div>
</body>

<img onload="loadImg()" src="http://how2j.cn/example.gif"/>

<input type="button" onclick="singleClick(this)" value="演示this的按钮1" >
<input type="button" onclick="singleClick(this)" value="演示this的按钮2" >

<br>
<br>
<div id="message"></div>

<script>
  function singleClick(button){
    var s = "被点击的按钮上的文本是: "+button.value;
    document.getElementById("message").innerHTML=s;
  }

</script>

<form method="post" action="/study/login.jsp" onsubmit="return login()">
  账号：<input id="name" type="text" name="name"> <br/>
  密码：<input type="password" name="password" > <br/>
  <input type="submit" value="登录">
</form>

<script>
  function login(){
    var name = document.getElementById("name");
    if(name.value.length==0){
      alert("用户名不能为空");
      return false;
    }
    return true;

  }
</script>

<style>
  a{
    font-size:14px;
    color: CornflowerBlue;
    text-decoration: none;
  }
  div.menu {
    width:80px;
    border: 1px solid lightgray;
    margin-top:15px;
    position: absolute;
    left: 80px;
    top: 20px;
  }
  div.menu a{
    display:block;
    font-size:14px;
    font-family:宋体;
    color: #888;
    text-decoration: none;
    padding:10 0 10 15;
  }

  div.menu a:hover
  {
    background-color: #f1f1f1;
  }

</style>

<a href="#nowhere"> 武器 </a>
<a href="#nowhere"> 护甲 </a>
<a href="#nowhere"> 英雄 </a>

<div class="menu">
  <a href="#nowhere"> 盖伦 </a>
  <a href="#nowhere"> 提莫 </a>
  <a href="#nowhere"> 安妮 </a>
  <a href="#nowhere"> 死哥 </a>
</div>

<div style="height:200px"></div>
</body>
</html>

6、节点关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="parentDiv">
  <div id="d1">第一个div</div>
  <div id="d2">第二个div</div>
  <div id="d3">第三个div</div>
</div>

<script>
  var node = null;
  function showParent(){
    if(null==node)
      node = document.getElementById("d1");

    if(document == node)
      alert("已是根节点:document");
    else{
      alert(node.parentNode);
      node = node.parentNode;
    }
  }
</script>

<div id="parentDiv">
  父Div的内容
  <div id="d1">第一个div</div>
  <div id="d2">第二个div</div>
  <div id="d3">第三个div</div></div>

<button onclick="showParent()">不断递归d1的父节点</button>

<script>

  function showPre(){
    var d2 = document.getElementById("d2");
    alert(d2.previousSibling.innerHTML);
  }

  function showNext(){
    var d2 = document.getElementById("d2");
    alert(d2.nextSibling.nodeName);
  }
</script>

<div id="parentDiv">
  父Div的内容
  <div id="d1">第一个div</div><div id="d2">第二个div</div>
  <div id="d3">第三个div</div></div>

<button onclick="showPre()">获取d2的前一个同胞</button>

<button onclick="showNext()">获取d2的后一个同胞</button>

<script>
  function showfirst(){
    var div = document.getElementById("parentDiv");
    alert(div.firstChild.nodeName);
  }

  function showlast(){
    var div = document.getElementById("parentDiv");
    alert(div.lastChild.nodeName);
  }

  function showall(){
    var div = document.getElementById("parentDiv");
    alert(div.childNodes.length);
  }
</script>

<div id="parentDiv">
  父Div的内容
  <div id="d1">第一个div</div>
  <div id="d2">第二个div</div>
  <div id="d3">第三个div</div></div>

<button onclick="showfirst()">第一个子节点</button>
<button onclick="showlast()">最后一个子节点</button>
<button onclick="showall()">所有子节点数量</button>

<div id="parentDiv">
  <div id="d1">第一个div</div>
  <div id="d2">第二个div</div>
  <div id="d3">第三个div</div></div>

<button onclick="showNumber1()">通过childNodes获取子节点总数</button>

<button onclick="showNumber2()">通过children()获取子节点总数</button>

<script>

  function showNumber1(){
    alert(document.getElementById("parentDiv").childNodes.length);
  }

  function showNumber2(){
    alert(document.getElementById("parentDiv").children.length);
  }

</script>
</body>
</html>

7、创建节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d">Hello HTML DOM</div>
<script>
  function add(){
    var hr=document.createElement("hr");
    var div1 = document.getElementById("d");
    div1.appendChild(hr);
  }
</script>

<button onclick="add()">在div中追加一个hr元素</button>

<div id="d">Hello HTML DOM</div>
<script>
  function add(){

    var p=document.createElement("p");
    var text = document.createTextNode("这是通过DOM创建出来的<p>");
    p.appendChild(text);

    var div1 = document.getElementById("d");
    div1.appendChild(p);

  }
</script>

<button onclick="add()">在div中追加一个p元素</button>

<div id="d">Hello HTML DOM<br></div>

<script>
  function add(){

    var a=document.createElement("a");
    var content = document.createTextNode("http://12306.com");
    a.appendChild(content);

    var href = document.createAttribute("href");
    href.nodeValue="http://12306.com";
    a.setAttributeNode(href);

    var div1 = document.getElementById("d");
    div1.appendChild(a);
  }
</script>

<button onclick="add()">在div中追加一个超链</button>


</body>
</html>

8、删除节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  function removeDiv(){
    var parentDiv = document.getElementById("parentDiv");
    var div2= document.getElementById("div2");
    parentDiv.removeChild(div2);
  }

</script>

<div id="parentDiv">
  <div id="div1">安全的div</div>
  <div id="div2">即将被删除的div</div>
</div>

<button onclick="removeDiv()">删除第二个div</button>

<script>
  function removeHref(){
    var link= document.getElementById("link");
    link.removeAttribute("href");
  }

</script>

<a id="link" href="http://12306.com">http://12306.com</a>

<br>
<button onclick="removeHref()">删除超链的href属性</button>

<script>

  function removeDiv1(){
    var parentDiv = document.getElementById("parentDiv");
    var textNode = parentDiv.childNodes[0];
    parentDiv.removeChild(textNode);
  }
  function removeDiv2(){
    var parentDiv = document.getElementById("parentDiv");
    parentDiv.innerHTML="";
  }
  function recover(){
    var parentDiv = document.getElementById("parentDiv");
    parentDiv.innerHTML="这里是文本 ";
  }

</script>

<style>
  button{
    display:block;
  }
</style>

<div id="parentDiv">
  这里是文本

</div>

<button onclick="removeDiv1()">通过removechild删除div下的文本节点</button>
<button onclick="removeDiv2()">通过innerHTML让内容置空</button>
<button onclick="recover()">恢复内容</button>

</body>
</html>

9、替换节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="parentDiv">
  <div id="d1">第一个div</div>
  <div id="d2">第二个div</div>
  <div id="d3">第三个div</div>
</div>

<script>

  function replaceDiv(){
    var d4=  document.createElement("div");
    var text = document.createTextNode("第四个div");

    d4.appendChild(text);

    var d3 = document.getElementById("d3");

    var parentDiv = document.getElementById("parentDiv");

    parentDiv.replaceChild(d4,d3);
  }

</script>

<button onclick="replaceDiv()">替换第3个div</button>
</body>
</html>

10、插入节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="parentDiv">
  <div id="d1">第一个div</div>
  <div id="d2">第二个div</div>
  <div id="d3">第三个div</div>
</div>

<script>

  function appendDiv(){
    var d4=  document.createElement("div");
    var text = document.createTextNode("第四个div");
    d4.appendChild(text);

    var parentDiv = document.getElementById("parentDiv");

    parentDiv.appendChild(d4);
  }

</script>

<button onclick="appendDiv()">追加第4个div</button>

<div id="parentDiv">
  <div id="d1">第一个div</div>
  <div id="d2">第二个div</div>
  <div id="d3">第三个div</div>
</div>

<script>

  function insertDiv(){
    var d25=  document.createElement("div");
    var text = document.createTextNode("第二点五个div");
    d25.appendChild(text);

    var parentDiv = document.getElementById("parentDiv");
    var d3 = document.getElementById("d3");

    parentDiv.insertBefore(d25,d3);
  }

</script>

<button onclick="insertDiv()">在第二和第三之间，插入第二点五个div</button>

<script>
  function loadJS(){
    var newScript = document.createElement('script');
    newScript.src = 'http://how2j.cn/study/test3041.js';
    var firstScript = document.getElementsByTagName("script")[0];
    firstScript.parentNode.insertBefore(newScript,firstScript);
  }
</script>
<button onclick="loadJS()">test3041.js</button>
</body>
</html>