黑马程序员技术交流社区

标题: 【黑马程序员济南】 前端与移动开发就业班笔记DOM讲解:Day02 [打印本页]

作者: 小鲁哥哥    时间: 2017-8-16 13:33
标题: 【黑马程序员济南】 前端与移动开发就业班笔记DOM讲解:Day02
本帖最后由 小鲁哥哥 于 2017-8-16 15:46 编辑

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


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


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




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2