<html5+css3+js>文档对象模型，对元素的各种操作

本文链接：https://blog.youkuaiyun.com/qq_17615475/article/details/50130611

(《javascript&jquery交互式web前端开发》学习记录)

对元素的各种操作代码如下：

html5:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>get element</title>
<link rel="stylesheet" href="get-element.css" />
</head>

<body>
<div id="page">
	<h1 id="header">List King</h1>
	<h2>Buy groceries</h2>
	<ul>
		<li id="one" class="hot"><em>fresh</em> figs</li>
    	<li id="two" class="hot">pine nuts</li>
    	<li id="three" class="hot">honey</li>
    	<li id="four">balsamic vinegar</li>
   </ul>
   <div id="scriptResults"></div>
</div>
   <script src="get-element.js"></script>
</body>
</html>

javascript:

//get element by id
/*var el=document.getElementById('one');
el.className='cool';
*/


//get element by classname
/*var elements=document.getElementsByClassName('hot');
if(elements.length>2){
	var el=elements[2];
	el.className='cool';
}*/


//get element by tagname
/*var elements=document.getElementsByTagName('li');
if(elements.length>0){
	var el=elements[0];
	el.className='cool';
}*/


//get element by query selector, returns the first match
/*var el=document.querySelector('li.hot');
el.className='cool';*/
//get element by query selector, returns a node list
/*var els=document.querySelectorAll('li.hot');
els[1].className='cool';*/


//loop through node list
/*var hotItems=document.querySelectorAll('li.hot');
if(hotItems.length>0){
	for(var i=0;i<hotItems.length;i++){
		hotItems[i].className='cool';
	}
}*/


//select the starting point and its siblings
/*var startItem=document.getElementById('two');
var prevItem=startItem.previousSibling;
var nextItem=startItem.nextSibling;
prevItem.className='complete';
nextItem.className='cool';*/


//select the starting point and find its children
/*var startItem=document.getElementByTagName('ul')[0];
var firstItem=startItem.firstChild;
var lastItem=startItem.lastChild;
firstItem.setAttribute('class','complete');
lastItem.setAttribute('class','cool');*/


//update the list item with nodeValue
/*var itemTwo=document.getElementById('two');
var elText=itemTwo.firstChild.nodeValue;
elText=elText.replace('pine nuts','kale');
itemTwo.firstChild.nodeValue=elText;*/


//update the list item with textContent
/*var firstItem = document.getElementById('one');
var showTextContent = firstItem.textContent;
var showInnerText = firstItem.innerText;
var msg = '<p>textContent: ' + showTextContent + '</p>';
msg += '<p>innerText: ' + showInnerText + '</p>';
var el = document.getElementById('scriptResults');
el.innerHTML = msg;
firstItem.textContent = 'sourdough bread';*/


//update the text and tag with innerHTML
/*var firstItem=document.getElementById('one');
var itemContent=firstItem.innerHTML;
firstItem.innerHTML='<a href=\"http:example.org\">'+itemContent+'</a>';*/


//create a new element and add to DOM tree
/*var newEl = document.createElement('li');
var newText=document.createTextNode('quinoa');
newEl.appendChild(newText);
var position=document.getElementsByTagName('ul')[0];
position.appendChild(newEl);*/


//remove elements from a DOM tree
/*var removeEl=document.getElementsByTagName('li')[3];
var containerEl=removeEl.parentNode;
containerEl.removeChild(removeEl);*/


//get the value of an attribute
/*var firstItem=document.getElementById('one');
if(firstItem.hasAttribute('class')){
	var attr=firstItem.getAttribute('class');
	var el=document.getElementById('scriptResults');
	el.innerHTML='<p>The first item has a class name:'+attr+'</p>';
}*/


//create an attribute for an element
/*var firstItem=document.getElementById('one');
firstItem.className='complete';
var fourthItem=document.getElementsByTagName('li').item(3);
fourthItem.setAttribute('class','cool');*/


//remove attributes
/*var firstItem=document.getElementById('one');
if(firstItem.hasAttribute('class')){
	firstItem.removeAttribute('class');
}*/


//1. add one element in the begining of the list and one in the end
//2. set 'class' attribute for all elements in the list
//3. add the number of list elements in the header
var list=document.getElementsByTagName('ul')[0];

var newItemLast=document.createElement('li');
var newTextLast=document.createTextNode('cream');
newItemLast.appendChild(newTextLast);
list.appendChild(newItemLast);

var newItemFirst=document.createElement('li');
var newTextFirst=document.createTextNode('kale');
newItemFirst.appendChild(newTextFirst);
list.insertBefore(newItemFirst,list.firstChild);


var listItems=document.querySelectorAll('li');

var i;
for(i=0;i<listItems.length;i++){
	listItems[i].className='cool';
}

var heading=document.querySelector('h2');
var headingText=heading.firstChild.nodeValue;
var totalItems=listItems.length;
var newHeading = headingText + '<span>' + totalItems + '</span>';
heading.innerHTML=newHeading;

css:

@charset "UTF-8";
/* CSS Document */

body{
	background:#000000;
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	margin:0;
	padding:0;
}
#page{
	background-color:#3C3A3A;
	margin:0 auto 0 auto;
	padding:0;
	max-width:480px;
}
h1{
	background:url(kinglogo.png) no-repeat center center;
	text-align:center;
	text-indent:-1000%;
	overflow:hidden;
	height:75px;
	line-height:75px;/*设置行间距，间距为lineheight-fontsize*/
	width:117px;
	margin:0 auto;
	padding:30px 10px 20px;
}
h2{
	color:#FFFFFF;
	font-size:200%;
	text-align:center;
	text-transform:uppercase;/*控制文本大小写，capitalize每个单词以大写字母开头，lowercace全小写字母*/
	margin:0 0 20px 0;
	letter-spacing:.2em;/*设置字间距为0.2倍fontsize*/
}
ul{
	padding:0;
}
li{
	display:block;
	color:#FFFFFF;
	background:#F39D0F;
	padding:15px;
	border-top:1px solid #FFC877;
	border-bottom:1px solid #C78426;
	font-size:150%;
	text-shadow:2px 2px 1px #545454;
}
.hot{
	background:#F6474A;
	border-top:1px solid #F78F91;
	border-bottom:1px solid #C62729;
}
.cool{
	background:#8ACE8C;
	border-top:1px solid #D9F7D0;
	border-bottom:1px solid #6B9F4B;
}
.complete{
	background:#7D7D7D url(icon-trash.png) no-repeat right;
	border-top:1px solid #C6C5C5;
	border-bottom:1px solid #353535;
}
p{
	color:#2B2B2B;
	background-color:#FFFFFF;
	text-align:center;
	border-radius:5px;
	padding:10px;
	margin:20px auto;
	max-width:80%;
	min-width:20%;
}
#scriptResults{
	padding-bottom:4px;
}
li a{
	color:#FFFFFF;
	text-decoration:none;
	background:url(icon-link.png) no-repeat right;
	padding-right:40px;
	
}
h2 span{
	font-size:50%;
	text-align:center;
	background-color:#000000;
	display:inline-block;
	padding-left:5px;
	border-radius:50%;
	position:relative;
	bottom:5px;
}

代码下载： http://download.youkuaiyun.com/detail/qq_17615475/9351235