很久没写原生的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. opencv 3.2 vs2015 debug assertion __acrt_first_block == header

    网上复制了一个转直方图的代码 ,说来也奇怪, 用imshow 显示 图片在独立窗体内,不存在问题, 要注释掉这段代码就出现了下边的错误. 网上查了查,原来是程序中 有个std::vector<c ...

  2. 8.Mysql数据类型选择

    8.选择合适的数据类型8.1 CHAR与VARCHAR CHAR固定长度的字符类型,char(n) 当输入长度不足n时将用空格补齐,char(n)占用n个字节,CHAR类型输出时会截断尾部的空格,即使 ...

  3. Oracle_PL/SQL(4) 过程和函数

    create table s_sc ( SNAME VARCHAR2(20) primary key, c_grade NUMBER(6), m_grade NUMBER(6), e_grade NU ...

  4. js 逻辑运算符

    两个逻辑运算符的操作顺序在自己的脑海里一直理不清,用js做了个实验 <script type="text/javascript">    if(false && ...

  5. 关于sublime Text 3安装sublimecodeIntel插件配置方法

    打开preferences-package settings-sublimecodeIntel-settings users 添加 { "JavaScript": { " ...

  6. Minimum number of steps 805D

    http://codeforces.com/contest/805/problem/D D. Minimum number of steps time limit per test 1 second ...

  7. 2019年学Java开发有优势吗?

    随着信息科技的发展,在我们的日程生活和工作中到处充斥和使用着互联网信息技术.事实说明,互联网已经越来越广泛地深入到人们生活的方方面面,Java技术服务市场需求空缺会越来越大.学会一门IT技术,将拥有更 ...

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

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

  9. [Robot Framework] 怎么写动态等待?

    举例:Robot Framwork+WhiteLibrary,等待元素可用或不可用 Wait Until Object Is Enabled Wait Until Object Is Not Enab ...

  10. AUC和ROC

    https://www.cnblogs.com/gatherstars/p/6084696.html