html dom
程序员文章站
2024-03-16 11:20:04
...
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
推荐阅读
-
html dom
-
html dom
-
$与B开头的对象与方法 博客分类： jquery HTML
-
weex-html5 组件进阶
-
$与B开头的对象与方法 博客分类： jquery HTML
-
图片移动不超出边界 博客分类： javascript CC++C#HTML
-
关于attachEvent和addEventListener 博客分类： AJAX IEJavaScript浏览器HTML
-
图片移动不超出边界 博客分类： javascript CC++C#HTML
-
jQuery与DOM对象相互转换
-
关于attachEvent和addEventListener 博客分类： AJAX IEJavaScript浏览器HTML