以innerHTML值来查找元素
老师好！
有多个相同的P元素，内容都不一样，我想用一个innerHTML内容来找到它对应的P元素，怎样实现？
就是说，在页面上有一个输入框，和多个P元素，然后在输入框里输入字符串，从下面的P元素里找到相同的内容，来操作。
这个作用和浏览器本身的查找功能一样。
1 回答
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
页面查找不同标签的内容
</title>
<style type="text/css">
body{
margin:20px;
}
.body{
width: 300px;
height: 200px;
background-color: #ddd;
}
p{
font-size: 20px;
line-height: 25px;
height: 25px;
}
.p_serchar{ /*定义被搜索到时的显示样式*/
background-color: blue;
color: #fff;
}
</style>
<script type="text/javascript">
function search(){
//获取input标签对象（注意是对象不是内容）
var search_str = document.getElementById("search_str");
var is_search; //用于判断是否出现相同内容
alert("你将要搜索："+search_str.value);
//循环遍历p标签的HTML内容
for (var i = 0; i < 4; i++) {
//获取第i个p标签对象
var p = document.getElementsByTagName("p")[i];
p.className="";//初始化，清除每次遍历后p标签的class值
if (p.innerHTML==search_str.value) {
p.className="p_serchar";
is_search = 1; //如果存在相同则记录为1
}
}
//在p标签遍历完后如果is_search=1，则证明存在有相同内容，否则输出警告
if(is_search!=1){
alert("你输入的内容并不在任何p标签中存在！");
}
is_search = 0;//对判断元素初始化
}
</script>
</head>
<body>
<div>
请输入关键内容:<br>
<input type="text" id="search_str" placeholder="请输入已有内容">
<input type="button" onClick="search()" value="搜索">
</div>
<div class="body">
<p>你好</p>
<p>他好</p>
<p>我好</p>
<p>大家好</p>
</div>
</body>
</html>如上代码，你可以复制到外部编辑器运行，代码相关位置有详细解说，还不懂可以先看3-6控制类名那节。
查看5条回复
举报
0/150
提交
取消
