JavaScript基础2-优快云博客

本文详细介绍了使用JavaScript操作DOM的基本方法，包括获取和设置HTML元素的属性、文本内容及CSS样式，实现全选、全不选和反选等功能，并演示了如何通过事件监听来响应用户的交互。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
javaScript基础2
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript DOM - 属性</title>

</head>


<body>
<img src="dog.gif" />
<script>
//获取HTML元素的JavaScript对象
var iobj = document.getElementsByTagName("img");
document.write(iobj[0].src);
//设置HTML属性
//iobj[0].src = "t.jpg";
</script>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript DOM - 文本</title>

</head>


<body>
<a href='http://www.baidu.com' name='alink'><b>百度</b>
</a>
<script>
//获取a链接的JavaScript对象
var aobj = document.getElementsByName("alink");
//alert("innerText:"+aobj[0].innerText);//百度
alert("innerHTML:"+aobj[0].innerHTML);//<b>百度</b>

</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript DOM - 文本</title>

</head>


<body>
<a href='http://www.baidu.com' name='alink'>
<b>百度</b>
</a>
<script>
//获取a链接的JavaScript对象
/*
 * 有超链接如下
 <a href='http://www.sohu.com'>百度</a>
 将文本内容改为加粗字体，文字为：搜狐。
 */
var aobj = document.getElementsByName("alink");
//写入文本内容
//innerText
//aobj[0].innerText = "<strong>搜狐</strong>";
//innerHTML
//当给便签设置属性的时候，innerText不能够解析标签，但是innerHTML可以解析标签
aobj[0].innerHTML = "<strong>搜狐innerHTML</strong>";
</script>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript DOM - 文本</title>

</head>


<body>
 <a href='http://www.sohu.com'>百度</a>
<script>
/*
 * 有超链接如下
 <a href='http://www.sohu.com'>百度</a>
 将文本内容改为加粗字体，文字为：搜狐。
 */
//获取a链接的JavaScript对象
var aobj = document.getElementsByTagName("a");
aobj[0].innerHTML="<b>搜狐</b>"; 

</script>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript DOM - CSS</title>

</head>


<body>
 <a href='http://www.sohu.com' style="background-color:#000;">百度</a>
<script>
//2、改变上一题链接的样式。将文本的字体设为25像素。
//获取a链接的对象
var aobj = document.getElementsByTagName("a");
//alert(aobj[0].style.backgroundColor);
//alert(aobj[0].style.color);//没有设置的样式获取不到
//设置css样式
aobj[0].style.color="#fff";
</script>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript DOM - CSS</title>

</head>


<body>
 <a href='http://www.sohu.com' style="background-color:#000;">百度</a>
<script>
//2、改变上一题链接的样式。将文本的字体设为25像素。
//获取HTML元素的JavaScript对象
var aobj = document.getElementsByTagName("a");
//改变css样式
aobj[0].style.fontSize="25px";//像素是要加px的，不然识别不出来
</script>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 全选 全不选 反选</title>

</head>


<body>
<input type="checkbox" name="ids[]" />新闻标题1<br/>

<script>
//用JavaScript获取HTML元素对象
var iobj = document.getElementsByName("ids[]");
alert(iobj[0].checked); //true 选择
                        //false 未选择

</script>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 全选 全不选 反选</title>

</head>


<body>
<input type="checkbox" name="ids[]" />新闻标题1<br/>
<input type="checkbox" name="ids[]" />新闻标题2<br/>
<input type="checkbox" name="ids[]" />新闻标题3<br/>
<input type="checkbox" name="ids[]" />新闻标题4<br/>
<input type="checkbox" name="ids[]" />新闻标题5<br/>

<script>
//用JavaScript获取HTML元素对象
var iobj = document.getElementsByName("ids[]");
//全选
function selectAll(){
    //全选：所有checkbox的checked属性置为true
    for(var i=0;i<iobj.length;i++){
        iobj[i].checked = true;
    }
}

//全不选
function unSelectAll(){
    for(var i=0;i<iobj.length;i++){
        iobj[i].checked=false;
    }
}

//反选
//反选：对象.checked属性若为true，
//则改成false。若为false，则改成true
function fselectAll(){
    for(var i=0;i<iobj.length;i++){
        //判断每一个iobj[i]的checked属性
        if(iobj[i].checked==true){
            iobj[i].checked=false;
        }else{
            iobj[i].checked=true;
        }
    }
}


</script>
<a href="javascript:selectAll();">全选</a> | <a href="javascript:fselectAll();">反选</a> | <a href="javascript:unSelectAll();">全不选</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 全选 全不选 反选</title>
<style>
.test{
    font-size:50px;
    background-color:green;
}

.test1{
    color:blue;
}
</style>

</head>


<body>
<a href="http://www.baidu.com" id="alink" class="test">百度</a>
<script>
//获取对象
var aobj = document.getElementById("alink");
//给a链接批量添加class样式
aobj.className = "test1";//test1把test覆盖掉
//aobj.class='test test1' 这个就可以


</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript Model</title>
</head>


<body>
<div>
    <p>这里是p标签</p><ul><li>这里是1标签</li><li>这里是i2标签</li><li>这里是3标签</li></ul><h1>标题1</h1>
</div>

<script>
//获取对象
var uobj = document.getElementsByTagName("ul");
//获取ul节点的父节点
//document.write(uobj[0].parentNode.parentNode.parentNode.parentNode.nodeName);
document.write(uobj[0].parentNode.nodeName);//DIV
//获取ul节点子节点
document.write("<br/>");
document.write(uobj[0].childNodes.length);
//输出第一个子节点的节点名称
document.write("<br/>");
document.write(uobj[0].childNodes[0].nodeName);
//输出第一个子节点的节点名称firstChild
document.write("<br/>");
document.write(uobj[0].firstChild.nodeName);

//输出最后一个子节点的节点名称
document.write("<br/>");
document.write(uobj[0].lastChild.nodeName);
//获取ul的上一个同胞节点
document.write("<br/>");
document.write(uobj[0].previousSibling.nodeName);
//获取ul的下一个同胞节点
document.write("<br/>");
document.write(uobj[0].nextSibling.nodeName);

</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript Model</title>
</head>


<body>
<div>
父级标签
<!-- 被注释掉的内容 -->父级标签<a href="http://www.baidu.com" id="alink">百度</a>
</div>

<script>
//获取对象
var aobj = document.getElementById("alink");
//获取a链接的父节点
/*document.write("nodeType:"+aobj.parentNode.nodeType);
document.write("<br/>");
document.write("nodeValue:"+aobj.parentNode.nodeValue);*/
//获取a链接的上一个通报节点
document.write("nodeName:"+aobj.previousSibling.nodeName);
document.write("<br/>");
document.write("nodeType:"+aobj.previousSibling.nodeType);
document.write("<br/>");
document.write("nodeValue:"+aobj.previousSibling.nodeValue);

document.write("<hr/>");
//获取html标签的对象
var hobj = document.getElementsByTagName("html");
//查看html标签父级节点的nodeName nodeType nodeValue
document.write("<br/>");
document.write("nodeName:"+hobj[0].parentNode.nodeName);
document.write("<br/>");
document.write("nodeType:"+hobj[0].parentNode.nodeType);
document.write("<br/>");
document.write("nodeValue:"+hobj[0].parentNode.nodeValue);


</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript Model</title>
</head>


<body>
aaaa<br/>
aaaa<br/>
aaaa<br/>
aaaa<br/>
<script>
/*document.write("bbbb<br/>");
document.write("bbbb<br/>");
document.write("bbbb<br/>");
document.write("bbbb<br/>");*/
function test(){
    for(var i=1;i<=4;i++){
        document.write("bbbb<br/>");
    }
}
</script>

cccc<br/>
cccc<br/>
cccc<br/>
cccc<br/>
<a href="javascript:test();">点击</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript Model</title>
</head>


<body>
aaaa<br/>
aaaa<br/>
aaaa<br/>
aaaa<br/>
<div style="width:150px;height:150px;background-color:yellow;">
</div>
cccc<br/>
cccc<br/>
cccc<br/>
cccc<br/>
<script>
//获取对象
var dobj = document.getElementsByTagName("div");
function adder(){
    //创建节点
    var aobj = document.createElement("a");
    //给创建的新节点添加属性或文本
    aobj.href="index.php";
    //添加文本
    aobj.innerHTML="首页";
    //添加节点
    dobj[0].appendChild(aobj);//ByName,ByTag,返回的是数组,其他返回的是单个的
}

//删除节点
function deler(){
    dobj[0].removeChild(dobj[0].lastChild);
}
</script>
<a href="javascript:adder();">添加节点</a> | 
<a href="javascript:deler();">删除节点</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 事件</title>
</head>


<body>
<script>
function test(){
    alert("hello world");
}
</script>
<!-- <input type="button" value="点击" onclick="alert('hello');"/> -->
<input type="button" value="点击" onclick="test();"/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 事件</title>
</head>


<body>

<input type="button" value="点击" id="bu1"/>
<script>
//获取对象
var bobj = document.getElementById("bu1");
//按钮响应单击事件
bobj.onclick = function(){
    alert("hello javascript");
}
/*bobj.onclick = test();
function test(){
    alert("hello world");
}*/
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
//------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>JavaScript 事件</title>
</head>


<body>
<div style="width:150px;height:150px;background-color:yellow;"></div>
<script>
//对div的背景色进行操作，当鼠标划入是背景色改为红色。
//当鼠标划出是，div背景色改为绿色
//获取对象
var dobj = document.getElementsByTagName("div");
dobj[0].onmouseover=function(){
    //当鼠标划入是背景色改为红色。
    dobj[0].style.backgroundColor="red";
}
dobj[0].onmouseout=function(){
    dobj[0].style.backgroundColor="green";
}

</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>