欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

html dom  

程序员文章站 2024-03-16 11:15:46
...

http://www.headfirstlabs.com/books/hrajax/chapter04/top5/

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
    <style>
        .rank{
            position: absolute;
            text-align: center;
            top: 20px;
            left: 20px;
            font-size: small;
            background-color: yellow;
            color: black;
            border: thin solid white;
            width: 80px;
            height: 80px;
            z-index: 99;
         }
         #div1 {
					  height:        270px;
					  padding:       10px;
					  border: thin solid red; 
					  background-color: purple;
					  margin:        auto 20px auto 20px;
				}
		
    </style>
    <script>
        //在Dom树内，一切都是节点： 元素，文本，属性，注释。
        //节点元素有getAttribute() 和 setAttribute()
        var manganese = document.getElementById('xx').value;
        var firstData = document.getElementByTagName("p")[0];
        var htmlElement = document.documentElement;//HTML文档的<html>根元素
        var myImage = document.createElement("img");
        var favShows = document.createTextNode("24 and lost");
        divNode.parentNode;
        divNode.childnodes;
        divNode.firstChild;
        divNode.lastChild;
        divNode.nodeName;
        divNode.nodeValue;//nul / undefined
        divNode.nodeType;
        // 每种节点类型(元素, 文本, 属性)都具有一个数字。但是尽力不用Node,很多浏览器不支持。
        if(someNode.nodeType == Node.ELEMENT_NODE){
            //DO SOMETHING FOR ELEMENT
        }else if (someNode.nodeType == Node.TEXT_NODE) {
            // DO SOMETHING FOR TEXTNODE
        }
        divNode.parentNode.getAttribute("id").nodeValue;
        //替代 删除 追加
        //onclick()
        divNode.appendChild(imgElement);
        divNode.insertBefore(imgElement);
        divNode.replaceNode(imgElement);
        document.getElementById("top5").childNodes.length;
        document.getElementById("top5").childNodes[i].nodeName.toLowerCase();
    </script>
</head>
<body>
    <p style="color: red">hello world</p>
     <div id="div1">
         <br/>
         <span class="rank">this is a span</span>   
         <br/>
     </div>
</body>
</html>

 

cc

上一篇： 集体智慧编程 简介 博客分类： 推荐系统 集体智慧推荐系统机器学习 

下一篇： 同步访问共享的可变数据 博客分类： Effective Java

推荐阅读