标签：输入关键字 ref classname 签名 实例 脚本 哪些 bsp trim
Dom：Dom的代码放在body的最后，写在<script></script>中，为了防止Dom执行失败导致页面无法正常加载
document：指整个html文档
一、选择器
选择器的意思是什么？就是找到标签，并对该标签做操作
下面我们看个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bb{
border-color: red;
border-style: solid;
border-width: 2px;
outline-width: 4px;
outline-style: solid;
outline-color: green;
float: right;
width: 50px;
height: 100px;
overflow: auto;
}
</style>
</head>
<body>
<div>
<div id="cc">c1</div>
<a href="http://www.baidu.com">这是一个超链接标签</a>
</div>
<ul>
<li>第一列</li>
<li>第三列</li>
<li>第四列</li>
<li>第一列</li>
</ul>
<div class="bb">
<li>第一列</li>
<li>第三列</li>
<li>第四列</li>
<li>第一列</li>
</div>
<div>
<form>
用户名：<input name="username" type="text" value="wangxianzhi">
密码：<input name="pwd" type="text" value="123">
</form>
</div>
<script type="text/javascript">
var i = document.getElementById("cc")
console.log(i.innerText)
i.innerText = "c2"
console.log(i.innerText)
var b = document.getElementsByTagName("li")
console.log(b)
b[3].innerText = "第二列"
console.log(b[3])
var c = document.getElementsByClassName("bb")
console.log(c)
var n = document.getElementsByName("username")[0]
console.log(n.value)
var p = document.getElementsByName("pwd")[0]
console.log(p.value)
</script>
</body>
</html>
1、按照id来查找
var i = document.getElementById("cc")
console.log(i.innerText)
i.innerText = "c2"
console.log(i.innerText)
2、根据标签名称查找
var b = document.getElementsByTagName("li")
console.log(b)
b[3].innerText = "第二列"
console.log(b[3])
3、通过css名称来查找
var c = document.getElementsByClassName("bb")
console.log(c)
4、通过name属性来查找
var n = document.getElementsByName("username")[0]
console.log(n.value)
var p = document.getElementsByName("pwd")[0]
console.log(p.value)
二、使用Dom实现一个自增数字的实例，只要点击submit，数字就会+1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div id="num">1</div>
<input type="submit" value="+1" onclick="func();">
<!--注册一个事件，每次点击这个submit，就会执行onclick中定义的函数-->
</div>
<script>
function func() {
var n = document.getElementById("num");
// alert(n.innerText);
n.innerText++;
// alert(n.innerText);
}
</script>
</body>
</html
三、有些标签的值是通过interText来获取的，但是有些标签的值是通过value来获取的，下面我们来看下哪些标签是需要通过value来获取】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="cc">
alex
<h1>sb</h1>
</div>
<h1>这些特殊的标签用value来获取</h1>
<!--<input>-->
<input type="text" id="n2" value="大傻逼">
<input type="button" onclick="GetInputValue()">
<!--<select></select>-->
<select id="n3">
<optgroup label="选项1">
<option value="1">11111</option>
<option value="2">22222</option>
<option value="3">33333</option>
<option value="4" selected="selected">44444</option>
</optgroup>
</select>
<input type="button" onclick="GetSelectValue()">
<!--<textarea></textarea>-->
<textarea id="n4">aaaaaaaaaaaaaaaa<br>ddddddddddddddd</textarea>
<script>
var n = document.getElementsByTagName("div")
// alert(n.innerText)
console.log(n.innerText)
var m = document.getElementById("cc")
console.log(m.innerText)
// 获取标签中间的文本内容
console.log(m.innerHTML)
// 获取标签中的内容
function GetInputValue() {
var obj = document.getElementById("n2")
// console.log(obj.value)
alert(obj.value)
// 主要用于select input testarea标签的值，也就说获取用户输入的值
obj.value = ""
}
function GetSelectValue() {
var s = document.getElementById("n3")
alert(s.value)
}
</script>
</body>
</html>
四、实现一个搜索框的实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="s1" value="请输入关键字" onfocus="func()" onblur="func1()">
<script>
function func() {
var i = document.getElementById("s1")
if(i.value == "请输入关键字"){
i.value = ""
}
}
// 实现的效果是把鼠标移动上去，把关键字去掉
function func1() {
var i = document.getElementById("s1")
if(i.value.trim() == ""){
i.value = "请输入关键字"
}
}
// 实现的效果是移动走鼠标，吧关键字给恢复了
</script>
</body>
</html>
五、Dom中的confirm的作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>confirm</title>
</head>
<body>
<input type="submit" value="来点我涯" onmouseover="f1()">
<script>
function f1() {
var ret = confirm("你是否还在爱我")
// 这里会弹出一个选择框，用户可以选择点击”确定“或者”取消“，如果点击确定，则返回true，如果点击取消，则返回false
console.log(ret)
}
</script>
</body>
</html>
六、使用Dom实现添加标签的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建标签</title>
</head>
<body>
<a href="http://www.baidu.com" onclick="add()">请点击1</a>
<!--//上面这个例子，a标签，我们正常点击，会跳转到href定义的超链接上，但是我们这里又定义了一个事件，那么他的执行顺序是这样的，先执行自定义的事件，然后-->
<!--// 在执行默认的事件-->
<a href="http://www.baidu.com" onclick="return add1()">请点击2</a>
<!--上面这个例子，执行完自定义的函数后，就不会在执行默认的函数了，如果函数中定义的返回值为true，那么还是会继续往下执行-->
<input type="button" value="添加标签到div中" onclick="add3()">
<div id="mm"></div>
<!--这个实现的效果就是点击button，就会在id="mm"这个标签内新增一行html脚本-->
<input type="button" value="添加标签到div中方法2" onclick="add4()">
<script type="text/javascript">
function add() {
alert(123)
}
function add1() {
alert(123);
return true;
}
function add3() {
tag = "<input type=‘test‘ value=‘新增的标签‘>"
var b = document.getElementById("mm")
// b.innerHTML = tag
var b = document.getElementById("mm")
// 这个实现的效果就是会每次吧html的脚本添加到最上面，而不是赋值取代
alert(b.innerHTML)
}
// 上面这些创建标签的方法就是：通过字符去创建标签
function add4() {
var createobj = document.createElement("a")
createobj.href = "http://www.baidu.com"
createobj.innerText = "请点击百度"
// console.log(createobj)
var d = document.getElementById("mm")
d.appendChild(createobj)
}
// 上面这种方法用对象的方式添加标签
</script>
</body>
</html>
七、实现设置标签属性的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置标签属性</title>
</head>
<body>
<div id="aaaa">aaaaaaa</div>
<script>
var nid = document.getElementById("aaaa")
nid.setAttribute("name","bbb")
// 设置标签属性
nid.setAttribute("sb","ccc")
nid.getAttribute("sb")
// 超找标签属性
</script>
</body>
</html>
八、Dom实现一个提交表单的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提交表单</title>
</head>
<body>
<!--<!–方法1–>-->
<form id="ccc" action="https://www.sogou.com/web" method="get">
<!--<input name="query" type="text">-->
<!--<input type="submit" value="提交">-->
<!--<br>-->
<!--<div onclick="submit()">-->
<!--提交-->
<!--</div>-->
<!--使用JavjScript实现提交-->
<!--在方法1的基础上我们在实现一个新的例子，就是如果输入为空，给出提示，如果输入有值，才允许进行搜索-->
<!--<form id="bbb" action="https://www.sogou.com/web" method="get">-->
<input name="query" type="text">
<input type="submit" value="提交" onclick="return submit2()">
</form>
<script>
function submit() {
document.getElementById("ccc").submit()
}
function submit2() {
var q = document.getElementsByName("query")[0]
alert(q)
if(q.value.trim()){
return true
}else {
alert("请输入内容")
return false
}
}
// 使用js实现输入为空，给出提示，输入数据，到搜狗搜索中搜索东西
</script>
</body>
</html>
九、Dom实现一个定时器的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title id="tt">我的父亲母球</title>
</head>
<body>
<input type="button" value="点我停下来" onclick="kfc()">
<script>
// setInterval("操作","间隔") 间隔的默认单位是毫秒
// setInterval("alert(123)","2000")
// 每个2秒钟执行一次alert
setTimeout("alert(123)",1000)
// 这个意思是只执行一次，然后就退出，如果想清除他，则需要用clearTimeoutq去清除
obj = setInterval(f,2000)
function f() {
var s = document.getElementById("tt")
var first = s.innerText.charAt()
var sub = s.innerText.substring(1,s.innerText.length)
new_str = sub + first
s.innerText = new_str
}
function kfc() {
// 清除定时器，定时器的任务就不会执行
clearInterval(obj)
}
</script>
</body>
</html>
标签：输入关键字 ref classname 签名 实例 脚本 哪些 bsp trim
原文地址：http://www.cnblogs.com/bainianminguo/p/7628696.html
