4 HTML&JS等前端知识系列之Dom的基础

preface

主要聊聊dom的编程，包含下面的内容：

1. what's the dom
2. dom选择器
3. innerText 替换或写入文本
4. value 获取input,select,textarea的值
5. 数字+1的实例
6. innerHTML,innerText,
7. onfocus onblur value if判断 实践之输入框提示语的显示与隐藏
8. innerHTML insertAdjacentHTML createElement 实践之添加文本框
9. setAttribute getAttribute 标签属性的设置与获取
10. submit() submit 提交表单的两种方式
11. 检测表单是否有内容
12. confirm 获取弹框的确认值
13. window.location相关方法
14. setTimeout和setInterval 设置定时任务与标题滚动

what's the dom

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

文档对象模型 （DOM) 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

1. 核心 DOM - 针对任何结构化文档的标准模型
2. XML DOM - 针对 XML 文档的标准模型
3. HTML DOM - 针对 HTML 文档的标准模型
   
   DOM 是 Document Object Model（文档对象模型）的缩写。

dom选择器

1. 根据html标签选择

tags = document.getElementsByTagName('h2');

1. 根据class的名字选择

document.getElementsByClassName('hehe')

1. 根据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,

1. innerText 获取标签之间的内容
2. innerHTML 获取标签之前的html代码

value获取input，select，textarea的值

但是对于input,select,textarea这三个标签，需要使用value来获取值

1. xx.value 获取值
2. 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代码

1. onfocus是鼠标点击输入框触发的事件
2. 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 标签属性的设置与获取

1. setAttribute 设置属性
2. 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相关方法

1. window.location.href 显示当前的连接
2. 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
    }