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("标 ...
随机推荐
- sql插入查询出的数据，主键递增
INSERT INTO C_DPRECORD SELECT (SEQ_C_DPRECORD.NEXTVAL ) AS ID, DEV_ID, DEV_CHNNUM, DEV_NAME, DEV_CHN ...
- 用intellij Idea加载eclipse的maven项目全流程
eclipse的maven项目目录 全流程 加载项目 打开intellij Idea file -> new -> module from existing Sources 选择.pom ...
- webapi到处excel
最近项目用的webapi前几天做了个导出excel功能,给大家分享下,自己也记录下... 在用的过程中,可以直接请求就可以得到下载的excel文件,在实际的项目中可以通过js打开新页面,encodeU ...
- Eclipse AmaterasUML 安装及使用
AmaterasUML 对于我来说,是一个非常好用的UML插件. 用它来将我写过的一些Android程序进行逆工程非常好用,只不过,不能体现出包,这是一个小小的遗憾. 这个是它的主页地址:http:/ ...
- Bugku 速度要快
import requests import base64 url="http://123.206.87.240:8002/web6/" res=requests.get(url) ...
- 《python核心编程第二版》第4章习题
4–1. Python 对象.与所有 Python 对象有关的三个属性是什么?请简单的
- 第十一篇 Python函数之定义&形参&实参&位置参数&关键字参数&可变长参数&默认参数
函数的定义:函数是为了完成某一特定功能的,函数是逻辑结构化和过程化的一种编程方法 函数的定义格式,函数一般都是有返回值的 #语法 #函数名要能反映其意义 def 函数名(参数1,参数2,参数3,... ...
- Kubernetes实战 高可用集群搭建，配置，运维与应用
1-1 K8S导学 1-2 搭建K8S集群步骤和要点介绍 1-3 搭建三节点Ubuntu环境 1-4 安装容器引擎 1-5 下载Kubeadm.node组件和命令行工具 1-6 向集群中加入worke ...
- 阿里云SLB上http强制跳转到https问题处理
背景: 最近一客户有一个需求,需要将外网所有http访问请求强制跳转到https,公网出口使用阿里云SLB,证书放在SLB上,SLB后端实例为ECS(webserver)web服务使用nginx, 网 ...
- HDU 4747 Mex（线段树）（2013 ACM/ICPC Asia Regional Hangzhou Online）
Problem Description Mex is a function on a set of integers, which is universally used for impartial ...