DOM基础

最新推荐文章于 2024-11-01 13:37:40 发布

weixin_33928467

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量95

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/Knowledge-is-infinite/p/10885861.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>列表各行换色</title>
<style type="text/css">
.green{
border: 2px solid red;
}
.blue{
background: blue;
}
.yellow{color: yellow}
</style>
</head>
<body>
<h3>前端知识点</h3>
<ul id="listWeb" class="green">
<li>JavaScript基础</li>
<li>CSS基础</li>
<li>HTML基础</li>
<li>CSS3</li>
<li>HTML5</li>
<li>jQuery</li>
<li>Bootstrap</li>
<li>WebApp</li>
</ul>
<script>
var lis=document.getElementsByTagName('li');//获取li对象数组。
for (var i=0,len=lis.length; i<len; i++) {
if (i%2===1) {
lis[i].style.backgroundColor="#3ff";//奇数行背景颜色为靛色
}else{
lis[i].style.backgroundColor="#ff0"//偶数行背景颜色为黄色
}
}
///下面注意
var ul=document.getElementById('listWeb');//获取Ul对象
// ul.style.class="blue";//这样写是错误的。
ul.className="blue";//这里是设置了对象ul的类名，会覆盖原来的类名。原来的样式就会消失。
console.log(ul.className);//这样是读取该对象的类名。
console.log(ul.innerHTML);//获取ul对象标签内的所有内容。（如果有子标签和孙子标签都显示，且显示style样式）
console.log(ul.attributes.class);//获取对象的类名
console.log(ul);//可以在火狐浏览器中查看对象所有属性。
</script>
</body>
</html>

============

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>innerHTML</title>
<style type="text/css">
.red{color:red;}
</style>
</head>
<body>
<h3>古文推荐</h3>
<ul>
<li>西游记</li>
<li>红楼梦</li>
<li>三国演义</li>
<li>聊斋志异</li>
<li>论语</li>
<li>孟子</li>
<li>中庸</li>
<li>大学</li>
</ul>
<script>
var lis=document.getElementsByTagName('li');//获取li数组。返回数组对象
for (var i = 0; i < lis.length; i++) {
if (i%2===1) {
lis[i].style.color="#f00";//奇数行字体颜色为红色
}else{
lis[i].style.color="#000";//偶数行字体颜色为黑色
}
lis[i].innerHTML="第"+(i+1)+"名："+lis[i].innerHTML;//给li的文本节点添加内容，修改内容。
}
</script>
</body>
</html>

=========

==============

获取元素属性以及style里面的属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> innerHTML </title>
</head>
<body>

<div id="div" class="red" align="center" data-type="title" dataTitle="one">前端技术</div>
<input type="text" value="我爱你" name="name" id="txt" dataType="name">
<script>
//========两种方式获取元素对象的属性值==========
//1，获取元素自带属性值 element.属性;
//2，获取自定义属性值 element.getAttribute("属性");

var div=document.getElementById('div');//获取div对象
// -------获取元素对象自带的属性值：元素.属性 --------
//该方法只能获取元素自带的属性，自定义和class是无法获取的。如果强行获取都显示未定义。
// console.log(div.id);//输出div的id属性值。
// console.log(div.align);//输出div的align属性值。
// console.log(div.class);//显示未定义 undefined
// console.log(div.className);//显示：red .这才是正确获取className的方式。
// console.log(div.dataTitle);//显示未定义 undefined
// console.log(div.data-type);//data-type，有一个连接符，直接报错。

//该方法只能获取元素自带的属性，自定义和class是无法获取的。如果强行获取都显示未定义。
var input=document.getElementById("txt");
console.log(input.type);//显示：text
console.log(input.value);//显示：我爱你
console.log(input.name);//显示：name
console.log(input.id);//显示：txt
console.log(input.dataType)//显示：未定义 undefined 不是元素自带的

//------获取自定义属性值：div.getAttribute("data-type")-------
//自定义属性通常都是以data开头。如：data-type，data-index等等。
// console.log(div.getAttribute("class"));//等价于：div.className 获取对象属性值
// console.log(div.getAttribute("data-type"));//获取自定义属性值
// console.log(div.getAttribute("dataTitle"));//获取自定义属性值

//========设置元素属性值==========
//element.setAttribute(属性名称,属性值);
var div=document.getElementById("div");//获取div对象
var right=div.setAttribute("align","right");//设置 algin:"right";
console.log(div.getAttribute("align"));//显示：right
var def=div.setAttribute("data-type","LoveYou!");//设置data-type:"LoveYou!"
console.log(div.getAttribute("data-type"));//显示：LoveYou!
var add=div.setAttribute("AddYou","fuckYou!");//添加属性，点击审查元素即可查看添加了该属性。且会发现属性：AddYou变成了全部小写，浏览器默认会把属性名称的所有大写转换成小写字母，而属性值的则不变。

//=======获取,设置style属性,style属于标签内的属性=========
//1，element.getAttribute("属性名称"); 获取属性值。
//2，element.style.setAttribute("属性名称","属性值"); 设置属性值
//--------获取，设置style属性内部的值---------
//1，element.style.属性名称获取style指定属性的值。
//2，element.style.属性名称="属性值" 设置style指定的属性值、如没有该属性则是添加该属性的操作。

var lis=document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
if (i%2===1) {
lis[i].style.backgroundColor="orange";//在style里面的全部使用ele.style.属性名="属性值" (设置属性值) 或者 ele.style.属性名（获取属性值）
//lis[i].setAttribute("backgroundColor","orange");//只获取标签内部的属性，style属于标签内部属性。
console.log(lis[i].getAttribute("style"));//style属于标签内部属性
}else{
lis[i].style.backgroundColor="#ff0";
}
}

//删除属性 ele.removeAttribute("属性名称");
var div =document.getElementById("div");
div.removeAttribute("data-type");//删除div对象的 data-type 属性，可以在页面中审查元素，该属性已被删除。
div.removeAttribute("addyou");//删除div对象的 addyou 属性。在页面审查元素，该属性已经被删除。
</script>
</body>
</html>

==============

转载于:https://www.cnblogs.com/Knowledge-is-infinite/p/10885861.html