01.自定义属性

1.自定义属性:

作用:保存数据 通用的自定义属性的前缀 data-属性="属性值"

注:自定义的属性不能通过 元素.属性 取属性值 ,需使用getAttribute();

2.自定义属性的获取

元素.getAttribute('data-url');

3.设置

节点.setAttribute('属性名称','修改后的属性值'); (修改后的属性值是一个变量的时候,不加引号)

4.删除

元素.removeAttribute('data-url');

简单测试:
<img src="./images/1.jpg" alt="" data-url="./images/a.jpg">
//获取自定义属性:
var oImg = document.querySelector('img');
console.log(oImg.getAttribute('data-url'));
//设置自定义属性
var oImg = document.querySelector('img');
oImg.setAttribute('data','ddddd');
//删除
var oImg = document.querySelector('img');
oImg.removeAttribute('data-url');

02.自定义属性案例

鼠标滑过,切换图片

<style>
*{
       margin:0;
       paddin:0;
}
.showImg{
       width:300px;
       height:300px;
       border:1px solid red;
  }
.showImg img{
       display:block;
       width:100%;
       height:100%;
  }
.btnImg{
       width:300px;
       height:60px;
       border:1px solid red;
  }
.btnImg img{
       width:60px;
       height:60px;
       display:block;
       float:left;
       cursor:pointer;
  }
</style>
<section class="showImg">
   <img src="./images/rose1.jpg" alt="">
</section>
<div class="btnImg">
   <img src="./images/rose1.jpg" alt="">
   <img src="./images/rose2.jpg" alt="">
   <img src="./images/rose3.jpg" alt="">
   <img src="./images/rose4.jpg" alt="">
   <img src="./images/rose5.jpg" alt="">
</div>
<script>
   //鼠标滑过事件 onmouseover
   //如果获取的是一个节点集合,并且给每一个元素绑定事件,需要遍历
   var aImg = document.querySelector('.showImg img');
var bigImg = document.querySelectorAll('btnImg img');//获取到的是一个节点的集合
for(var i = 0 ; i < bigImg.length ; i++){ //循环遍历,给每一个img绑定鼠标滑过事件
       //循环遍历,绑定事件(重点)
       bigImg[i].onmouseover = function(){
           //鼠标滑过每一个img的时候,获取它的src的值,直接更改大图的src
           aImg.src = this.src; //上面显示的图片的src就是在遍历时,获取的当前图片的src
           var src = this.getAttribute('src');  //获取当前图片的src
           aImg.setAttribute('src',src); //将设置显示区,显示当前图片的src
      }
  }
</script>

03.innerHTML,outerHTML

<section>
   section中的文本
<div>
  div中的文本
   </div>
</section>
<script>
   var oS = document.querySelector('section');
console.log(oS); //section里面的文本和div都获取到了

var oS = document.querySelector('section');
console.log(os.innerHTML);  //innerHTML除了可以设置,还可以获取,获取到的是section里面所有内容(包括标签)
console.log(os.innerText);  //只获取section里面的所有文本
console.log(os.outerHTML); //outerHTML ,获取到的是section和它里面的内容
console.log(os.outerText); //和innerText一样,获取到所有文本内容
</script>

04.自定义属性案例(换肤)

css/style1.css,css/style2.css/...css/style5.css:
body{
   background:url(../images/rose1.jpg) no-repeat;
   background-size:100% 100%;
}//同理,将5个图片作为背景图切换
<link rel="stylesheet" href="./css/style1.css">
<style>
   *{
   margin:0;
   padding:0;
}
html,body{
       width:100%;
       height:100%;
  }
</style>
<script>
   <button>换肤</button>
<script src="../myApi.js"></script>
<script>
       //获取元素button
       var oBtn = document.querySelector('button');
//获取换肤的每一个样式
var oLink = document.querySelector('link');
//给按钮绑定单击事件
oBtn.onclick = function(){
           //随机换肤
           var num = randomNum(1,5);
           //使用字符串拼接,拼成修改的样式的路径
           var url = './css/style'+ num + '.css';
           //setAttribute设置切换的link的href,通过更改href,来完成换肤的效果
           oLink.setAttribute('href',url);
      }
   </script>
</script>

05.dom节点的获取

<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
<img src="./images/rose1.jpg" alt="dkf" title="dfs">
<script>
var os = document.querySelector('section');
var adiv = os.querySelectorAll('div');
console.log(os.firstChild); //获取第一个节点(元素节点,文本节点)
console.log(os.lastChild); //获取最后一个界定啊(元素节点,文本节点)
console.log(os.firstElementChild); //获取第一个元素节点(包括文本节点)。<div>1</div>
console.log(os.lastElementChild); //获取最后一个元素(不包括文本节点)<div>4<div>

console.log(adiv[1].previousSibling);//获取已知节点的相邻的上一个节点(可以获取到文本节点)
console.log(adiv[1].previousElementSibling); //获取相邻的上一个元素节点<div></div> console.log(adiv[i].nextSibling); //获取已知节点的相邻的下一个节点(可以获取文本节点)
console.log(adiv[i].nextElementSibling);//获取已知节点的下一个元素节点

//替换节点 replaceChild(newNode,oldNode);
var createP = document.createElement('p');
createP.innerHTML = '新增加的';
os.replaceChild(createP,adiv[3]); //把第4个div替换成p

//ownerDocument 获取该节点的文档根节点 (相当于document)
console.log(os.ownerDocument);  //获取section节点的文档根节点,结果为document

//attributes 它是一个属性,获取当前元素节点的所有属性节点集合
var oImg = document.querySelector('img');
console.log(oImg.attributes); //获取到的是一个集合 NamedNodeMap {0: src, 1: alt, 2: title, src: src, alt: alt, title: title, length: 3}
console.log(oImg.attributes[0]); //获取这个集合下的第一个属性 src="./images/rose1.jpg"
console.log(oImg.attributes[0].nodeValue); //获取属性里面的值 ./images/rose1.jpg
console.log(oImg.attributes['src']);//返回属性为src的节点
</script>

06.商品的加减

<style>
   #price,h3{
       font-size:30px;
       font-weight:900px;
       color:red;
  }
</style>
<h2>商品的单价:</h2>
<h3>1000</h3>
<div>
   <button class="minus">-</button>
<input type="text" name="" id="" value="0">
   <button class="add">+</button>
</div>
<h2>总额:<span id="price">0</span></h2>
<script>
   var
oMinus = document.querySelector('.minus'),
       oAdd = document.querySelector('.add'),
       oPrice = document.querySelector('#price');
money = document.querySelector('h3').innerHTML; //获取h3的内容
//加
oAdd.onclick = function(){
       oAdd.previousElementSibling.value++;//点击+,改变上一个节点,input的值,每次点击+,值++
      oPrice.innerHTML = money * oAdd.previousElementSibling.value;
  }
//减
oMinus.onclick = function(){
       oMinus.nextElementSilbing.value--;//点击-,改变下一个节点,input的值,每次点击-,值--
       if(oMinus.nextElementSilbing.value <= 0){//当减到0时,再不允许--,将input的值保持为0
           oMinus.nextElementSibling.value = 0;    
      }
       oPrice.innerHTML = money * oMinus.nextElementSibling.value;
  }
</script>

07.className,tagName

1.获取行间样式

节点.className 获取/设置 类名

节点.tagName 获取标签名 都是大写的

2.js动态获取更改 某个元素的html属性

元素.属性 设置/获取

自定义属性: getAttribute(获取) setAttribute(设置)

<style>
.box{
       width:300px;
       height:300px;
       background:red;
  }
.wrap{
       border:10px solid orange;
  }
</style>
<div class = "box" title="ddd" style="border:30px solid blue;"></div>
<div title="ddd"></div>
<script>
   var oBox = document.querySelector('.box');
console.log(oBox.className); //box
console.log(oBox.tagName);  //DIV

var oBox = document.querySelector('div');
//没有类名的时候,动态添加类名
oBox.className = 'box';
//要想把.wrap的样式添加给box
//oBox.className = 'wrap'; //把样式重置了
oBox.className = ' wrap'; //要加上空格,不然就贴在一起了

//根据类名,动态添加样式
console.log(oBox.style);
</script>

08.更改或者是获取css属性(获取非行间样式)

1.设置css样式

节点.style.css属性 = ’属性值‘

节点.style.cssText = 'width:300px;height:300px;background:red;'

2.获取非行间样式

getComputedStyle(元素,null)[attr] 存在兼容(window下的方法)

元素.currentStryle[attr] IE

封装获取非行间样式的方法:

function getStyle(ele,attr){
   /*
  判断浏览器支持哪个方法
  //方法一:
  if(ele.currentStyle){
  return ele.currentStyle[attr];
  }else{
  return getComputedStyle(ele,null)[attr];
  }
  //方法二:
  return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele,null)[attr];
  */
   return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele,null)[attr];
}
console.log(getStyle(div,'width')); //300px
console.log(getStyle(div,'height'));  //300px

09.js改变轮播图圆点样式

<style>
*{
       margin:0;
       padding:0;
  }
section{
       width:500px;
       height:30px;
       margin:0 auto;
  }
div{
       width:30px;
       height:30px;
       margin:0 10px;
       border-radius:50%;
       background:orange;
       float:left;
  }
.active{
       background:blue;
  }
</style>
<section>
   <div class="active"></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</section>
<script>
//获取所有的div
   var aDiv = document.querySelectorAll('section div');
//给每一个div绑定鼠标滑过的事件(循环遍历)
for(var i = 0 ; i < aDiv.length ;i++){
       aDiv[i].onmouseover = function(){
           //每当鼠标滑过的时候,先把所有的div的active都取消
           for(var j = 0 ; j < aDiv.length ; j++){
               aDiv[j].className = '';
          }
           //鼠标滑过,改变它的样式,给它添加类名(使用className可以设置类名)
           this.className = 'active';
      }
  }
</script>

10.点击元素获取当前元素的下标

<style>
div{
width:100px;
height:100px;
background:orange;
}
</style>
<section>
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
</section>
<script>
   var aDiv = document.querySelectorAll('section div');
//绑定单击事件
for(var i = 0 ; i < aDiv.length ; i++){
       /*
      aDiv[i].onclick = function(){
          console.log(i); //5 泄露
      }
      循环:变量的泄露!!! 在循环里面,循环变量不会保存在循环的代码里面
      */
       //为每一个div添加一个属性,把i保存在属性里面
       aDiv[i].index = i;
       aDiv[i].onclick = function(){
           //打印下标
           console.log(this.index);
      }
  }
</script>

自定义属性,innerHTML,outerHTML,dom节点的获取,className,tagName,更改或者是获取css属性的更多相关文章

  1. JavaScript DOM节点操作总结

    节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...

  2. js原生获取元素的css属性

    习惯了用jQuery的css()的方法获取元素的css属性,突然不用jquery了,当要获得元素的css时候,我瞬间停顿了一下,咦?咋获取元素的css值?比如获取元素的width.是这样么?docum ...

  3. js原生获取css属性

    原文参考http://blog.csdn.net/lzding/article/details/46317777 1.写在dom上的属性,内联样式 <div id="box" ...

  4. JavaScript获取HTML DOM节点元素详解(转)

    在Web运用程序特别是Web 2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要处理的疑问. 51CTO推荐阅读:JavaScript DOM文档 ...

  5. jacascript DOM节点——节点获取与选择器API

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM 操作必须等待 HTML 加载完毕之后,才可以获取节点:有两种方法: 把 script 标签放到代码 ...

  6. DOM节点中获取文本易混淆的属性

    DOM 节点中对于获取文本易混淆的属性,innerText, innerHTML, outerHTML, textContent, nodeValue. 一个实例: <!DOCTYPE html ...

  7. 通过DOM节点操作来获取表单信息

    这是之前突发奇想地用dom节点的关系来操作表单的故事.. 事情的经过是这样的,大概就是一个平台注册后有留言功能,管理员登录之后可以对这些留言进行回复.这个页面呢,就是通过foreach获取到数据库里的 ...

  8. 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...

  9. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

随机推荐

  1. 新手的java学习建议

    前言 进入IT领域,就像进入大海—浩瀚而广阔.然而,它又很容易让人迷茫,不知所措.所以,在IT的海洋中,找好一艘船特别重要,这艘船带你前进.减少迷失.这艘船或许是一个人,或一本书,又或许是一篇文章. ...

  2. Nginx编译安装模块(非重装)

    假如原已经安装好的Nginx,现在需要添加一个未被编译安装的ssl模块,我们该怎么办呢?重装,还是有其他的办法?当然不需要重装的,下面我们看下如何实现的. 1.cd到Nginx解压过后的目录[root ...

  3. 【原创实践】U大师启动安装windows XP

    1:使用U大师3.0版制作启动U盘,拷贝windows xp或者win7的原版安装iso(zh-hans_windows_xp_professional_with_service_pack_3_x86 ...

  4. sql语句优化:尽量使用索引避免全表扫描

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  5. Mysql5.6对时间的处理精度问题

    在业务处理需要使用new Date()来更新时间类型的字段时,数据库会对时间类型进行四舍五入处理,如果new Date()的更新时间与原时间间隔太短,数据库进行四舍五入之后,认为值没有变化,从而不更新 ...

  6. case when多条件

    SELECT label ,label3 ,lon_cen ,lat_cen ,lon3 ,lat3 ,antenna_height ,horizontal_angle ,CASE WHEN roun ...

  7. SpringMVC源码分析6:SpringMVC的视图解析原理

    title: SpringMVC源码分析6:SpringMVC的视图解析原理 date: 2018-06-07 11:03:19 tags: - SpringMVC categories: - 后端 ...

  8. springboot中的外界jar的引入:

    <!-- 小米推送jar配置Start --> <dependency> <groupId>com.xiao.mi.push</groupId> < ...

  9. 【翻译】无需安装Python,就可以在.NET里调用Python库

    原文地址:https://henon.wordpress.com/2019/06/05/using-python-libraries-in-net-without-a-python-installat ...

  10. c++中strcmp,strcopy函数的使用

    1.strcmp(str1,str2) C/C++函数,比较两个字符串, 设这两个字符串为str1,str2,若str1==str2,则返回零:若str1<str2,则返回负数:若str1> ...