js的document对象
一、document对象(DOM核心对象)
1、属性
title 返回或设置当前文档的标题
URL 返回当前文档的url
bgColor 设置文档的背景色
fgColor 设置文档的前景色(设置文字颜色)
alert(document.title)
document.title="HelloWorld";
alert(document.URL)
alert(location.href)
document.bgColor="red";
document.fgColor="blue";2.方法
getElementById(idname) 返回拥有指定id的（第一个）对象的引用
getElementsByTagName(tagname) 返回带有指定标签名的对象的集合
getElementsByName(name) 返回带有指定name指定名称的对象的集合，主要是适用于表单
write()
<Script>
window.onload=function () {
//方法 getElementById(idname)
var div1=document.getElementById("one");
alert(div1.innerHTML)
//getElementsByTagName(tagname)
var divs=document.getElementsByTagName("div");
var lengths=divs.length;
//alert(lengths)
//通过下标来访问
//alert(divs[1].innerHTML)
for (var i=0; i<lengths; i++) {
alert(divs[i].innerHTML)
}
//getElementsByName(name)
var inputs=document.getElementsByName("text1");
var lengths=inputs.length;
alert(lengths)
document.write()//不换行的输出,
document.writeln()//换行输出
}
</script>
<body>
<div name="div1" id="one">
1
</div>
<div name="div1" id="one">
</div>
<form name="myform" id="form1">
<input type="text" name="text1" value="张三">
<input type="text" name="text2" value="李四">
</form>
</body>getElementsByClassName() 返回带有指定classname指定名称的对象的集合
function byclass (classname) {
if(document.getElementsByClassName){
return document.getElementsByClassName(classname)
}else{
var tag= document.getElementsByTagName("*");
var lengths=tag.length;
var divs=[];
for (var i=0; i<lengths; i++) {
if(tag[i].className==classname){
divs.push(tag[i])
}
}
return divs;
}
}
alert(byclass("aaa").length)
<div name="div1" id="one" class="aaa">
</div>
<div name="div1" id="one" class="aaa">
</div>二、document对象的操作、
1.操作内容
1.innerHTML 用来设置或获取对象起始和激素标签内的内容(识别html标签)
2.innerText 用来设置或获取对象起始和激素标签内的内容 (IE)
textContent用来设置或获取对象起始和激素标签内的内容 (FF)
3.outerHTML 用来设置或获取包括本对象在内起始和激素标签内的内容(识别html标签)
outerText 用来设置或获取包括本对象在内起始和激素标签内的内容
<script>
function getContent (objs,val) {
if(document.all){
if(val){
objs.innerText=val
}else{
return objs.innerText
}
}else{
if(val){
objs.textContent=val
}else{
return objs.textContent
}
}
}
window.onload=function () {
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var but=document.getElementById("but");
but.onclick=function () {
//var contents=div1.innerHTML;
//div2.innerHTML=contents;
var contents=getContent(div1)
getContent(div2,contents);
}
}
</script>2.操作属性
1.直接操作
对象.属性
对象.属性=值 (设置、获取、添加属性(属性值))
2.
getAttribute("属性") 获取给定的属性的值
setAttribute("属性","值") 设置或是添加属性
<script>
window.onload=function () {
var links=document.getElementsByTagName("a")[0];
//alert(links.href)
//links.href="2.html";
//alert(links.title)
//links.title="百度";
//links.title="百度";
//getAttribute("属性") 获取给定的属性的值
// setAttribute("属性","值") 设置或是添加属性
alert(links.getAttribute("href"))
links.setAttribute("href","2.html")
}
</script>
<body>
<a href="1.html" >链接</a>
</body>3、操作样式
1.行内样式
对象.style.属性
对象.style.属性=值 (设置、获取、添加属性)
****************************************************
遇到属性是"-"链接的，要将"-"去掉，后面的单词的首字母大写
****************************************************
2.css层叠样式
3.行内样式和css层叠样式通用的方式
<script>
window.onload=function () {
var one=document.getElementById("one");
one.onmouseover=function () {
//alert(one.style.color)
one.style.color="blue";
one.style.backgroundColor="red";
one.style.fontSize="13px";
}
one.onmouseout=function () {
one.style.color="red";
one.style.backgroundColor="blue";
one.style.fontSize="11px";
}
}
</script>
<a href="#" style="color:red;background-color:blue;padding:3px" id="one">链接</a>css层叠样式的操作
1.通过ID来更改样式,通过className更改样式
<style>
#one{
width:200px;
height:200px;
border:1px solid red;
color:red;
font-size:14px;
padding:24px;
}
#two{
width:200px;
height:200px;
border:1px solid blue;
color:blue;
font-size:19px;
padding:15px;
}
</style>
<script>
window.onload=function () {
var one=document.getElementById("one");
var but=document.getElementById("but");
but.onclick=function () {
one.id="two";
}
}
window.onload=function () {
var one=document.getElementById("one");
var but=document.getElementById("but");
but.onclick=function () {
one.className="div2";
}
</script>
<div id="one" class="div1"></div>2.更改或者获取或者设置某个属性的值
document.styleSheets[下标].rules[下标].style.属性
document.styleSheets[下标].rules[下标].style.属性=值
document.styleSheets 样式表的集合
document.styleSheets[0].rules 样式规则的列表
document.styleSheets[0].rules.style 样式规则的集合
document.styleSheets[下标].rules[下标].style.属性
适用于IE
**************************************************************
document.styleSheets[下标].cssRules[下标].style.属性
document.styleSheets[下标].cssRules[下标].style.属性=值
适用于FF
***************************************************************
document.styleSheets[0].rules[0].style.width
cssrule().width
cssrule().height="500px";
cssrule().margin="100px";
function cssrule (a,b) {
var a= a || 0;
var b= b ||0;
if(document.all){
return document.styleSheets[a].rules[b].style
}else{
return document.styleSheets[a].cssRules[b].style
}
}
var b= b ||0;
如果b不等于undefined和null，也就是说b有东西那a就等于b的值
不然就等于默认值0
var a= b || c
在js中，这相当于一个赋值语句，如果b的值大于0或为true，那么就把b的值赋给a，否在就把c的值赋给
布尔值，javascript中以下值会被转换为false
1.false 2.undefined 3.null 4.0 5.-0 6.NaN 7."" 8.''3.动态的添加删除css样式规则
document.styleSheets[下标].insertRule("选择器{属性:值}",位置) deleteRule(位置)
document.styleSheets[下标].addRule("选择器","属性:值",位置)
document.styleSheets[0].addRule(".div1","margin:200px",0);
document.styleSheets[0].removeRule(1);
//对象.currentStyle.属性 IE 用来获得实际的样式属性
//getComputedStyle(对象,null) FF 用来获得实际的样式属性
var one=document.getElementById("one");
one.currentStyle.width
getComputedStyle(one,null).width具体使用
动态生成iframe
var strUrl = Leopard.getContextPath() +
"/DoMyServlet?className=ExcelPoiAction&methodName=createExcel&btnCode=empdata&forWard=isFile&namesalt="+namesalt+"&func="+_func
+"&pbean="+encodeURI(encodeURI(strwhere))+"&btnCode"+empexcel;
var ifm;
if (document.getElementById("empexcel_iframe") == undefined) {
ifm = document.createElement("IFRAME");
ifm.setAttribute("id", "empexcel_iframe");
ifm.setAttribute("name", "empexcel_iframe");
ifm.style.height = "0";
ifm.style.width = "0";
ifm.style.display = "block";
ifm.src = "";
document.body.appendChild(ifm);
document.getElementById("empexcel_iframe").attachEvent(
"onload",
function() {
window.frames['empexcel'].document.getElementById("empexcel").click();
});
} else { ifm = document.getElementById("empexcel_iframe"); }
ifm.src = strUrl; public class ExcelPoiAction {
public void createExcel() throws IOException {
HttpServletRequest req = Request.getInst();
this.funcCode = req.getParameter("func"); //功能单元
//this.strWhere = req.getParameter("pbean"); //附件查询条件
this.strWhere = java.net.URLDecoder.decode(req.getParameter("pbean"),"utf-8");
if (!StringUtils.isEmpty(strWhere)) {
try {
objWhere = new JSONObject("{" + strWhere + "}");
} catch (JSONException e) {}
}
//获取业务参数
String busiStr = req.getParameter("busiData");
if(!StringUtils.isEmpty(busiStr)){
try {
this.busiData = JsonUtils.transferToBean(busiStr);
} catch (Exception e) {}
}
exeFuncAct("beforeEmp"); //导出前执行
HttpServletResponse resp = Response.getInst();
resp.setContentType("application/x-msdownload;charset=GBK");
String personBtnCode = req.getParameter("btnCode")==null?this.btnCode:req.getParameter("btnCode").toString();
String path = getDemoDirSource();// 存储路径
String name = getDemoName(personBtnCode);// 模板名称
//12.21修改
String demoSourcre = path + "/" + name;// 模板绝对路径
String nameSalt = req.getParameter("namesalt");
if(!StringUtils.isEmpty(nameSalt)){
String fileName = name.split("\\.")[0] +"_"+nameSalt+"."+name.split("\\.")[1];
resp.setHeader("Content-Disposition", "attachment; filename=" + ENCODE(fileName, "ISO-8859-1"));
}else{
resp.setHeader("Content-Disposition", "attachment; filename=" + ENCODE(name, "ISO-8859-1"));
}
// 输出流
OutputStream out = resp.getOutputStream();
// 获取数据
Map<String, List<Map<String, Object>>> data = InitDataByFuncExcelConfig();
CreateExcel excel = new CreateExcel(demoSourcre, out, busiData);
excel.setData(data);
// 创建数据
excel.CreateEx();
exeFuncAct("afterEmp");
}
}