复习web API 第三节

最新推荐文章于 2022-09-14 21:17:54 发布

liuguoxuanvip

最新推荐文章于 2022-09-14 21:17:54 发布

阅读量168

点赞数

分类专栏：需要复习

需要复习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>