JS第三天

编程语言 2018-08-30 12:16:58 阅读次数: 0

 节点

* 为什么要学节点

 * 回顾概念

  * 文档:document

  * 元素:页面中所有的标签,元素---element,  标签----元素---对象

  * 节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node

  * 根元素:html标签

  * 需求---用之前学习的知识点能否解决

  * 获取div中所有的标签,设置每个标签的背景颜色

  * 节点---任意一个标签中的元素获取都非常的方便

* 节点的操作的相关属性------>作用

  * 节点的属性:(可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.点出来)

  * nodeType:节点的类型:1----标签,2---属性,3---文本

  * nodeName:节点的名字:标签节点---大写的标签名字,属性节点---小写的属性名字,文本节点----#text

扫描二维码关注公众号，回复： 2961512 查看本文章

  * nodeValue:节点的值:标签节点---null,属性节点---属性值,文本节点---文本内容

  *

获取相关的节点案例：

<body>

<div id="dv">

  <span>这是div中的第一个span标签</span>

  <p>这是div中的第二个元素,第一个p标签</p>

  <ul id="uu">

    <li>乔峰</li>

    <li>鹿茸</li>

    <li id="three">段誉</li>

    <li>卡卡西</li>

    <li>雏田</li>

  </ul>

</div>

 

<script src="common.js"></script>

<script>

 

  var ulObj=my$("uu");

  console.log(ulObj.parentNode);//div

  console.log(ulObj.parentNode.parentNode);//body

  console.log(ulObj.parentNode.parentNode.parentNode);//html

  console.log(ulObj.parentNode.parentNode.parentNode.parentNode);//document

  console.log(ulObj.parentNode.parentNode.parentNode.parentNode.parentNode);//null

 

//  //ul标签的父级节点

//  console.log(ulObj.parentNode);

//  //ul标签的父级元素

//  console.log(ulObj.parentElement);

//

//  console.log(ulObj.parentNode.nodeType);//标签的---1

//  console.log(ulObj.parentNode.nodeName);//标签---大写的标签名字

//  console.log(ulObj.parentNode.nodeValue);//标签---null

 

</script>

</body>

 

获取相关的节点二：

<body>

<div id="dv">哦哦

  <span>这是div中的第一个span标签</span>

  <p>这是div中的第二个元素,第一个p标签</p>

  <ul id="uu">

    <li>乔峰</li>

    <li>鹿茸</li>

    <li id="three">段誉</li>

    <li>卡卡西</li>

    <li>雏田</li>

  </ul>

</div>

 

<script src="common.js"></script>

<script>

  //div

//  var dvObj=document.getElementById("dv");

//  //获取里面的每个子节点

//  for(var i=0;i<dvObj.childNodes.length;i++){

//    var node=dvObj.childNodes[i];

//    //nodeType--->节点的类型:1---标签,2---属性,3---文本

//    //nodeName--->节点的名字:大写的标签--标签,小写的属性名---属性,#text---文本

//    //nodeValue-->节点的值:标签---null,属性--属性的值,文本--文本内容

//    console.log(node.nodeType+"====="+node.nodeName+"===="+node.nodeValue);

//  }

 

  //div

//  var dvObj=document.getElementById("dv");

//  //获取的是属性的节点

//  var node=dvObj.getAttributeNode("id");

//  console.log(node.nodeType+"----"+node.nodeName+"===="+node.nodeValue);

 

 

  //div

//  var dvObj=document.getElementById("dv");

//  //子节点

//  console.log(dvObj.childNodes);//7个子节点

//  //子元素

//  console.log(dvObj.children);

</script>

</body>

    

获取相关的节点三：

<body>

<div id="dv">哦哦

  <span>这是div中的第一个span标签</span>

  <p>这是div中的第二个元素,第一个p标签</p>

  <ul id="uu">

    <li>乔峰</li>

    <li>鹿茸</li>

    <li id="three">段誉</li>

    <li>卡卡西</li>

    <li>雏田</li>

  </ul>

</div>

<script src="common.js"></script>

<script>

 

  //12行代码:都是获取节点和元素的

  //ul

  var ulObj=document.getElementById("uu");

  //父级节点

  console.log(ulObj.parentNode);

  //父级元素

  console.log(ulObj.parentElement);

  //子节点

  console.log(ulObj.childNodes);

  //子元素

  console.log(ulObj.children);

  console.log("==============================================");

  //第一个子节点

  console.log(ulObj.firstChild);//------------------------IE8中是第一个子元素

  //第一个子元素

  console.log(ulObj.firstElementChild);//-----------------IE8中不支持

  //最后一个子节点

  console.log(ulObj.lastChild);//------------------------IE8中是第一个子元素

  //最后一个子元素

  console.log(ulObj.lastElementChild);//-----------------IE8中不支持

  //某个元素的前一个兄弟节点

  console.log(my$("three").previousSibling);

  //某个元素的前一个兄弟元素

  console.log(my$("three").previousElementSibling);

  //某个元素的后一个兄弟节点

  console.log(my$("three").nextSibling);

  //某个元素的后一个兄弟元素

  console.log(my$("three").nextElementSibling);

 

  //总结:凡是获取节点的代码在谷歌和火狐得到的都是  相关的节点

  //凡是获取元素的代码在谷歌和火狐得到的都是   相关的元素

  //从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持

 

 

//  var ulObj=document.getElementById("uu");

//

//

//  console.log("==============================================");

//  //第一个子节点

//  console.log(ulObj.firstChild.innerText);//------------------------IE8中是第一个子元素

//  //第一个子元素

//  console.log(ulObj.firstElementChild);//-----------------IE8中不支持

//  //最后一个子节点

//  console.log(ulObj.lastChild.innerText);//------------------------IE8中是第一个子元素

//  //最后一个子元素

//  console.log(ulObj.lastElementChild);//-----------------IE8中不支持

//  //某个元素的前一个兄弟节点

//  console.log(my$("three").previousSibling.innerText);

//  //某个元素的前一个兄弟元素

//  console.log(my$("three").previousElementSibling);

//  //某个元素的后一个兄弟节点

//  console.log(my$("three").nextSibling.innerText);

//  //某个元素的后一个兄弟元素

//  console.log(my$("three").nextElementSibling);

//

</script>

</body>

* 12行代码----有用的----熟练的问题,

获取全选和全部选的案例：

     <head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    * {

      padding: 0;

      margin: 0;

    }

 

    .wrap {

      width: 300px;

      margin: 100px auto 0;

    }

 

    table {

      border-collapse: collapse;

      border-spacing: 0;

      border: 1px solid #c0c0c0;

      width: 300px;

    }

 

    th,

    td {

      border: 1px solid #d0d0d0;

      color: #404060;

      padding: 10px;

    }

 

    th {

      background-color: #09c;

      font: bold 16px "微软雅黑";

      color: #fff;

    }

 

    td {

      font: 14px "微软雅黑";

    }

 

    tbody tr {

      background-color: #f0f0f0;

    }

 

    tbody tr:hover {

      cursor: pointer;

      background-color: #fafafa;

    }

  </style>

</head>

<body>

<div class="wrap">

  <table>

    <thead>

    <tr>

      <th>

        <input type="checkbox" id="j_cbAll"/>

      </th>

      <th>菜名</th>

      <th>饭店</th>

    </tr>

    </thead>

    <tbody id="j_tb">

    <tr>

      <td>

        <input type="checkbox"/>

      </td>

      <td>红烧肉</td>

      <td>田老师</td>

    </tr>

    <tr>

      <td>

        <input type="checkbox"/>

      </td>

      <td>西红柿鸡蛋</td>

      <td>田老师</td>

    </tr>

    <tr>

      <td>

        <input type="checkbox"/>

      </td>

      <td>油炸榴莲</td>

      <td>田老师</td>

    </tr>

    <tr>

      <td>

        <input type="checkbox"/>

      </td>

      <td>清蒸助教</td>

      <td>田老师</td>

    </tr>

 

    </tbody>

  </table>

</div>

<script src="common.js"></script>

<script>

 

  //获取全选的这个复选框

  var ckAll = my$("j_cbAll");

  //获取tbody中所有的小复选框

  var cks = my$("j_tb").getElementsByTagName("input");

  //点击全选的这个复选框,获取他当前的状态,然后设置tbody中所有复选框的状态

  ckAll.onclick = function () {

    //console.log(this.checked);

    for (var i = 0; i < cks.length; i++) {

      cks[i].checked = this.checked;

    }

  };

 

  //获取tbody中所有的复选框,分别注册点击事件

  for(var i=0;i<cks.length;i++){

    cks[i].onclick=function () {

      var flag=true;//默认都被选中了

      //判断是否所有的复选框都选中

      for(var j=0;j<cks.length;j++){

        if(!cks[j].checked){

          //没选中就进来了

          flag=false;

          break;

        }

      }

      //全选的这个复选框的状态就是flag这个变量的值

      ckAll.checked=flag;

    };

  }

 

</script>

</body>

* 元素的创建三种方式------重点的内容

第一种元素创建的方式：

<body>

<input type="button" value="创建一个p" id="btn"/>

小苏是一个快乐的小男孩,人家今年才38岁.好帅哦

<script src="common.js"></script>

<script>

  //document.write("标签代码及内容");

  my$("btn").onclick=function () {

    document.write("<p>这是一个p</p>");

  };

 // document.write("<p>这是一个p</p>");

 

  //document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉

 

 

</script>

</body>

第二种元素创建的方式：

    <body>

<input type="button" value="创建一个p" id="btn" />

<div id="dv"></div>

<script src="common.js"></script>

<script>

  //点击按钮,在div中创建一个p标签

  //第二种方式创建元素: 对象.innerHTML="标签代码及内容";

 

  my$("btn").onclick=function () {

    my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>";

  };

</script>

</body>

第三种元素创建的方式：

      <body>

<input type="button" value="创建p" id="btn"/>

<div id="dv"></div>

<script src="common.js"></script>

<script>

  //第三种方式创建元素

  //创建元素

  //document.createElement("标签名字");对象

  //把元素追加到父级元素中

  //点击按钮,在div中创建一个p

 

  my$("btn").onclick = function () {

    //创建元素的

    var pObj = document.createElement("p");

    setInnnerText(pObj, "这是一个p");

    //把创建后的子元素追加到父级元素中

    my$("dv").appendChild(pObj);

  };

 

 

</script>

</body>

 

案例：动态创建列表

      <meta charset="UTF-8">

  <title>title</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

 

    ul {

      list-style-type: none;

      cursor: pointer;

    }

 

    div {

      width: 200px;

      height: 400px;

      border: 2px solid red;

    }

  </style>

</head>

<body>

<input type="button" value="创建列表" id="btn"/>

<div id="dv"></div>

<script src="common.js"></script>

<script>

  var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];

 

  //点击按钮动态的创建列表,把列表加到div中

  my$("btn").onclick = function () {

    //创建ul,把ul立刻加入到父级元素div中

    var ulObj = document.createElement("ul");

    my$("dv").appendChild(ulObj);

    //动态的创建li,加到ul中

    for (var i = 0; i < kungfu.length; i++) {

      var liObj = document.createElement("li");

      //设置li中间的文字内容

      liObj.innerHTML = kungfu[i];

      ulObj.appendChild(liObj);

      //为li添加鼠标进入事件

      liObj.onmouseover = mouseoverHandle;

      //为li添加鼠标离开事件

      liObj.onmouseout = mouseoutHandle;

    }

  };

 

  //此位置.按钮的点击事件的外面

  function mouseoverHandle() {

    this.style.backgroundColor = "red";

  }

  function mouseoutHandle() {

    this.style.backgroundColor = "";

  }

 

  //如果是循环的方式添加事件,推荐用命名函数

  //如果不是循环的方式添加事件,推荐使用匿名函数

 

</script>

</body>

 

案例：点击按钮创建一个表格

    <body>

<input type="button" value="创建表格" id="btn"/>

<div id="dv"></div>

<script src="common.js"></script>

<script>

 

  var arr=[

    {name:"百度",href:"http://www.baidu.com"},

    {name:"谷歌",href:"http://www.google.com"},

    {name:"优酷",href:"http://www.youku.com"},

    {name:"土豆",href:"http://www.tudou.com"},

    {name:"快播",href:"http://www.kuaibo.com"},

    {name:"爱奇艺",href:"http://www.aiqiyi.com"}

  ];

 

  //点击按钮创建表格

  my$("btn").onclick=function () {

    //创建table加入到div中

    var tableObj=document.createElement("table");

    tableObj.border="1";

    tableObj.cellPadding="0";

    tableObj.cellSpacing="0";

    my$("dv").appendChild(tableObj);

    //创建行,把行加入到table中

    for(var i=0;i<arr.length;i++){

      var dt=arr[i];//每个对象

      var trObj=document.createElement("tr");

      tableObj.appendChild(trObj);

      //创建第一个列,然后加入到行中

      var td1=document.createElement("td");

      td1.innerText=dt.name;

      trObj.appendChild(td1);

      //创建第二个列

      var td2=document.createElement("td");

      td2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";

      trObj.appendChild(td2);

    }

  };

 

</script>

</body>

 

* 元素绑定多个事件

<body>

<input type="button" value="按钮" id="btn"/>

<script src="common.js"></script>

<script>

  //为元素绑定事件(DOM):一种,但是不兼容,有两种

  //1 对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持

  //2 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持

 

  //为按钮绑定点击事件

  //参数1:事件的类型---事件的名字,没有on

  //参数2:事件处理函数---函数(命名函数,匿名函数)

  //参数3:布尔类型,目前就写false-----没有为什么,不解释,明天说

 

  //为同一个元素绑定多个相同的事件--

//  my$("btn").addEventListener("click",function () {

//    console.log("小苏猥琐啊");

//  },false);

//  my$("btn").addEventListener("click",function () {

//    console.log("小苏龌龊啊");

//  },false);

//  my$("btn").addEventListener("click",function () {

//    console.log("小苏邪恶啊");

//  },false);

//  my$("btn").addEventListener("click",function () {

//    console.log("小苏下流啊");

//  },false);

 

  //参数1:事件类型---事件名字，有on

  //参数2:事件处理函数---函数(命名函数,匿名函数)

 

//  my$("btn").attachEvent("onclick",function () {

//    console.log("小杨好帅哦1");

//  });

//

//  my$("btn").attachEvent("onclick",function () {

//    console.log("小杨好帅哦2");

//  });

//

//  my$("btn").attachEvent("onclick",function () {

//    console.log("小杨好帅哦3");

//  });

 

 

</script>

</body>

* 为元素绑定事件的兼容代码

<body>

<input type="button" value="按钮" id="btn"/>

<script src="common.js"></script>

<script>

 

  //为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数

  function addEventListener(element,type,fn) {

    //判断浏览器是否支持这个方法

    if(element.addEventListener){

      element.addEventListener(type,fn,false);

    }else if(element.attachEvent){

      element.attachEvent("on"+type,fn);

    }else{

      element["on"+type]=fn;

    }

  }

 

  addEventListener(my$("btn"),"click",function () {

    console.log("哦1");

  });

  addEventListener(my$("btn"),"click",function () {

    console.log("哦2");

  });

  addEventListener(my$("btn"),"click",function () {

    console.log("哦3");

  });

 

 

 

//  my$("btn")["on"+"click"]=function () {

//

//  };

 

//  function Person(name) {

//    this.name=name;

//    this.sayHi=function () {

//      console.log("您好啊");

//    };

//  }

 

//  var per=new Person("小明");

//  if(per.sayHii){//判断这个对象中有没有这个方法

//    per.sayHii();

//  }else{

//    console.log("没有这个方法");

//  }

 

 

 

 

 

 

</script>

</body>

 

    * 移除元素

    *

    * 事件的

猜你喜欢

转载自blog.csdn.net/qq_38244874/article/details/82143035
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022