很久没写原生的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. 关于thymeleaf的if多条件判断

    <ul class="nav nav-second-level"> <li th:each="cmenu : ${menu.children}" ...

  2. C语言中内存分布及程序运行中(BSS段、数据段、代码段、堆栈)

      BSS段:(bss segment)通常是指用来存放程序中未初始化的全局变量的一块内存区域.BSS是英文Block Started by Symbol的简称.BSS段属于静态内存分配. 数据段 : ...

  3. mysql 压缩方法

    show global variables like 'innodb_file_format%';alter table t row_format=COMPRESSED;

  4. VS2010错误

    1.用VS2010生成C++程序时,链接器工具错误 LNK1123: fatal error LNK1123: failure during conversion to COFF: file inva ...

  5. Tinyos学习笔记(三)

    读取Telosb内部传感器数据,并在计算机上显示. senseC.nc代码如下: #include "Timer.h" #include "sense.h" # ...

  6. SSH无法连上CentOS7的问题

    今天安装完带GNOME的CentOS后发现XShell无法连接上Linux. 原因是sshd服务没有开启.下面是解决办法: 1 ip addr 发现网卡名称为ens33 2 在/etc/sysconf ...

  7. wcf 使用sqlMembership证书认证

    .接口 namespace Aretch.WcfService.Services.Interface { [ServiceContract] public interface ICalculator ...

  8. mysql完装成功后的提示。

    To start mysqld at boot time you have to copysupport-files/mysql.server to the right place for your ...

  9. @Valid报错 No validator could be found for constraint

    使用hibernate validator出现上面的错误, 需要 注意 @NotNull 和 @NotEmpty  和@NotBlank 区别 @NotEmpty 用在集合类上面@NotBlank 用 ...

  10. python之常用字符串用法

    1.isdigit=indecimal(判断是否是数字) s=" print(s.isdigit()) 输出为:True 2.format(标识符) a =("I have a { ...