-
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>nextSibling</title>
</head>
<body>
<ul id="u1">
<li id="a">javascript</li>
<li id="b">jquery</li>
<li id="c">html</li>
</ul>
<ul id="u2">
<li id="d">css3</li>
<li id="e">php</li>
<li id="f">java</li>
</ul>
<script type="text/javascript">
function get_nextSibling(n){
var x=n.nextSibling;
while (x && x.nodeType!=1){
x=x.nextSibling;
}
return x;
}
var x=document.getElementsByTagName("li")[0];
document.write(x.nodeName);
document.write(" = ");
document.write(x.innerHTML);
var y=get_nextSibling(x);
if(y!=null){
document.write("<br />nextsibling: ");
document.write(y.nodeName);
document.write(" = ");
document.write(y.innerHTML+"<br /><br />");
}else{
document.write("<br>已经是最后一个节点"+"<br /><br />");
}
function get_previousSibling(n)
{
var z=n.previousSibling;
while (z&&z.nodeType!=1)
{
z=z.previousSibling;
}
return z;
}
var z=document.getElementsByTagName("li")[1];
document.write(z.nodeName+" = "+z.innerHTML);
var d=get_previousSibling(z);
if(d!=null)
{
document.write("<br />previoussibling:"+d.nodeName+" = "+d.innerHTML);
}
else {
document.write("<br>已经是第一个节点"+"<br /><br />");
}
</script>
</body>
</html>查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="con">
<li id="lesson1">javascript
<ul>
<li id="tcon"> 基础语法</li>
<li>流程控制语句</li>
<li>函数</li>
<li>事件</li>
<li>DOM</li>
</ul>
</li>
<li id="lesson2">das</li>
<li id="lesson3">dadf</li>
<li id="lesson4">HTML/CSS
<ul>
<li>文字</li>
<li>段落</li>
<li>表单</li>
<li>表格</li>
</ul>
</li></ul>
<script type="text/javascript">
var mylist = document.getElementById("tcon");
var point=mylist.parentNode.parentNode.parentNode;
document.write(point.lastChild.innerHTML)
</script>
</body>
</html>查看全部 -
var x=document.getElementsByTagName("div")[0].childNodes;
for(var i=0;i<x.length;i++)
{
document.write("第"+(i+1)+"个节点的值是："+x[i].nodeValue+"<br />");
document.write("第"+(i+1)+"个节点的名称是："+x[i].nodeName+"<br />");
document.write("第"+(i+1)+"个节点的属性是："+x[i].nodeType+"<br />");
document.write("<br />");查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>节点属性</title>
</head>
<body>
<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">
var list1=document.getElementsByTagName("li");
for(var i=0;i<list1.length;i++){
document.write(list1[i].nodeName+"<br/>");
document.write(list1[i].nodeValue+"<br/>");
document.write(list1[i].nodeType+"<br/>");
}
</script>
</body>
</html>查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<form>
请选择你爱好:<br>
<input type="checkbox" name="hobby" id="hobby1"> 音乐
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 阅读
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
<input type="button" value = "全选" onclick = "checkall();">
<input type="button" value = "全不选" onclick = "clearall();">
<p>请输入您要选择爱好的序号，序号为1-6:</p>
<input id="wb" name="wb" type="text" >
<input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
function checkall(){
var hobby = document.getElementsByTagName("input");
for(var i=0;i<hobby.length;i++){
hobby[i].checked=true;
}
// 任务1
}
function clearall(){
var hobby = document.getElementsByName("hobby");
for(var i=0;i<hobby.length;i++){
hobby[i].checked=false;
}
// 任务2
}
function checkone(){
var j=document.getElementById("wb").value;
var hobby = document.getElementsByName("hobby");
if (parseInt(j)>6||parseInt(j)<1){
alert("input 1~6 number")}
else{
hobby[parseInt(j)-1].checked=true;}
// 任务3
}
</script>
</body>
</html>查看全部 -
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
</head>
<body>
<h2 id="con">I love JavaScript</h2>
<p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<script type="text/javascript">
var h2text=document.getElementById("con")
h2text.style.color='red';
h2text.style.backgroundColor='#CCC';
h2text.style.display='none';
</script>
</body>
</html>查看全部 -
学习一下别人家的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
*{margin:0;padding:0;font:normal 12px "微软雅黑";color:#000000;}
ul{list-style-type: none;}
a{text-decoration: none;}
#tab-list{width: 275px;height:190px;margin: 20px auto;}
#ul1{border-bottom: 2px solid #8B4513;height: 32px;}
#ul1 li{display: inline-block;width: 60px;line-height: 30px;text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px;}
#ul1 li:hover{cursor: pointer;}
#ul1 li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}
#tab-list div{border: 1px solid #7396B8;border-top: none;}
#tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}
.show{display: block;}.hide{display: none;}
</style>
<script type="text/javascript">
window.onload = function() {
var oUl1 = document.getElementById("ul1");
var aLi = oUl1.getElementsByTagName("li");
var oDiv = document.getElementById("tab-list");
var aDiv = oDiv.getElementsByTagName("div");
for(var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onmouseover = function() {
for(var i = 0; i < aLi.length; i++) {
aLi[i].className = "";
}
this.className = "active";
for(var j = 0; j < aDiv.length; j++) {
aDiv[j].className = "hide";
}
aDiv[this.index].className = "show";
}
}
}
</script>
</head>
<body>
<!-- HTML页面布局 -->
<div id="tab-list">
<ul id="ul1">
<li class="active">房产</li><li>家居</li><li>二手房</li>
</ul>
<div>
<ul>
<li><a href="javascript:;">275万购昌平邻铁三居 总价20万买一居</a></li>
<li><a href="javascript:;">200万内购五环三居 140万安家东三环</a></li>
<li><a href="javascript:;">北京首现零首付楼盘 53万购东5环50平</a></li>
<li><a href="javascript:;">京楼盘直降5000 中信府 公园楼王现房</a></li>
</ul>
</div>
<div class="hide">
<ul>
<li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窝</a></li>
<li><a href="javascript:;">经典清新简欧爱家 90平老房焕发新生</a></li>
<li><a href="javascript:;">新中式的酷色温情 66平撞色活泼家居</a></li>
<li><a href="javascript:;">瓷砖就像选好老婆 卫生间烟道的设计</a></li>
</ul>
</div>
<div class="hide">
<ul>
<li><a href="javascript:;">通州豪华3居260万 二环稀缺2居250w甩</a></li>
<li><a href="javascript:;">西3环通透2居290万 130万2居限量抢购</a></li>
<li><a href="javascript:;">黄城根小学学区仅260万 121平70万抛!</a></li>
<li><a href="javascript:;">独家别墅280万 苏州桥2居优惠价248万</a></li>
</ul>
</div>
</div>
</body>
</html>
查看全部 -
网页尺寸 offsetHeight 获取网页内容高度和宽度（包括滚动条等变现，会随窗口的显示大小改变）
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;查看全部 -
网页尺寸 scrollWidth. scrollHeight 获取网页内容宽度、高度
兼容性：
var w = document.documentElement.scrollWidth || document.body.scrollWidth;
var h = document.documentElement.scollHeight || document.body.scrollHeight;
查看全部 -
var input=document.createElement("input");
input.type="button";
input.value="你好";
// input.onclick=clickMethod;
input.setAttribute('onclick', 'clickMethod()');
设置onclick 值时
input.onclick = clickMethod 或 input.setAttribute('onclick', 'clickMethod()')
两种写法：input是一个创建的标签对象，使用onclick将方法名负责给它，或者通过setAttribute方法之间给两个参数，一个是属性名，一个是属性值，都是一样的效果
查看全部 -
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
document.createTextNode(data)
data : 字符串值，可规定此节点的文本。
查看全部 -
创建元素节点 createElement()
document.createElement(tagName) ,tagName 创建元素的类型
var input = document.createElement("input");
input.type = "button";
input.value = "创建一个按钮";// 或者
var btn = document.createElement("input");
btn.setAttribute("type", "text");
btn.setAttribute("name", "q");
btn.setAttribute("value", "使用setAttribute");
btn.setAttribute("onclick", "javascript:alert('This is a text!');");// 哦哟呵，还可以这样写
查看全部 -
替换元素节点 replaceChild() 返回被替换对象的引用
引用引用，可怕的引用
node.replaceChild(newnode, oldnode)
另外：当 oldnode 被替换时，所有与之相关的属性内容都将被移除。
查看全部 -
删除节点 removeChild() 从子节点列表中删除某个节点，若删除成功，返回被删除的节点，否则，返回null
nodeObject.removeChild(node)
可以这样使用：
var x = otest.removeChild(otest.childNodes[1]);
document.write(x.innerHTML);
把删除的子节点赋值给x，这个节点不在DOM树中，还存在于内存中。若要完全删除，需要 x = null；
查看全部 -
插入节点 insertBefore() 在已有的子节点之前插入一个新的子节点
insertBefore(newnode, node)
重点：父节点调用此方法哟
查看全部
举报