您的位置：首页 > 其它

Dom选择器及操作文本内容

2016-12-10 22:39 274 查看
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

注：一般说的JS让页面动起来泛指JavaScript和Dom

1、选择器--id属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="kong">孔扎根的博文</div>
<ul>
<li>第1篇</li>
<li>第2篇</li>
<li>第3篇</li>
<li>第4篇</li>
<li>第5篇</li>
</ul>
<div class="top">
来条分隔线吧
</div>
<div name="num">1</div>
<input type="button" value="add1">
<script type="text/javascript">
n_id = document.getElementById('kong');
//        #显示此id标签<div id="kong">孔扎根的博文</div>
console.log(n_id);
//        显示id标签内的文本，孔扎根的博文
console.log(n_id.innerText);
//        将id='kong'的文本内容改为我要删除它
n_id.innerText='我要删除它'
</script>
</body>
</html>


　　选择器--标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="kong">孔扎根的博文</div>
<ul>
<li>第1篇</li>
<li>第2篇</li>
<li>第3篇</li>
<li>第4篇</li>
<li>第5篇</li>
</ul>
<div class="top">
来条分隔线吧
</div>
<div name="num">1</div>
<input type="button" value="add1">
<script type="text/javascript">
//        返回一个li标签列表
lis  = document.getElementsByTagName('li');
//用此类型的for循环各个li标签
for(var i=0;i<lis.length;i++){
//            返回每个Lis标签中的文本内容
console.log(lis[i].innerText)
}
</script>
</body>
</html>


　　选择器---class属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="kong">孔扎根的博文</div>
<ul>
<li>第1篇</li>
<li>第2篇</li>
<li>第3篇</li>
<li>第4篇</li>
<li>第5篇</li>
</ul>
<div class="top">
来条分隔线吧
<div>不要</div>
<div>要</div>
</div>
<div class="top">
去掉分隔线吧
</div>
<div name="num">1</div>
<input type="button" value="add1">
<script type="text/javascript">
//        取到class=top的标签列表
cls = document.getElementsByClassName('top');
//循环class=top的标签列表
for(var i=0;i<cls.length;i++){
//            输出其中的文本内容
console.log(cls[i].innerText);
}
</script>
</body>
</html>


　　选择器--name属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="kong">孔扎根的博文</div>
<ul>
<li>第1篇</li>
<li>第2篇</li>
<li>第3篇</li>
<li>第4篇</li>
<li>第5篇</li>
</ul>
<div class="top">
来条分隔线吧
<div>不要</div>
<div>要</div>
</div>
<div class="top">
去掉分隔线吧
</div>
<div name="num">1</div>
<input type="button" value="add1">
<hr>
密码:<input type="text" value="123">
<script type="text/javascript">
//        取到name=num的标签列表
names = document.getElementsByName('num');
for(var i=0;i<names.length;i++){
console.log(names[i].innerText);
}
</script>
</body>
</html>


　　

2、小结

innerText
innerHTML

var obj = document.getElementById('nid')
obj.innerText                       # 获取两个标签之间的所有文本内容,有的版本只能获取父标签的内容
obj.innerText = "hello"             # 设置文本内容
obj.innerHTML                       # 获取HTML内容
obj.innerHTML = "<h1>asd</h1>"      # 设置HTML内容

特殊的：
input系列
textarea标签
select标签

value属性操作用户输入和选择的值


　　操作文本内容

以上介绍了dom获取标签或属性文本值的方法，但是有三类标签获取文本值的方法却与之不同，分别为input/textarea/select,它们使用value方法。

input标签与textarea操作类似

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>input标签</h3>
<input id="t1" type="text">

<hr>
<h3>textarea标签</h3>
<textarea id="t2"></textarea>

<hr>
<select id="t3">
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">广州</option>
</select>
<hr>
<!--点击按扭后执行t_modify函数，获取标签中的文本内容-->
<input type="button" value="提交" onclick="t_modify()">

<script type="text/javascript">
function t_modify(){
//            获取id=t1的标签中的文本内容
var text = document.getElementById('t1');
console.log(text.value);
//            将其现有的文本内容修改为kongzhagen
text.value='kongzhagen'
}

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


　　

　select标签

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>input标签</h3>
<input id="t1" type="text" >

<hr>
<h3>textarea标签</h3>
<textarea id="t2"></textarea>

<hr>
<select id="t3">
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">广州</option>
</select>
<hr>
<!--点击按扭后执行t_modify函数，获取标签中的value内容-->
<input type="button" value="提交" onclick="t_modify()">

<script type="text/javascript">
function t_modify(){
//            获取id=t3的标签中的value内容
var text = document.getElementById('t3');
//            输出选择的option的value值,当value没有设置时，会输出option之间的文本值
console.log(text.value);
//            将其现有的文本内容修改为2
text.value='2';
}

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


　　图示：



　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航