4 HTML&JS等前端知识系列之Dom的基础
preface
主要聊聊dom的编程，包含下面的内容：
- what's the dom
- dom选择器
- innerText 替换或写入文本
- value 获取input,select,textarea的值
- 数字+1的实例
- innerHTML,innerText,
- onfocus onblur value if判断 实践之输入框提示语的显示与隐藏
- innerHTML insertAdjacentHTML createElement 实践之添加文本框
- setAttribute getAttribute 标签属性的设置与获取
- submit() submit 提交表单的两种方式
- 检测表单是否有内容
- confirm 获取弹框的确认值
- window.location相关方法
- setTimeout和setInterval 设置定时任务与标题滚动
what's the dom
DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：
文档对象模型 （DOM) 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
DOM 是 Document Object Model（文档对象模型）的缩写。
dom选择器
- 根据html标签选择
tags = document.getElementsByTagName('h2');
- 根据class的名字选择
document.getElementsByClassName('hehe')
- 根据ID来选择
document.getElementById('ljf')
innerText 替换或写入文本
var nid = document.getElementById('ljf')
nid.innerText='yq'
innerText for循环修改
html代码
<ul>
<li>h1</li>
<li>h1</li>
<li>h1</li>
<li>h1</li>
<li>h1</li>
</ul>
js代码
var lis = document.getElementsByTagName('li');
for ( var i in lis){
var xx = lis[i];
xx.innerText=i;
}
数字+1的实例
在html页面上点击+1按钮，实现页面动态加1
html代码
<span id="num">1</span></p>
<input type="button" value="+1" onclick="add_one();">
js代码
function add_one() {
var num = parseInt(document.getElementById('num').innerText);
num +=1;
document.getElementById('num').innerText = num
}
innerHTML,innerText,
- innerText 获取标签之间的内容
- innerHTML 获取标签之前的html代码
value获取input，select，textarea的值
但是对于input,select,textarea这三个标签，需要使用value来获取值
- xx.value 获取值
- xx.value = '' ; 获取值
html代码
<input type="button" onclick="GetValue();" value="获取值">
<input id="n2" type="text"/>
<select id="n3">
<option>北京</option>
<option>北京2</option>
<option>北京3</option>
</select>
<textarea id="n4">1111111</textarea>
js的代码
function GetValue() {
var obx = document.getElementById('n2');
var obx2 = document.getElementById('n3');
var obx3 = document.getElementById('n4');
console.log(obx.value,obx2.value,obx3.value)
}
再看一个例子：value 获取input的值
html代码：
<form>
<p>用户名：<input name="username" value="123"></p>
<p>密码：<input name="pwd" value="456"></p>
</form>
js代码：
var name = document.getElementsByName('username')[0];
var pwd = document.getElementsByName('pwd')[0];
console.log(pwd);
console.log(name);
console.log(name.value,pwd.value)
onfocus onblur value if判断 实践之输入框提示语的显示与隐藏
需求就是在我们鼠标点中搜索输入框的时候，提示语消失，然后鼠标离开输入框，点击其他地方的时候，提示语显示。
下面请看html代码
- onfocus是鼠标点击输入框触发的事件
- onblur是鼠标点击非输入框的事件，意味着离开了输入框。
html代码
<input type="text" id="search" value="请输入关键字" onfocus="Ff()" onblur="bb()">
js代码
script>
function Ff(){
var nid = document.getElementById('search');
var search_cont = nid.value; # 获取输入框的值
if(search_cont == "请输入关键字"){
nid.value = ''; //通过value来设置新的值
}
};
function bb() {
var nid = document.getElementById('search');
var xx = nid.value;
if(!xx.value){
nid.value = "请输入关键字"
}
}
</script>
innerHTML insertAdjacentHTML createElement 实践之添加文本框
我们在这里使用的a标签作为添加按钮，这就是涉及到一个问题，我们知道a标签默认有一个事件在点击它的时候，此时我们还需要额外给她增加一个触发时间，请看代码：
html代码
<a href="#" onclick="return addtag()">添加</a>
请看 onclick="return addtag()"里面的return，这里return一个false，同时addtag()里面还得return一个false这个，那么a标签自带的事件就不会触发，return true那就会触发。
下面请看详细js代码：
<script>
function addtag() {
var nid = document.getElementById('container');
var tag = "<input type='text'>";
nid.innerHTML=tag;
return false
}
</script>
此时，点击网页上添加按钮，永远都只有一个输入框，为啥呢？应该是我点击一个添加按钮，那么就增加一个输入框啊。关键点在于innerHTML这个，因为innerHTML是把原来的值给覆盖了，永远都是覆盖以前的值，所以才这样。所以如果点击一下添加就添加一个输入框，那么应该采用insertAdjacentHTML，如下所示，
创建标签的第一种方式，通过自定义文本内容来创建：
JS代码如下
<script>
function addtag() {
var nid = document.getElementById('container');
var tag = "<input type='text'>";
//nid.innerHTML=tag //注释掉之前的
container.insertAdjacentHTML('beforeBegin',tag); // 启用这个就是了，无线增加输入框
return false
}
</script>
还可以参考创建标签的第二种方式,通过设置属性来创建：
function addtag() {
var nid = document.getElementById('container');
var create_obj = document.createElement('a');
create_obj.href="http://www.cnblogs.com/liaojiafa"; //设置a标签属性
create_obj.innerText = "温柔易淡";
nid.appendChild(create_obj)
}
setAttribute getAttribute 标签属性的设置与获取
- setAttribute 设置属性
- getAttribute 获取属性
如下所示,以下操作在浏览器console窗口操作：
var nid = document.getElementById('container');
undefined
nid.setAttribute('name','hello')
undefined
nid.getAttribute('name')
"hello"
为什么不能够直接使用nid.name来设置标签呢？因为name不是所有标签自带的属性，某些自带name标签的才可以这么设定。
通过nid.XX这种方式设置属性来举个例子
var nid = document.getElementById('hehe');
nid.style.fontSize='33px' # Size的s必须大写
像上面说的，style里面的一些带有“-”的值，必须把“-”去除掉，然后把“-”后的首字母大写，如background-color，必须写成backgroundColor
submit() submit 提交表单的两种方式
- 采用最常用的submit按钮。
html代码代码如下：
<form action="https://www.sougou.com/web" method="get" id="form1">
<input name="query" type="text">
<input type="submit" value="search"/>
</form>
- 采用document的submit方法
<form action="https://www.sougou.com/web" method="get" id="form1">
<input name="query" type="text">
<a onclick="submitx()">search</a>
</form>
<script>
function submitx() {
document.getElementById('form1').submit(); // submit方法提交
}
</script>
检测表单是否有内容
需求就是检测输入框是否有内容，有才提交，如果没有那么不提交。
html代码
<form action="https://www.sougou.com/web" method="get" id="form1">
<input name="query" type="text">
<input type="submit" onclick=" return MySubmit();" value="提交">
</form>
JS代码
function MySubmit() {
var cont = document.getElementsByName('query')[0]; //获取输入框的内容
if(cont.value.trim()){ # 判断，有内容返回true
return true
}else{
alert('please enter something')
return false
}
}
confirm 获取弹框的确认值
javascript的弹框，可以使用confirm来获取用户选择的值，确定为true，取消为false。
html代码如下：
<input type="button" value="fuck me " onmouseover="myconfirm()">
js代码如下：
function myconfirm() {
var ret = confirm("welcome to http://www.cnblogs.com/liaojiafa/"); // confirm就是获取弹框的值。
console.log(ret)
}
window.location相关方法
- window.location.href 显示当前的连接
- window.location.reload 重新加载网页
setTimeout和setInterval 设置定时任务与标题滚动
setInterval方法，指定某个函数每隔多长之间执行一次，如下所示
setInterval('alert(123)',2000); //2000毫秒
下面说说借助定时功能来做标题的滚动：
直接查看js代码
ss = setInterval("Func()",1000); //ss为全局变量，其实也是一个句柄,SS这个变量名就现在的情况可加可不加。
function Func(){
var title = document.title;
var firstchar = title.charAt(0); // cahrAt,获取指定下标的元素在字符串里面
var subText = title.substring(1,title.length); //substring，获取指定下标字符串内容
var newtitle = subText + firstchar; // 拼接新标题
document.title = newtitle
}
此时需求又来了，要求能够手动控制标题的滚动，点击下stop按钮，就能够停止滚动，那么修改代码如下：
HTML代码
<input type="button" value="stop" onclick="stopInterval()">
JS代码
ss = setInterval("Func()",1000); //ss为全局变量，其实也是一个句柄，必须把setInterval赋值给一个变量名
function stopInterval() {
clearInterval(ss); // 添加这段代码就行了，意思就是清除这个句柄，就关闭了它。
}
function Func(){
var title = document.title;
var firstchar = title.charAt(0); // cahrAt,获取指定下标的元素在字符串里面
var subText = title.substring(1,title.length); //substring，获取指定下标字符串内容
var newtitle = subText + firstchar; // 拼接新标题
document.title = newtitle
}
烦人的产品经理又来了，说我们有个需求，要求某某个弹框几秒之内自动消除，好，那么就上面的基础说说这个功能：
setTimeout，表示多长时间之后执行一次这个函数。
ss = setTimeout("Func()",1000); //和setInterval一样的用法，传入函数名和时间，都是毫秒
function stopInterval() {
clearTimeout(ss) //对应的，这里使用clearTimeout来清除这个句柄。
}
function Func(){
var title = document.title;
var firstchar = title.charAt(0);
var subText = title.substring(1,title.length); //substring，获取指定下标字符串内容
var newtitle = subText + firstchar;
document.title = newtitle
}
