很久没写原生的JS了,上周做了一个小东西让我又重新了解了一下原生JS,以下记录一些常见的原生JS

var canvArrow = document.getElementById('js-canv_arrow');
var body = document.getElementsByTagName('body')[0];

var a = document.getElementById('nav-text');

1、修改css属性:canvArrow.style.display = "block";

2、去除子元素:父级X.removeChild(a);
3、增加子元素:IndexNav.appendChild(a)相当于IndexNav.insertBefore(a,IndexNav.childNodes[0]);

表示将a子元素插入到IndexNav父级的第一个孩子

4、为一个元素增加一个类即要对该元素的类都进行重置
IndexNav.setAttribute("class", "m-navLeft m-navLeft-top");//IE6,IE7不支持

IndexNav.setAttribute("className", "m-navLeft m-navLeft-top");//仅IE6,IE7支持

IndexNav.className = "m-navLeft m-navLeft-fix";//所有浏览器都支持

5、绑定时间hover效果:

使用IndexNav.onmouseenter = function (){}

IndexNav.onmouseleave = function (){}

或者用兼容写法

if( window.addEventListener ){
  wrap.addEventListener( 'mouseover',hoverDir,false );
  wrap.addEventListener( 'mouseout',hoverDir,false );
}else if( window.attachEvent ){
  wrap.attachEvent( 'onmouseenter',hoverDir );
  wrap.attachEvent( 'onmouseleave',hoverDir );
}

6、获取浏览器宽度:document.body.clientWidth

7、监控浏览器窗口大小需要全部加载完之后才可触发

window.onload= function(){

  window.onresize = function(){moveIndexNav();};
}

原生JS一些操作的更多相关文章

  1. 使用原生js来操作对象dom的class属性

    之前一直都使用jquery来操作dom,今天想自己用原生写一些插件,却发现给dom增删class的时候,使用slice来截取className特别的麻烦,后来发现,原来原生JS本来就有提供api来对d ...

  2. 原生JS节点操作

    获取子节点 1. children 不是标准的dom属性,但是几乎被所有浏览器支持.获取子元素的元素节点(只包括元素节点) 注意:在IE中,children包含注释节点. 2. childNodes ...

  3. 原生JS数组操作的6个函数 arr.forEach arr.map arr.filter arr.some arr.every arr.findIndex

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 抛开jQuery,拾起原生JS的DOM操作

    常用的JS-DOM操作与jQuery的对比 jQuery用多了,还是需要来熟练熟练原生JS的操作,不然写JS都快离不开jQuery了 目录 1. 获取DOM 2. 创建DOM 3. 添加DOM 4. ...

  5. 原生js与jquery操作iframe

    1  原生js获取iframe的window对象 //方法1 document.getElementById('iframeId').contentWindow; //方法2 window.frame ...

  6. js原生的url操作函数,及使用方法。(附:下边还有jquery对url里的中文解码函数)

    js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ...

  7. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  8. 原生js 样式的操作整理

    内联样式的获取 function getStyle(obj,attr){//简单的获取内联样式 return obj.currentStyle?obj.currentStyle[attr]:obj.g ...

  9. [笔记]原生JS实现的DOM操作笔记

    原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...

随机推荐

  1. Linux用7zip解压缩分卷文件

    背景:在服务器迁移过程中,有大量非结构化文件(主要是office文档和图片),目录结构太大,高达80-100G,传输耗时且容易受网络 等其他原因意外中断,以致于传输失败,于是采用分卷压缩,即使传输失败 ...

  2. java学习笔记1--基础知识

    1.java数据类型 2.类之间的几种关系

  3. PHP——explode的应用(获取字符串,拆为下拉列表)

    <?php //定义有默认值的函数 function Main3($f=5,$g=6) { echo $f*$g; } Main3(2,3); echo "<br />&q ...

  4. IDEA 调整 VM 配置文件(64位)

    64 位操作系统中 8G 内存以下的机子或是静态页面开发者是无需修改的. 64 位操作系统且内存大于 8G 的, 如果你是开发大型项目. Java 项目或是 Android 项目,建议进行修改 . 1 ...

  5. Windows下war包部署到Linux下Tomcat出现的问题

    最近,将Windows下开发的war包部署到Linux下的Tomcat时报了一个错误:tomcat error in opening zip file.按理说,如果正常,当把war包复制到webapp ...

  6. Python 中docx转pdf

    #第一种import comtypes.clientdef convertDocxToPDF(infile,outfile): wdFormatPDF = 17 word = comtypes.cli ...

  7. DOM BOM 常用API小记

    DOM 1.元素节点: 元素节点element: 更精确的获得元素的标签名(全大写) 属性节点attribute: 属性名 文本节点text: #text 注释节点document:#document ...

  8. 关于win10系统配置变量时,javac编译不出的原因:没用好百度!

    在上班时,用笔记本的win8系统成功配置了java环境,于是想把家里的台式也配置一下,可是配置出来后javac却出不来东东,我很费解,重新下载了2次,还是不行,于是就暂时放弃了.那时是17年12月25 ...

  9. php file_get_contents 使用3法

    <?php //GET function http_get($url, $params){ return file_get_contents($url.'?'.http_build_query( ...

  10. 关于ueditor 在struts2 中 上传图片 ,未找到上传文件 问题的解决方法

    问题原因: ueditor 上传图片需请求imageUp.jsp文件,struts2 自带的拦截器(/*)把所有请求的文件都做了处理,所以导致无法上传图片. 解决方法: 方法一:自定义拦截器,让它在请 ...