【黑马程序员济南】前端与移动开发就业班笔记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>

[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;

        }

    }

[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>

[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.onclick = function () {

            //先把所有人的类名都干掉

            for (var i = 0; i < inputs.length; i++) {

                inputs.className = "";

            }

            //然后再把当前的对象的类名加上

            this.className = "current";

        };

    }

</script>

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

<script>

/**

*@author 传智播客

*/

    var box = document.getElementById("box");

    //console.log(box.id);//标准中有规定的属性 标签里的属性会影响对象中对应的属性

    //console.log(box.a);//标准中没有规定的属性 标签里的属性无法映射到对象上

    //box.className = "aaa";//标准中有规定的属性 对象中对属性的设置会影响标签

    //box.bbbbb = "22222";//标准中没有规定的属性 对象的自定义属性无法映射到标签上

</script>