## Dom对象(文档对象模型)
描述:它是HTML的一系列标准文档对象
## 属性
title 返回当前标题
url 返回一个完整的url地址
bgcolor 背景色
fgcolor 前景色
## 方法
1. document.getElementbyid("id名称") 如果有多个ID同名
,则只取第一个
2. document.getElemenTagname("标签或通配符*")通过寻找标签
或通配符来获取所有的元素,返回一个数组
3.document.getElementbyname("name")在ie中只能找到form中具备name属性的内容/存在兼容性问题
4.document.getElementClassName("className")存在兼容性问题
//解决classname的兼容性问题解决方案
function getElsByClassName(className) {
var arr = [];
//判断浏览器
if(document.getElementsByClassName) {
return document.getElementsByClassName(className);
} else {
//在所有元素中查找className的元素
var all = document.getElementsByTagName("*");//寻找所有Tagname类型的元素
for(var i = 0; i < all.length; i++) {
if(all[i].className == className) {
arr.push(all[i]);
}
}
return arr;
}
}
## 对象集合
all 表示所有的对象集合 (只对ie有效)通常用于解决兼容问题
例: if(document.all) {
alert("IE");
} else {
alert("NOT IE");
}
form 所有表单集合
获取表单内容的方式:
1. document.forms["0"] 根据层叠关系获取表单内容
2. document.forms["form2"] 根据form表单name属性值来获取
3. document.form2 根据表单名称来获取
### 在表单中获取某个元素的值
1. document.form[].name[下标].value
例: document.form[0].name1[0].value
2. document.forms[].name[下标].value
例: document.forms[1].name21.value
1.innerHTML 获取元素中所有的内容,包括标签
例: var div1 = document.getElementById("div1");
console.log(div1.innerHTML);
<div id ="div1"></div>
2.innerTest textContent 获取元素中的所有文本,不包括标签
例: alert(div1.innerText);
console.log(div1.textContent);
存在兼容性问题;参考解决方案
function getText(obj) {
if(doucment.all) {
return obj.innerText;
} else {
return obj.textContent;
}
}
function setText(obj, val) {
if(doucment.all) {
obj.innerText = val;
} else {
obj.textContent = val;
}
## 行内样式的操作方法
1.直接操作
例:console.log(btn.id);
2.获取法
例: console.log(btn.getAttribute("id"));
3.给属性赋值
例:console.log(btn.setAttribute("class", "btnClass1"));
## js 修改样式
<div class="div1"></div>
div1.style.wieght="像素值"....
样式运算
console.log(div1.style.width = parseInt(div1.style.width) + 100 + "px");
js设置伪类效果关键字
onmouseover 鼠标移入时
onmouseout 鼠标移除时
## 通过classname批量修改
实例: .noe{
width: 300px;
height: auto;
margin: auto;
text-align: center;
background-color: antiquewhite;
}
.one{
width: 600px;
height: auto;
margin: auto;
text-align: center;
background-color: antiquewhite;
}
window.onload =function (){
btn.onclick = function() {
if(oneDiv.className == "one") {
oneDiv.className = "two";
} else {
oneDiv.className = "one";
}
}
}
<div class="one"></div>
<input type="button" vilue="按钮" id="btn">
### 获取式修改某个内容属性
1. document.styleSheets 样式表集合
2. rules 选择器支持IE/存在兼容问题
3. classrules 选择器支持火狐/存在兼容问题
写法:
alert(document.styleSheets[1].rules
[1].style.width)
alert(document.styleSheets[1].cssRules[1].style.border);
## 样式的插入
document.styleSheets[0].insertRule("#one{width:300px;height:300px;background:black;}", 1);
document.styleSheets[0].addRule(".one", "{width:300px;height:300px;background:black;}", 2);
## 样式删除
document.styleSheets[0].deleteRule(2);
document.styleSheets[0].removeRule(2);
## 最终样式 (只能读取,不能修改)
alert(window.getComputedStyle(oneDiv, null).width);//针对IE
alert(oneDiv.currentStyle.width); //针对火狐
## 获取元素尺寸(可直接参与运算)
content+padding的值
console.log(oneDiv.clientWidth + " " +oneDiv.clientHeight);
content+padding+border得值
console.log(oneDiv.offsetWidth + " " + oneDiv.offsetHeight);
描述:它是HTML的一系列标准文档对象
## 属性
title 返回当前标题
url 返回一个完整的url地址
bgcolor 背景色
fgcolor 前景色
## 方法
1. document.getElementbyid("id名称") 如果有多个ID同名
,则只取第一个
2. document.getElemenTagname("标签或通配符*")通过寻找标签
或通配符来获取所有的元素,返回一个数组
3.document.getElementbyname("name")在ie中只能找到form中具备name属性的内容/存在兼容性问题
4.document.getElementClassName("className")存在兼容性问题
//解决classname的兼容性问题解决方案
function getElsByClassName(className) {
var arr = [];
//判断浏览器
if(document.getElementsByClassName) {
return document.getElementsByClassName(className);
} else {
//在所有元素中查找className的元素
var all = document.getElementsByTagName("*");//寻找所有Tagname类型的元素
for(var i = 0; i < all.length; i++) {
if(all[i].className == className) {
arr.push(all[i]);
}
}
return arr;
}
}
## 对象集合
all 表示所有的对象集合 (只对ie有效)通常用于解决兼容问题
例: if(document.all) {
alert("IE");
} else {
alert("NOT IE");
}
form 所有表单集合
获取表单内容的方式:
1. document.forms["0"] 根据层叠关系获取表单内容
2. document.forms["form2"] 根据form表单name属性值来获取
3. document.form2 根据表单名称来获取
### 在表单中获取某个元素的值
1. document.form[].name[下标].value
例: document.form[0].name1[0].value
2. document.forms[].name[下标].value
例: document.forms[1].name21.value
1.innerHTML 获取元素中所有的内容,包括标签
例: var div1 = document.getElementById("div1");
console.log(div1.innerHTML);
<div id ="div1"></div>
2.innerTest textContent 获取元素中的所有文本,不包括标签
例: alert(div1.innerText);
console.log(div1.textContent);
存在兼容性问题;参考解决方案
function getText(obj) {
if(doucment.all) {
return obj.innerText;
} else {
return obj.textContent;
}
}
function setText(obj, val) {
if(doucment.all) {
obj.innerText = val;
} else {
obj.textContent = val;
}
## 行内样式的操作方法
1.直接操作
例:console.log(btn.id);
2.获取法
例: console.log(btn.getAttribute("id"));
3.给属性赋值
例:console.log(btn.setAttribute("class", "btnClass1"));
## js 修改样式
<div class="div1"></div>
div1.style.wieght="像素值"....
样式运算
console.log(div1.style.width = parseInt(div1.style.width) + 100 + "px");
js设置伪类效果关键字
onmouseover 鼠标移入时
onmouseout 鼠标移除时
## 通过classname批量修改
实例: .noe{
width: 300px;
height: auto;
margin: auto;
text-align: center;
background-color: antiquewhite;
}
.one{
width: 600px;
height: auto;
margin: auto;
text-align: center;
background-color: antiquewhite;
}
window.onload =function (){
btn.onclick = function() {
if(oneDiv.className == "one") {
oneDiv.className = "two";
} else {
oneDiv.className = "one";
}
}
}
<div class="one"></div>
<input type="button" vilue="按钮" id="btn">
### 获取式修改某个内容属性
1. document.styleSheets 样式表集合
2. rules 选择器支持IE/存在兼容问题
3. classrules 选择器支持火狐/存在兼容问题
写法:
alert(document.styleSheets[1].rules
[1].style.width)
alert(document.styleSheets[1].cssRules[1].style.border);
## 样式的插入
document.styleSheets[0].insertRule("#one{width:300px;height:300px;background:black;}", 1);
document.styleSheets[0].addRule(".one", "{width:300px;height:300px;background:black;}", 2);
## 样式删除
document.styleSheets[0].deleteRule(2);
document.styleSheets[0].removeRule(2);
## 最终样式 (只能读取,不能修改)
alert(window.getComputedStyle(oneDiv, null).width);//针对IE
alert(oneDiv.currentStyle.width); //针对火狐
## 获取元素尺寸(可直接参与运算)
content+padding的值
console.log(oneDiv.clientWidth + " " +oneDiv.clientHeight);
content+padding+border得值
console.log(oneDiv.offsetWidth + " " + oneDiv.offsetHeight);