标签：16px set var val 代码 ons title idt 过滤
一、获取和设置文本
1、 innerHTML
用来获取或设置某个节点下的内容
<div id="box">
<ul>
<li>我是1</li>
<li>我是2</li>
<li>我是3</li>
</ul>
</div>
<script>
//获取普通的标签里面的内容
var box=document.getElementById("box");
//innerHTML 获取的是某个元素内部的标签+文本(包括子元素)
//innerText 获取某个元素中的文本（包括子元素）
console.log(box.innerHTML);
console.log(box.innerText);
console.log(box.textContent);
// 设置普通标签里面的内容--设置内容的时候，会把原来在里面的标签和文本全都覆盖
// box.innerHTML = "我还是div里面的内容";
// box.innerText = "我还是div里面的内容";
var html = "<a href=\"http://www.baidu.com\">百度</a>";
//innerHTML 当字符串里存在标签的时候，设置内容的时候会被解析成为标签
// box.innerHTML = html;
//当innerText 使用的时候，如果字符串中包含标签，是不会被解析成标签，而是会被转义成为HTML编码
// box.innerText = html;
//textContent
box.innerHTML = html;
</script>
兼容：所有的主流浏览器都支持
2、 innerText
用来获取或设置节点之间的文本，只会获取文本，标签会过滤掉
兼容：高版本的主流浏览器都支持，低版本的火狐不支持innerText，而是支持textContent
<script>
function getInnerText(element) {
if(element.innerText!=undefined){
return element.innerText;
}else if(element.textContent!=undefined){
return element.textContent;
}
}
function setInnerText(element,cocntent) {
if(element.innerText!=undefined){
element.innerText=content;
}else if(element.textContent!=undefined){
element.textContent=content;
}
}
</script>
二、DOM操作元素的样式
1、 className
DOM中可以通过设置className的方式操作元素的样式，但是需要配合css使用
比如css中有如下代码
用户名：<input type="text" name="username" id="txt_user">
密码：<input type="password" name="password" id="pwd" class="pwd">
<input type="button" value="登录" id="btn">
我们可以通过设置className属性控制元素
<script>
//用户名 和 密码 验证
//长度验证
//要求用户名长度在6-20位之间
//要求密码在6-12位之间
//获取元素
//根据id，根据标签名，根据name，根据className
//name属性：可以多个元素共用一个name属性，所以根据name属性获取元素，是可以获取多个元素的
var txt = document.getElementsByName("username")[0];
//class属性：class也是可以共用的，所以根据class属性获取元素，也是一个集合
//兼容问题：IE8及以下浏览器不能使用
var passWord = document.getElementsByClassName("pwd")[0];
// var pwd=bootnode.getElementsByClassName("password");
var btn = document.getElementById("btn");
//注册事件
btn.onclick = function () {
//在事件内验证
var userName = txt.value;
if (userName.length < 6 || userName.length > 20) {
alert("输入的用户名需要在6-20位之间");
}
var pwd = passWord.value;
if (pwd.length < 6 || pwd.length > 12) {
alert("输入的密码需要在6-12位之间");
}
return;
}
</script>
2、 style
DOM中还可以通过element.style属性设置元素的样式，style属性民里面有所有与css对应的属性
当css属性只有一个单词的时候：
.hi {
background: #abc;
}
我们可以直接使用style.background来获取或设某个元素css的background属性
hi.style.backgroundColor = "red";
css属性单词之间的横杠在js当中是不支持的，转变成了采用驼峰命名的多个单词属性，再比如css的text-align属性，在js中是box.style.textAlign，其它属性依此类推
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background: #bfb;}
.big{
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<input type="button" value="点击修改大小" id="btn">
<div class="box"style="width: 200px;height: 200px;"></div>
<script src="js/common.js"></script>
<script>
$id("btn").onclick=function () {
//修改class
var old=$id("box").className;
old+=" big";
$id("box").className="big";
//修改style属性，修改行内样式的做法
$id("box").style="width:400px;height:400px;";
//通过修改style对象
console.log($id("box").style);
//缺陷
//如果要修改的样式较多，要一个一个写，比较麻烦
//如果修改过了，因为修改的是行内样式，下次要修改，只能使用行内样式修改
//优点：可以一次修改多个
//console.log($id("box").style.width);
//console.log($id("box").style.height);
//如果修改的是style属性，需要加上相应的单位
$id("box").style.width=400+"px";
$id("box").style.height=400+"px";
$id("box").style.backgroundColor="#bfb";
//属性的书写：把横线去掉，换成驼峰命名法，如果全是小写，就能直接书写
//如果想要重置某一个属性，直接赋值为空字符串
}
</script>
</body>
</html>
标签：16px set var val 代码 ons title idt 过滤
原文地址：http://www.cnblogs.com/chrischan/p/6671201.html
