2021.10.15
实例一、动态替换段落的文本内容
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态替换段落的文本内容</title>
</head>
<body>
<div id="id-div" class="css-p"><!-- class可以理解为类 -->
<p>文本段落的原始内容.</p>
<p>文本段落的原始内容.</p>
</div>
<input type="button" id="id-replace-p" onClick="on_replace_p()" value="动态替换文本内容">
</body>
<script type="text/javascript">
function on_replace_p(){
var id_p=document.getElementsByTagName("p")
id_p[0].innerText="文本段落动态替换"
id_p[1].innerText="<b>这是文本替换</b>"
}
</script>
</html>
利用document.getElementsByTagName("p")方法获取所有<p>的标签，返回的是一个数组，用innerText方法重写p段落
实例二、如何主动触发按钮单击事件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>如果主动触发按钮单击事件</title>
</head>
<body>
<p>First Name:<input type="text" id="id-fname" value="Wang"></p>
<p>Last Name:<input type="text" id="id-lname" value="Li"></p>
<input type="button" id="id-btn-name" value="用户触发按钮">
<input type="button" id="id-btn-click" value="主动触发按钮">
</body>
<script type="text/javascript">
var v_btn_name=document.getElementById("id-btn-name")
v_btn_name.onclick=function(){
var fname=document.getElementById("id-fname")
var lname=document.getElementById("id-lname")
var full_name=fname.value+" "+lname.value
console.log("Full name:"+full_name)
}
var v_btn_click=document.getElementById("id-btn-click")
v_btn_click.onclick=function(){
console.log("主动触发按钮:")
document.getElementById("id-btn-name").click()
}
</script>
</html>
.onclick=funciton()另一种function的写法,此处是通过id来连接的
.click（）执行一次点击操作
实例三、动态修改元素属性值
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态修改元素的属性值</title>
</head>
<body>
<input type="text" class="css-p" name="1" id="id-name" value="1">
<input type="button" onClick="on_get_attr()" value="获取标签全部属性">
<input type="button" onClick="on_modify_attr()" value="修改标签全部属性">
</body>
<script type="text/javascript">
function on_get_attr(){
var get_attr=document.getElementsByTagName("input")
var on_attr=get_attr[0].attributes
for(var i=0;i<on_attr.length;i++){
console.log("attr name:"+on_attr[i].name+",value:"+on_attr[i].value)
}
}
function on_modify_attr(){
var on_attr=document.getElementsByTagName("input")
var modify=on_attr[0].arrtibutes
var attr=["button","css-p2","2","id-lname","GG"]
for(var i=0;i<modify.length;i++)
{
modify[i].value=attr[i]
}
for(var i=0;i<modify_attr.length;i++){
console.log("修改后name:"+modify_attr[i].name+",value:"+modify_attr[i].value)
}
}
</script>
</html>
attributes返回的是某个节点里所有属性的集合**节点**
刚开始写的时候想着on_attr=get_attr[0].attributes，是不是就可以直接console.log(on_attr)来显示所有的属性值，发现是报错的，返回的on_attr是一个类似数组的存储对象，返回里面的属性值要遍历，用.name返回标签名,用.value来返回标签内的属性值
实例四、如何获取下拉列表的选项
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>如何获取下拉列表的选项</title>
</head>
<body>
<p>Lang:
<select id="id-select-lang">
<option>CH</</option>
<option>EN</option>
<option>FR</option>
<option>GE</option>
<option>RU</option>
<option>HK</option>
</select>
</p>
<input type="button" onClick="on_get_selIndex()" value="获取下拉列表选项索引"><!--返回下拉(index)指数-->
</body>
<script type="text/javascript">
function on_get_selIndex(){
var i=document.getElementById("id-select-lang").selectedIndex;
var o=document.getElementById("id-select-lang").options[i];
console.log("select option:"+i+"."+"select text"+o.text)
}
</script>
</html>
sellectedIndex返回下拉列表的索引号，一般为返回一个序号
.options[i]下拉列表选项，i为列表索引号
如若要获取整个下拉列表的选项，用getElementsByTagName（“option”）获取整个option标签的元素，将返回的数组进行遍历操作来返回整个列表的值,如:
function on_all_get(){
var a=document.getElementsByTagName("option")
for(var i=0;i<a.length;i++){
console.log("值："+a[i].text)
}
}
|