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

    }