【黑马程序员济南】 前端与移动开发就业班笔记DOM讲解:Day02

传智播客温馨提示：上一节学习了DOM的基本概念及使用方法，本节主要讲解DOM的表单属性以及一些案例。

InnerText和InnerHTML

InnerText和InnerHTML都可以获取内部的HTML内容或者设置内容，唯一的区别在于InnerText在获取内容的时候会忽略HTML标签，在设置内容的时候不会解析HTML标签，HTML标签会作为纯文本设置到页面上。InnerHTML在获取内容的时候会获取内部的全部内容包括HTML标签，在设置的内容的时候会将符合HTML规则的标签会作为标签进行设置。

[JavaScript] 纯文本查看 复制代码

<script>
/**
*@author 传智播客
*/
    var box = document.getElementById("box");
    //获取内部内容
    //console.log(box.innerHTML);//获取内部的html
    //console.log(box.innerText);//获取内部的文本内容 html标签会被忽略
    //设置内部内容
    //box.innerHTML = "aaa";//可以设置内部的html
    //box.innerText = "aaa";//可以设置内部的文本
    //box.innerHTML = "<h1>title</h1>";//如果是符合标签规则的文本会变成标签
    //box.innerText = "<h1>title</h1>";//即使是符合标签规则的文本 也会变成纯文本
</script>

InnerText和TextContent
InnerText和TextContent的区别基本上就是浏览器兼容的问题，下面通过实例进行演示。

[JavaScript] 纯文本查看 复制代码

<script>
        /**
        *@author 传智播客
        */
    var box = document.getElementById("box");
    console.log(box.innerText);//获取内部文本
    console.log(box.textContent);//获取内部文本

    //谷歌 两个都支持
    //新版的火狐 两个都支持
    //旧版的火狐 只支持textContent
    //新版的IE 两个都支持
    //旧版的IE 只支持innerText
</script>

兼容函数封装

[JavaScript] 纯文本查看 复制代码

    //获取任意对象的内部文本 （兼容所有浏览器）
    function getInnerText(element) {
        if (typeof element.innerText === "string") {
            return element.innerText;
        } else {
            return element.textContent;
        }
    }
    //设置任意对象的内部文本 （兼容所有浏览器）
    function setInnerText(element, content) {
        if (typeof element.innerText === "string") {
            element.innerText = content;
        } else {
            element.textContent = content;
        }
    }

表单属性
disabled 属性

[JavaScript] 纯文本查看 复制代码

<script>
/**
*@author 传智播客
*/
    //点击按钮 禁用所有文本框
    var btn = document.getElementById("btn");//获取元素
 //设置点击事件
    btn.onclick = function () {
        var inputs = document.getElementsByTagName("input");
//遍历input数组
        for (var i = 0; i < inputs.length; i++) {
            var input = inputs;//找到input标签对象
            if (input.type === "text") {
                input.disabled = true;//设置disable属性
            }
        }
    };
</script>

value属性

[JavaScript] 纯文本查看 复制代码

<script>
        /**
        *@author 传智播客
        */
//查找元素
    var test = document.getElementById("test");
    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    //console.log(test.value);//获取value属性
    //test.value = "aaa";//设置value属性
    //btn.value = "aaa";
    var inputs = box.getElementsByTagName("input");
//遍历数组给每隔文本框设置value属性
    for (var i = 0; i < inputs.length; i++) {
        var input = inputs;//每个文本框
        input.value = i;
    }
    //点击按钮获取值
    btn.onclick = function () {
        //var str = "";
        var arr = [];//创建空的数组
        for (var i = 0; i < inputs.length; i++) {
            //str += inputs.value;
            arr.push(inputs.value);//往数组的中添加元素
        }
        //console.log(arr);
        console.log(arr.join(""));//把数组中的元素通过空格进行分隔。
    };
</script>

排他思想

[JavaScript] 纯文本查看 复制代码

<script>
/**
*@author 传智播客
*/
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onclick = function () {[/i]
[i]            //先把所有人的类名都干掉[/i]
[i]            for (var i = 0; i < inputs.length; i++) {[/i]
[i]                inputs.className = "";[/i]
[i]            }[/i]
[i]            //然后再把当前的对象的类名加上[/i]
[i]            this.className = "current";[/i]
[i]        };[/i]
[i]    }[/i]
[i]</script>

自定义属性

[JavaScript] 纯文本查看 复制代码

<script>
/**
*@author 传智播客
*/
    var box = document.getElementById("box");
    //console.log(box.id);//标准中有规定的属性 标签里的属性会影响对象中对应的属性
    //console.log(box.a);//标准中没有规定的属性 标签里的属性无法映射到对象上
    //box.className = "aaa";//标准中有规定的属性 对象中对属性的设置会影响标签
    //box.bbbbb = "22222";//标准中没有规定的属性 对象的自定义属性无法映射到标签上
</script>

今天的讲解到此结束，如果小伙伴们还有什么不懂的可以在下方留言，或者去黑马程序员官网下载最新资料进行学习---http://www.itheima.com/

nnerText和InnerHTML都可以获取内部的HTML内容或者设置内容，唯一的区别在于InnerText在获取内容的时候会忽略HTML标签，在设置内容的时候不会解析HTML标签，HTML标签会作为纯文本设置到页面上。InnerHTML在获取内容的时候会获取内部的全部内容包括HTML标签，在设置的内容的时候会将符合HTML规则的标签会作为标签进行设置。