本帖最后由 小鲁哥哥 于 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[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/
|