zoukankan html css js c++ java

Alter the structure of web pages with JavaScript

Most of the DOM methods you've seen so far are useful for identifying elements.

Both getElementById and getElementByTagName allow you to quickly and easily

target specific element nodes in a document.

These elements can then be manipulated using methods and properties like

setAttribute or nodeValue. Thats how the image gallery works.

As you can see, This is the way that the majority of JavaScript work. The structure of the web

page is created with markup. JavaScript is then used to change some of the details without

altering the underlying structure.

But it is also possible to use JavaScript to change the structure and contents of a web page.

There are some DOM methods that can alter the structure of a web page by creating new elements

and modifying existing ones.

A briefly review a couple techniques that developers have used in the past :

document.write && innerHTML

document.write :

The major drawback to using document.write is that it goes against the principle of unobtrusive JavaScript

innerHTML

The innerHTML property can be quite useful when you want a quick and easy way to insert a chunk of HTML into a

document. Unfortunately, innerHTML doesnt return any references to the content you insert .

DOM methods

According to the DOM, a document is a tree of nodes. If you want to add to this tree, you need to insert new nodes.

If you want to add markup to a document, you need to insert element nodes.

createElement :

document.createElement( nodeName )

eg : var para = document.createElement( "p" );

appendChild :

The simplest way to insert a newly created node into the node tree of a document is to make it a child of an existing

node in the document .

parent.appendChild( child ) ;

eg : var para = document.createElement("p");

var testdiv = document.getElementById("testdiv");

testdiv.appendChild( para ) ;

createTextNode :

The node you have created is an empty paragraph element.

If you want to put some text into that paragraph, you need to create a text node

document.createTextNode( text );

eg : var para = document.createElement("p");

var txt = document.createTextNode("Hello world");

para.appendChild( txt );

var testdiv = document.getElementById("testdiv");

testdiv.appendChild( para );

Inserting a new element before an existing one :

There is a DOM method called insertBefore. you can use it to insert a new element before an existing element.

Here's the syntax :

parentElement.insertBefore ( newElement, targetElement )

eg : var gellery = document.getElementById("imageallery") ;

gallery.parentNode.insertBefore(placeholder, gallery) ;

Inserting a new element after an existing one :

eg :

function insertAfter( newElement, targetElement ) {
        var parent = targetElement.parentNode ; 
        if( parent.lastChild == targetElement ) {
                parent.appendChild( newElement );
        } else {
                parent.insertBefore(newElement, targetElement.nextSibling);
        }
}

The next node after the target element is the nextSibling property of the target element.

You can use this script code in the furture as the expandtion.

Then follows the finished image gallery :

/***　　　　　　index.html 　　　　　　***/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="styles/layout.css" media="screen">
</head>
<body>

    <h1>Snapshiots</h1>
    <ul id="imagegallery">
        <li>
            <a href="images/fireworks.jpg" title="A fireworks display">
                <img src="images/thumbnail_fireworks.jpg" alt="Fireworks">
            </a>
        </li>
        <li>
            <a href="images/coffee.jpg" title="A cup of black coffe">
                <img src="images/thumbnail_coffee.jpg" alt="Coffee">
            </a>
        </li>
        <li>
            <a href="images/rose.jpg" title="A red, red rose">
                <img src="images/thumbnail_rose.jpg" alt="Rose">
            </a>
        </li>
        <li>
            <a href="images/bigben.jpg" title="The famous clock">
                <img src="images/thumbnail_bigben.jpg" alt="Big Ben">
            </a>
        </li>
    </ul>

    <script type="text/javascript" src="scripts/showPic.js"></script>
</body>
</html>

View Code

/***　　　　　　showPic.js　　　　　　***/

/**
 * Created by Administrator on 9/9/2015.
 */

/*
 you can use this function to count how many children nodes the body element contains
 */
function countBodyChildren() {
    var body_element = document.getElementsByTagName("body")[0];
    alert(body_element.nodeType);
    alert( body_element.childNodes.length );
}

function addLoadEvent(func) {
    var oldonload = window.onload;
    if( typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

function insertAfter(newElement, targetElement) {
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

function preparePlaceholder() {
    if( !document.createElement )return false;
    if( !document.createTextNode ) return false;
    if( !document.getElementById ) return false;
    if( !document.getElementById("imagegallery")) return false;

    var placeholder = document.createElement("img");
    placeholder.setAttribute("id", "placeholder");
    placeholder.setAttribute("src", "images/placeholder.gif");
    placeholder.setAttribute("alt", "my image gallery");
    var description = document.createElement("p");
    description.setAttribute("id", "description");
    var desctext = document.createTextNode("Choose an image");
    description.appendChild(desctext);

    var gallery = document.getElementById("imagegallery");
    insertAfter(placeholder, gallery);
    insertAfter(description, placeholder);
}


function prepareGallery() {
    if( !document.getElementsByTagName )  return false;
    if( !document.getElementById ) return false;
    if( !document.getElementById("imagegallery") ) return false;

    var gallery = document.getElementById("imagegallery");
    var links = gallery.getElementsByTagName("a");
    for(var i=0; i<links.length; i++) {
        links[i].onclick = function() {
            return showPic(this) ? false : true;
        }
    }
}


function showPic(whicPic) {
    if( !document.getElementsByTagName ) return false;
    if( !document.getElementById("placeholder") ) return false;

    var source = whicPic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src", source);

    if(document.getElementById("description")) {
        var text = whicPic.getAttribute("title") ? whicPic.getAttribute("title") : 3;
        var description = document.getElementById("description");
        description.firstChild.nodeValue = text;
    }
    return true;
}

addLoadEvent( preparePlaceholder );
addLoadEvent( prepareGallery );

View Code

/***　　　　　　layout.css　　　　　　***/

body{
    font-family: "Helvetica", "Arial", serif;
    color: #333;
    background-color: #ccc;
    margin: 1em 10%;
}

h1{
    color: #333;
    /*background-color: #777;*/
}

a{
    color: #c60;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}

ul{
    padding: 0;
}

li{
    float: left;
    padding: 1em;
    list-style: none;
}

img {
    display: block;
    clear: both;
}

View Code

查看全文

相关阅读:
C#中将全部代码一次性折叠
 C#中图片单击旋转事件
 块参照重命名
 补强圈设计
 c# winform 按名称取得控件
 获得某控件的父控件（容器）中的所有控件
 回车键当Tab键使用
 替换CAD中原有命令为开发人员自己开发的命令的方法
 窗体设置
 判断控件的tag是否为空的方法

原文地址：https://www.cnblogs.com/beyond-Acm/p/4797900.html