• js-API 03 DOM节点操作,BOM


    DOM
    一,节点
    HTML 文档中的所有内容都是节点:
    整个文档是一个文档节点document,每个 HTML 元素是元素节点,HTML 元素内的文本是文本节点,每个 HTML 属性是属性节点,注释是注释节点
    二,获取节点类型的三种方式
    Nodetype
    Nodetype获取节点的类型
    1  element 元素节点
    2  attr     属性节点
    3  Text    文本节点
    8  comment注释节点
    nodeName
    元素节点的 nodeName 是标签名称(大写)
    属性节点的 nodeName 是属性名称
    文本节点的 nodeName 永远是 #text
    文档节点的 nodeName 永远是 #document
    nodeValue
    对于文本节点,nodeValue 属性包含文本。
    对于属性节点,nodeValue 属性包含属性值。
    文档节点和元素节点,nodeValue 属性的值始终为 null。
    三,创建元素
    document.write()
    document.createElement()
    box.innerHTML
    四,Event事件的兼容写法
    获得event对象兼容性写法 
    event ||  window.event;
    event.target||event.srcElement
    五,绑定事件的新方式
    addEventListener和attachEvent方法
    son.addEventListener('click', once1);
    对象.addEventListener("事件类型",事件处理函数,false)
    参数1:事件的类型---事件的名字,没有on
    参数2:事件处理函数---函数(命名函数,匿名函数)
    参数3:布尔类型,是否冒泡
    区别 this不同,addEventListener 中的this是当前绑定事件的对象
    六,移除解绑事件
    三,绑定解绑
    绑定事件 addEventListener
    var son = document.querySelector(".son");
    son.addEventListener('click', once1,false);
    function once1() {
    alert(1)
    }
    
    绑定事件attachEvent()
    解绑事件
    son.removeEventListener('click', once1,false);
    function once1() {
    alert(1)
    }
    
    解绑事件的其他方法
     对象.detachEvent("on事件类型",函数名字);
    元素.onclick=null;
    七,如何阻止冒泡(存在兼容性)
    e.stopPropagation(); 谷歌和火狐支持,
    window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持
    
    BOM
    一,对话框
    alert()
    prompt()
    confirm()
    二,加载事件
    Onload事件
    onload 事件会在页面或图像加载完成后立即发生。
    onload 通常用于 <body> 元素,在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
    三,Location对象
    常用属性
    地址栏上#及后面的内容
    console.log(window.location.hash);
    主机名及端口号
    console.log(window.location.host);
    主机名
    console.log(window.location.hostname);
    文件的路径---相对路径
    console.log(window.location.pathname);
    端口号
    console.log(window.location.port);
    协议
    console.log(window.location.protocol);
    搜索的内容
    console.log(window.location.search);
    浏览器地址
    window.location.href
    跳转的
    my$("btn1").onclick = function () {
    window.location.href = "15test.html";};
    Navigator对象
    通过userAgent可以判断用户浏览器的类型
    console.log(window.navigator.userAgent);
    四,定时器
    SetInteval()
    clearInteval()
    setTimeout()
    五,阻止默认事件
    w3c的方法是e.preventDefault()
    IE则是使用e.returnValue = false;
  • 相关阅读:
    电商总结(二)日志与监控系统的解决方案
    倾力推荐,哪一本让你想要加入书单
    电商总结(一)小型电商网站的架构
    聊一聊如何提升团队开发效率
    Nancy总结(三)Nancy资料介绍
    【推荐】2016年不得不读的九本好书
    Solr学习总结(七)Solr搜索引擎的整体架构
    再见 2015,你好 2016
    Solr学习总结(六)SolrNet的高级用法(复杂查询,分页,高亮,Facet查询)
    Solr学习总结(五)SolrNet的基本用法及CURD
  • 原文地址:https://www.cnblogs.com/adylz111/p/13433648.html
Copyright © 2020-2023  润新知