DOM读取和修改节点对象属性
一、获取和修改元素间的内容(3种)
1.innerHTML 获得/设置元素开始标签和结束标签之间的html原文
固定套路：1.删除父元素下所有子元素：parent.innerHTML="";
2.批量替换父元素下所有子元素：parent.innerHTML="所有子元素标签组成的html"
2.textContent/innerText: 获得开始标签和结束标签之间的文本(去除标签)
textContent 是DOM标准；innerText 是IE8；
3.文本节点内容
nodeValue
示例：读取并修改元素内容
<!DOCTYPE HTML>
<html>
<head>
<title>读取并修改元素的内容</title>
<meta charset="utf-8" />
<style>
select{width:100px;height:85px;}
div{display:inline-block;width:50px}
</style>
<script src="js/2_2.js"></script>
</head>
<body>
<!--假设两个select元素，分别保存备选地区列表和选中地区列表
实现两选择框之间选项的交换：
包括：当个选中项左右移动
多个选中项左右移动
全左移和全右移
要求：两个select中的地区都要按照名称首字母排序
-->
<select id="unsel" size="5" multiple>
<option>Argentina</option>
<option>Brazil</option>
<option>Canada</option>
<option>Chile</option>
<option>China</option>
<option>Cuba</option>
<option>Denmark</option>
<option>Egypt</option>
<option>France</option>
<option>Greece</option>
<option>Spain</option>
</select>
<div>
<button onclick="move(this)">>></button>
<button onclick="move(this)">></button>
<button onclick="move(this)"><</button>
<button onclick="move(this)"><<</button>
</div>
<select id="sel" size="5" multiple>
</select>
</body>
</html>
//定义两个数组：
// unsel:存所有未选中的国家(左边的)
// sel:存所有选中的国家(右边)
var unsel=null;
var sel=null; //封装$
window.$=function(selector){
return document.querySelectorAll(selector);
}
//当页面加载后
window.onload=function(){
/*初始化unsel "</option>"*/
unsel=$("#unsel")[0].innerHTML.trim().slice(8,-9).split(/<\/option>\s*<option>/);
//console.log(unsel);
sel=[]; }
/**/
function move(btn){
//如果btn的内容是>>
if (btn.innerHTML==">>") //btn.textContent==">>" textContent会对字符进行转义
{
//将unsel中的所有元素，拼入sel，对新数组排序
sel=sel.concat(unsel);
sel.sort();
unsel=[];
//console.log(sel);
}else if (btn.innerHTML=="<<")
{//如果btn的内容是<<
unsel=unsel.concat(sel);
unsel.sort();
sel=[];
//console.log(unsel);
}else if (btn.innerHTML==">")
{//如果btn的内容是>
var opts=$("#unsel option");
//option对象的selected属性==>true/false
//获得unsel下的所有option对象
console.log(opts.length);
//遍历所有的option
for (var i=opts.length-1; i>=0; i--)
{
//只要当前option的selected有效
if (opts[i].selected)
{
//使用splice删除unsel中的相同位置的元素，将删除的元素压入sel中
sel.push(unsel.splice(i,1)[0]);
//如果在遍历过程中会影响到下标，建议从后向前遍历
}
}
//遍历结束，对sel进行排序
sel.sort(); }else if (btn.innerHTML=="<")
{//如果btn的内容是<
var opts=$("#sel option");
//console.log(opts.length);
for(var i=opts.length-1; i>=0; i--){
if(opts[i].selected){
unsel.push(sel.splice(i,1)[0]);
}
}
unsel.sort();
}
//更新界面
updateSel();
}
function updateSel(){
//专门跟新两个select元素的内容
//
$("#unsel")[0].innerHTML="<option>"+unsel.join("</option><option>")+"</option>";
$("#sel")[0].innerHTML="<option>"+sel.join("</option><option>")+"</option>";
}
二、获取、添加、删除、修改元素属性
getAttribute("属性名") 获取元素对象指定特性的值
setAttribute(name, value) 设置元素对象指定特性的值
removeAttribute('属性名') 删除元素对象上的指定特性
hasAttribute('属性名') 判断元素对象是否包含指定特性
attributes() 获取元素对象指定特性的集合
1.读取属性(4种)
element.attributes[下标].value
var value=element.attributes['属性名']
element.getAttributeNode('属性名').value
var value=element.getAttribute("属性名")
2.修改属性(2种)
element.setAttribute(name, value);//IE8不支持 只能：element.attributes['属性名']=value
element.setAttributeNode(attrNode);//属性可以是属性节点
3.移除属性(2种)
element.removeAttribute('属性名');
element.removeAttributeNode(attrNode);
4.判断元素是否包含属性(2种)
element.hasAttribute('属性名') //true或false
element.hasAttributes( );
5.Property(属性) vs Attribute(HTML特性)
Property: 对象在内存中存储的属性 可以用 . 访问
Attribute: 元素对象在开始标签中定义的HTML属性和自定义属性
访问HTML标准属性时，二者完全一致。如果访问自定义属性时，只能用Attribute。
示例：修改元素属性 模拟摇号排序
<!DOCTYPE HTML>
<html>
<head>
<title>修改元素的属性</title>
<meta charset="utf-8" />
<script src="js/3_1.js"></script>
</head>
<body>
<!--1. 使用自定义属性实现摇号排名-->
<ul>
<li>Eric</li>
<li>Scott</li>
<li>Jerry</li>
<li>Tom</li>
<li>Rose</li>
<li>John</li>
<li>Smith</li>
<li>Andy</li>
</ul>
</body>
</html>
window.onload=function(){
//获得ul下所有li
var lis=document.querySelectorAll("ul li");
var nums=[];
//反复生成随机数，nums.length<lis.length
// 在1到lis.length之间取1个随机正数n
// 利用nums的indexOf方法，查找是否包含n
// 如果不包含，将n压入nums中
while (nums.length<lis.length)
{
var n=parseInt(Math.random()*(lis.length-1+1)+1);
if(nums.indexOf(n)==-1){
nums.push(n);
}
}
console.log(nums);
//将nums中的数字，保存到每个li的data-i自定义属性中
//遍历nums
// 将nums中当前的数字，设置到相同位置的li中的data-i特性上
for (var i=0; i<nums.length; i++)
{
lis[i].setAttribute("data-i",nums[i]);803490
}
//将类数组最想转化为标准数组对象
lis=Array.prototype.slice.call(lis);
//尽让li的data-i特性相减
lis.sort(function(a,b){
return a.getAttribute("data-i")-b.getAttribute("data-i");
//return a.dataset.i-b.dataset.i;//HTML5中读取自定义属性; "data-xxx"-->dataset的集合中，属性名xxx
});
//清空所有旧li
ul=document.querySelector("ul");
ul.innerHTML="";
for (var i=0; i<lis.length; i++)
{
//将li追加到ul中
ul.appendChild(lis[i]);
}
console.log(lis);
}
三、获取和修改元素的样式
1.获取或修改内联样式：style对象
设置：style.属性名="值";
移出(2种)：
style.属性名="";
style.removeProperty("CSS属性名")
//仅能操作style属性中定义的内联样式,无法获取或设置样式表中的样式
2.获取或修改内联样式表中的属性(3步)
1. 获得要修改的样式表对象：
var sheet=document.styleSheets[i];//styleSheets:获得当前网页的所有样式表对象
2. 获得要修改的cssRule：
cssRule：样式表中一个大括号就是一个cssRule对象
var cssRule=sheet.cssRules[i];//cssRule可能嵌套。
3. 获得cssRule中的属性
cssRule.style.属性名
DOM读取和修改节点对象属性的更多相关文章
- C#通过DSOFile读取与修改文件的属性
搜了一圈用C#读取与修改文件属性的文章,结果几乎找不到- -: 偶然间看到一个DSOFile工具,然后找到了对该工具进行详细讲解的一篇文章:<DSOfile,一个修改windows系统文件摘要的 ...
- 关于Javascript中通过实例对象修改原型对象属性值的问题
Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值. 基本类型的数据值有5种:null.undefined.number.boolean和string. 引用类型的数据值往大的 ...
- C#操作XML方法：新增、修改和删除节点与属性
一 前言 先来了解下操作XML所涉及到的几个类及之间的关系 如果大家发现少写了一些常用的方法,麻烦在评论中指出,我一定会补上的!谢谢大家 * 1 XMLElement 主要是针对节点的一些属性进行操 ...
- JavaScript--DOM修改元素的属性
一旦你获得了要修改的元素,可以有2种方式,来读取和修改它的属性:一种老的方式(它被更多的用户代理所支持)和一种新的DOM方法的方式.老的和新的用户代理都允许你以对象属性的方式获取和设置元素的属性. 先 ...
- 使用DOM解析XML文件，、读取xml文件、保存xml、增加节点、修改节点属性、删除节点
使用的xml文件 <?xml version="1.0" encoding="GB2312" ?> <PhoneInfo> <Br ...
- DOM节点中属性nodeName、nodeType和nodeValue的区别 < Delphi >
http://msdn.microsoft.com/zh-cn/library/vstudio/hf9hbf87.aspx <?xml version="1.0"?> ...
- DOM简介及节点、属性、查找节点的方法
DOM(Document Object Modle) 操作文档的编程接口DOM定义了表示和修改文档的方法,不能修改css样式表,在js中使用DOM方法改变元素的css样式,实质上是在元素上添加行间样式 ...
- DOM操作节点对象集合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- DOM创建和删除节点、HTML DOM常用对象[转]
创建和删除节点:——核心DOM 1. 创建单个元素节点:3步: 1. 创建空元素节点对象: var elem=document.createElement("标 ...
随机推荐
- linux命令大全（转载）
在搭建openstack时遇到问题,导致上网查询相关信息.找到一篇不错的文章,希望对大家有用.下附地址: http://blog.csdn.net/junbujianwpl/article/detai ...
- CSS实现简易的轮播图
<html> <head> <meta charset="UTF-8"> <title></title> <sty ...
- 一丶人生苦短，我用python【第一篇】
1 解释器 解释器(英语:Interpreter),又译为直译器,是一种电脑程序,能够把高级编程语言一行一行直接转译运行.解释器不会一次把整个程序转译出来,只像一位"中间人",每次 ...
- fiddler之弱网测试
今天就说一下如何使用fiddler做弱网测试 1.首先要把手机的代理打开,这就不多讲了哈,不懂得话请点传送门:https://www.cnblogs.com/fuxinxin/p/9146693.ht ...
- 教程｜要想Hadoop能够运行Python程序，就要会MRJob
首先 要想Hadoop能够很流畅的Python程序,学习mrjob可能是最直接.最简单的方法了 你甚至都不要按安装部署Hadoop集群. mrjob拥有很多优秀的特性比如: 支持多步骤的MapRedu ...
- PAT——乙级1022：D进制的A+B &乙级1037：在霍格沃茨找零钱
1022 D进制的A+B (20 point(s)) 输入两个非负 10 进制整数 A 和 B (≤230−1),输出 A+B 的 D (1<D≤10)进制数. 输入格式: 输入在一行中依 ...
- 搭建高可用的Eureka注册中心
搭建高可用的Eureka注册中心 一.搭建高可用的Eureka的作用 当服务器因种种原因导致Eureka注册中心(后面简称Eureka)服务当机(服务器跪了,异常关闭停止服务).这样就会影响到整个业务 ...
- [leetcode-655-Print Binary Tree]
Print a binary tree in an m*n 2D string array following these rules: The row number m should be equa ...
- LCA（最近公共祖先）——离线 Tarjan 算法
tarjan算法的步骤是(当dfs到节点u时):1 在并查集中建立仅有u的集合,设置该集合的祖先为u1 对u的每个孩子v: 1.1 tarjan之 1.2 合并v到父节点u的集合,确保集合的祖 ...
- beta版本冲刺七
目录 组员情况 组员1:胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:恺琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:何宇恒 组员11:刘一好 展示组内最新 ...