04【weapi】4/7

最新推荐文章于 2024-03-27 08:30:14 发布

南北极之间

最新推荐文章于 2024-03-27 08:30:14 发布

阅读量170

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/qq_22182989/article/details/89944373

版权

前端开发专栏收录该内容

563 篇文章 50 订阅

订阅专栏

=============

============


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
    /*
     *
     * 节点:
     * 节点:页面中所有的内容都是节点(标签,属性,文本:文字,空格,换行)
     * 文档：document---页面中的顶级对象
     * 元素:页面中所有的标签,   标签---元素--对象(通过DOM的方式来获取这个标签,得到了这个对象,此时这个对象叫DOM对象)
     * 节点的属性:作用:为了将来获取很多节点,得到节点中的标签(元素),识别节点中的标签元素
     * 节点的类型:1标签节点,2属性节点,3文本节点
     * nodeType:节点的类型,1---标签节点,2----属性节点,3---文本节点
     * nodeName:标签节点--大写的标签名字,属性节点---小写的属性名字,文本节点---#text
     * nodeValue:标签---null,属性---属性的值,文本---文本内容
     * if(node.nodeType==1&&node.nodeName=="P")
     *
     * 获取节点及元素的代码(下面呢)
     *
     *
     *
     * 元素的创建
     * 三种元素创建的方式
     * 1. document.write("标签代码及内容"); 如果在页面加载完毕后创建元素.页面中的内容会被干掉
     * 2. 父级对象.innerHTML="标签代码及内容";
     * 3. document.createElement("标签名字");得到的是一个对象,
     *   父级元素.appendChild(子级元素对象);
     *   父级元素.inerstBefore(新的子级对象,参照的子级对象);
     *   移除子元素
     *   父级元素.removeChild(要干掉的子级元素对象);
     *
     * 事件的绑定:为同一个元素绑定多个相同的事件
     * 三种方式:
     * 1. 对象.on事件名字=事件处理函数      如果是多个相同事件注册用这种方式,最后一个执行,之前的被覆盖了
     * my$("btn").onclick=function(){};
     * 2. 对象.addEventListener("没有on的事件名字",事件处理函数,false);
     * my$("btn").addEventListener("click",function(){},false);
     * 3. 对象.attachEvent("有on的事件名字",事件处理函数);
     * my$("btn").attachEvent("onclick",function(){});
     *
     *
     *
     * */

    //为任意的一个元素,绑定任意的一个事件
    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;
      }
    }
//    my$("btn")["on"+"click"]=function(){};
//
//      var obj={
//        name:"张三",
//        sayHi:function () {
//
//        }
//
//      };


    //获取当前节点的父级节点
    console.log(my$("uu").parentNode);
    //获取当前节点的父级元素
    console.log(my$("uu").parentElement);
    //获取当前节点的子级节点
    console.log(my$("uu").childNodes);
    //获取当前节点的子级元素
    console.log(my$("uu").children);


    //获取当前节点的第一个子级节点
    console.log(my$("uu").firstChild);
    //获取当前节点的第一个子级元素
    console.log(my$("uu").firstElementChild);
    //获取当前节点的最后一个子级节点
    console.log(my$("uu").lastChild);
    //获取当前节点的最后一个子级元素
    console.log(my$("uu").lastElementChild);
    //获取当前节点的前一个兄弟节点
    console.log(my$("uu").previousSibling);
    //获取当前节点的前一个兄弟元素
    console.log(my$("uu").previousElementSibling);
    //获取当前节点的后一个兄弟节点
    console.log(my$("uu").nextSibling);
    //获取当前节点的后一个兄弟元素
    console.log(my$("uu").nextElementSibling);


    //    document.write("<p>这是一个p</p>")
    //
    //    document.body.innerHTML="<p>这是一个p</p>";
  </script>
</head>
<body>

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


  //  var pObj=document.createElement("p");
  //  父级元素.appendChild(pObj);

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

===========


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>

    /*
    *
    * 事件
    * 1. 绑定事件的区别
    *
    * 2. 移除绑定事件的方式及区别和兼容代码
    *
    * 3. 事件的三个阶段
    *
    * 4. 事件冒泡
    *
    * 5. 为同一个元素绑定多个不同的事件,指向的是同一个事件处理函数
    *
    * 6. 百度的大项目
    *
    * 7. BOM
    *
    * 8. 定时器
    *
    * 9. DOM加强,多个几个好玩的案例----
    *
    *
    *
    *
    * */

  </script>
</head>
<body>

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

============

不太懂


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script>



  /*
  *
  * 总结绑定事件的区别:
  * addEventListener();
  * attachEvent()
  *
  * 相同点: 都可以为元素绑定事件
  * 不同点:
  * 1.方法名不一样
  * 2.参数个数不一样addEventListener三个参数,attachEvent两个参数
  * 3.addEventListener 谷歌,火狐,IE11支持,IE8不支持
  *   attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
  * 4.this不同,addEventListener 中的this是当前绑定事件的对象
  *   attachEvent中的this是window
  * 5.addEventListener中事件的类型(事件的名字)没有on
  *  attachEvent中的事件的类型(事件的名字)有on
  *
  *  现在遇到的逆境,都是以后成长的阶梯
  *
  *
  *
  *
  *
  *
  *
  *
  *
  * */


  //为按钮绑定多个点击事件

//  my$("btn").addEventListener("click",function () {
//    console.log(this);
//  },false);

//  my$("btn").attachEvent("onclick",function () {
//    console.log(this);
//  });







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

=============

==============

===============

================

==================

===================

==================

===================

==================

====================

===================

======================

=======================

======================

===========

===============

=================

================

=================

===================

============

===========

======================

南北极之间

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
04【weapi】4/7

=========================<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <script> /* * ...
复制链接

扫一扫