您的位置：首页 > Web前端 > JavaScript

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

2015-12-01 15:53 681 查看

(《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
9c2a
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.csdn.net/detail/qq_17615475/9351235

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航