如何在html上搜索元素,以innerHTML值来查找元素

缄默蜀黍ONE

2016-04-06 01:49

已采纳

html>

页面查找不同标签的内容

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;

}

function search(){

//获取input标签对象(注意是对象不是内容)

var search_str = document.getElementById("search_str");

var is_search; //用于判断是否出现相同内容

alert("你将要搜索："+search_str.value);

//循环遍历p标签的HTML内容

for (var i = 0; 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;//对判断元素初始化

}

请输入关键内容:

你好

他好

我好

大家好

如上代码，你可以复制到外部编辑器运行，代码相关位置有详细解说，还不懂可以先看3-6控制类名那节。