JavaScript学习记录九

其他 2018-10-08 22:10:03 阅读次数: 0

  * 文档:document
  * 元素:页面中所有的标签,元素---element,  标签----元素---对象
  * 节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node
  * 根元素:html标签

  * 节点的属性:(可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.点出来)
  * nodeType:节点的类型:1----标签,2---属性,3---文本
  * nodeName:节点的名字:标签节点---大写的标签名字,属性节点---小写的属性名字,文本节点----#text
  * 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

    //nodeType--->节点的类型:1---标签,2---属性,3---文本
    //nodeName--->节点的名字:大写的标签--标签,小写的属性名---属性,#text---文本
    //nodeValue-->节点的值:标签---null,属性--属性的值,文本--文本内容

案例：节点的遍历

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

for(var i=0;i<dvObj.childNodes.length;i++){
    console.log(node.nodeType+"====="+node.nodeName+"===="+node.nodeValue);
}

//获取的是属性的节点
var node=dvObj.getAttributeNode("id");

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

案例：获取相关的节点

  //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);

案例：修改指定标签的背景色

<script src="common.js"></script>
<script>
  my$("btn").onclick = function () {
    //先获取div
    var dvObj = my$("dv");
    //获取里面所有的子节点
    var nodes = dvObj.childNodes;
    //循环遍历所有的子节点
    for (var i = 0; i < nodes.length; i++) {
      //判断这个子节点是不是p标签
      if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") {
        nodes[i].style.backgroundColor = "red";
      }
    }
  };

案例：隔行变色

<script>
  //隔行变色--li
  my$("btn").onclick = function () {
    var count=0;//记录有多少个li
    //获取ul中所有的子节点
    var nodes = my$("uu").childNodes;
    for (var i = 0; i < nodes.length; i++) {
      //判断这个节点是不是li标签
      if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") {
        nodes[i].style.backgroundColor=count%2==0?"red":"yellow";
        count++;//8个
        //nodes[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
      }
    }
  };

案例：浏览器兼容性解决

  //element.firstChild--->谷歌和火狐获取的是第一个子节点
  //element.firstChile--->IE8获取的是第一个子元素
  //element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持

  //获取任意一个父级元素的第一个子级元素
  function getFirstElementChild(element) {
    if(element.firstElementChild){//true--->支持
      return element.firstElementChild;
    }else{
      代码的解释：走到这里说明浏览器为IE或者其他的浏览器，所以该方法获得的可能是IE(元素)、其他(节点)
      先得到该元素，进行判断，如果该节点存在，而且是标签，在进行返回。
      注：比如空格，也可以是nextSibling返回的内容
      var node=element.firstChild;//第一个节点
      while (node&&node.nodeType!=1){
        node=node.nextSibling;
      }
      return node;
    }
  }
  //获取任意一个父级元素的最后一个子级元素
  function getLastElementChild(element) {
    if(element.lastElementChild){//true--->支持
      return element.lastElementChild;
    }else{
      var node=element.lastChild;//第一个节点
      while (node&&node.nodeType!=1){
        node=node.previousSibling;
      }
      return node;
    }
  }

案例：背景图片的切换

  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    body {
      background-image: url("images/1.jpg");
    }

    #mask {
      background-color: rgba(255, 255, 255, 0.3);
      height: 200px;
      text-align: center;
    }

    #mask img {
      width: 200px;
      margin-top: 35px;
      cursor: pointer;
    }

  </style>

</head>
<body id="bd">
<div id="mask">
  <img src="images/1.jpg" alt="">
  <img src="images/2.jpg" alt="">
  <img src="images/3.jpg" alt="">
</div>
<script src="common.js"></script>
<script>
  var imgObjs=my$("mask").children;//获取的所有的子元素
  //循环遍历所有img,注册点击事件
  for(var i=0;i<imgObjs.length;i++){
    imgObjs[i].onclick=function () {
      document.body.style.backgroundImage="url("+this.src+")";
    };
  }
</script>

案例：全选与全不选

<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;
    };
  }

元素的创建

    * 元素创建的三种方式:
    * 1. document.write("标签的代码及内容");
    * 2. 对象.innerHTML="标签及代码";
    * 3. document.createElement("标签的名字");

案例：使用第一种方式创建一个标签

      *注：如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉

<body>
<input type="button" value="创建一个p" id="btn"/>
小苏是一个快乐的小男孩,人家今年才38岁.好帅哦
<script src="common.js"></script>
<script>
  my$("btn").onclick=function () {
    document.write("<p>这是一个p</p>");
  };

案例：第二种方式内容同样存在覆盖

<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>";
  };

案例：点击事件，创建列表

  var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"];
  my$("btn").onclick = function () {
    var str = "<ul style='list-style-type: none;cursor: pointer'>";
    //根据循环创建对应对数的li
    for (var i = 0; i < names.length; i++) {
      str += "<li>" + names[i] + "</li>";
    }
    str += "</ul>";
    my$("dv").innerHTML = str;

案例：第三种创建元素的方式

  my$("btn").onclick = function () {
    //创建元素的
    var pObj = document.createElement("p");
    setInnnerText(pObj, "这是一个p");
    //把创建后的子元素追加到父级元素中
    my$("dv").appendChild(pObj);
  };

案例：动态创建里列表(第三种方式)

<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 = "";
  }

案例：动态创建表格

  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);
    }
  };

案例：元素的方法演示

var i=0;
  my$("btn").onclick=function () {
    i++;
   var obj= document.createElement("input");
    obj.type="button";
    obj.value="按钮"+i;
    //my$("dv").appendChild(obj);//追加子元素
    //把新的子元素插入到第一个子元素的前面
    my$("dv").insertBefore(obj,my$("dv").firstElementChild);
    //my$("dv").replaceChild();---自己玩
  };

  my$("btn2").onclick=function () {
    //移除父级元素中第一个子级元素
    my$("dv").removeChild(my$("dv").firstElementChild);
  };

  my$("btn3").onclick=function () {
    //点击按钮删除div中所有的子级元素
    //判断父级元素中有没有第一个子元素
    while(my$("dv").firstElementChild){
      my$("dv").removeChild(my$("dv").firstElementChild);
    }

案例：只添加一个元素

  my$("btn").onclick=function () {
    //判断,div中有没有这个按钮,有就删除
    //判断这个按钮的子元素是否存在
    if(!my$("btn2")){//如果为true就有
      var obj=document.createElement("input");
      obj.type="button";
      obj.value="按钮";
      obj.id="btn2";
      my$("dv").appendChild(obj);
    }

  };

  //为元素绑定事件(DOM):一种,但是不兼容,有两种
  //1 对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持
  //2 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持

  my$("btn").addEventListener("click",function () {
    console.log("java");
  },false);
  my$("btn").addEventListener("click",function () {
    console.log("javaScript");
  },false);
//--------------------------------------------------
  my$("btn").attachEvent("onclick",function () {
    console.log("小杨好帅哦1");
  });

  my$("btn").attachEvent("onclick",function () {
    console.log("小杨好帅哦2");
  });

案例：解决绑定多个事件，浏览器兼容问题的方法抽取

  //为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
  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;
    }
  }

猜你喜欢

转载自blog.csdn.net/qq_34117624/article/details/82723549
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022