国外房产中介网站,装饰设计属于什么行业,网站制作报价被哪些因素影响,seo排名点击软件推荐DOM
Document Object Model#xff1a;文档对象模型
DOM树 文档#xff1a;一个页面就是一个文档#xff1b; 节点#xff1a;网页中的所有内容#xff0c;在文档树中都是节点#xff0c;使用node表示#xff1b;
DOM操作节点实现网页特效的步骤#xff1a;
获取ht…DOM
Document Object Model文档对象模型
DOM树 文档一个页面就是一个文档 节点网页中的所有内容在文档树中都是节点使用node表示
DOM操作节点实现网页特效的步骤
获取html标签元素修改标签的样式、内容、属性
var divdocument.querySelector(div);
div.style.backgroundColor#000;获取页面元素
getElementById、getElementsByTagName、getElementsByClassNamequerySelector / querySelectorAll
getElementById
一次只能获取一个标签对象
p idp1/pvar pDomdocument.getElementById(p1);
console.dir(pDom);getElementsByTagName
一次获得多个标签对象
p/p
p/pvar pDomsdocument.getElementsByTagName(p);
for(var i0;ipDoms.length;i){//console.dir(pDoms[i]);pDoms[i].style.colorred;
}getElementsByClassName
一次获得多个标签对象
p classword/p
div classword/div
h1 classword/h1var colors[red,green,blue];
var pDomsdocument.getElementsByClassName
for(var i0;ipDoms.length;i){//console.dir(pDoms[i]);pDoms[i].style.colorcolors[i];
}querySelector
查询选择器css中的基本选择器复合选择器都能用 一次只能获取一个标签对象
h1 idbook/h1
p classtitle/p
spanspanvar spandocument.querySelector(span);
var hdocument.querySelector(#book);
var pdocument.querySelector(.title);querySelectorAll
一次获得多个标签对象
li/li
li/li
li/lidocument.querySelectorAll(li);//获取body标签元素
document.body;
//获取html标签元素
document.documentElement;事件
触发–响应
事件三要素
事件源触发事件的元素事件类型事件处理函数
button点击一下/button//1.获取事件源
var btndocument.querySelector(button);
//2.绑定点击事件
btn.onclickfunction(){
//3.弹出警告alert(被点了);
}绑定事件的三种方式
直接写在标签以on开头的事件中
button onclickalert(点一下了)/button对象.on事件function(){} 对象.addEventListener(事件名,function(){})
btn.addEventListener(click,function(){alert(点了);
}鼠标事件 键盘事件 键盘事件通常用在单行文本框和多行文本框上 input typetextbrbrtextarea/textarea//单行文本框注册keyup事件将内容输出到终端var inputdocument.querySelector(input);input.onkeyupfunction(){//this指向事件的调用者console.log(this.value);}//单行文本框注册keydown事件将内容输出到终端input.onkeydownfunction(){console.log(this.value);}//多行文本框注册keypress事件将内容输出到终端document.querySelector(textarea).onkeypressfunction(){console.log(this.value);}其他事件 formdiv标题/div账号input idaccount typetext placeholder请输入用户名 maxlength10/br/密码input typepassword placeholder请输入密码/br/button typesubmit提交/button /formscriptdocument.querySelector(div).ondblclickfunction(){alert(请填写信息);}var accountdocument.querySelector(#account);account.onfocusfunction(){console.log(获取了焦点);}account.onblurfunction(){console.log(失去了焦点);}document.querySelector(form).onsubmitfunction(){alert(表单提交了);}/script事件对象
事件触发时就会产生事件对象并以参数的形式传给事件处理函数
dom.onclickfunction(event){//event就是事件对象console.dir(event);
}文本框输入回车键时进行处理判断当前输入的ascii码值是否为13
input.addEventListener(keyup,function(e){if(e.keyCode13){console.log(this.value);}
}阻止表单提交
form.onsubmitfunction(event){//方法1event.preventDefault();//方法2:return false;
}阻止a标签跳转
方法一href设置为javascript:; 方法二οnclick“return false”
样式操作
两种方式style属性和className属性
style
style用来设置单个属性 格式对象.style.样式 样式就是CSS中的样式如果样式使用横线连接则去掉横线改为首字母大写
var pdocument.querySelector(p);
p.style.textAligncenter;用style获取已有的样式 对象.style.样式
p.style.color;className
className通过修改标签的class值来修改属性的样式 对象.className
var pdocument.querySelector(p);
p.classNametitle;获取当前的className 对象.className
标签内容的获取和修改
innerHTML 和 innerTextinnerText不会识别html标签而innerHTML会识别
div classd/divvar ddocument.querySelector(.d);
d.innerHTML(hahah);表单
value和type属性 form action# methodget账号input typetext nameaccount valueadmin placeholder请输入用户名 maxlength10disabled/br/密码input typepassword namepassword value123 placeholder请输入密码 readonly disabled/br/性别input typeradio namegender valuefemale女input typeradio namegender valuemale男br/爱好input typecheckbox namehobby[] valueeat吃input typecheckbox namehobby[] valuedrink checked喝input typecheckbox namehobby[] valueplay玩br/input typefile multiplebr/地址select nameaddroption valuebj北京/optionoption valuesh上海/optionoption valuesz深圳/option/selecttextarea namesign/textareainput typesubmit value提交按钮//formscriptvar formdocument.querySelector(form);//使用属性选择器获取标签对象var usernamedocument.querySelector([typetext]);var passworddocument.querySelector([typepassword]);var genderdocument.querySelectorAll([namegender]);var addrdocument.querySelector([nameaddr]);var signdocument.querySelector([namesign]);form.onsubmitfunction(){for(var i0;igender.length;i){if(gender[i].checked){console.log(gender[i].value);}}console.log(addr.value);console.log(sign.value);return false;}/script修改type属性的值能够修改表单域的状态 div classboxdiv classlockspan classiconfont icon-suo/span/divdiv classinpinput idpwd typepassword placeholder密码/divdiv classeyespan classiconfont icon-yanjing/span/div/divscriptvar eyedocument.querySelector(.eye);var pwddocument.querySelector(#pwd);var eyeIdocument.querySelector(.eye span)eye.onclickfunction(){if(pwd.typepassword){pwd.typetext;eyeI.classicon-yanjing1;}else{pwd.typepassword;eyeI.classicon-yanjing;}}/script复选框
table alingcenter width500 border1 cellspacing0captionh3用户列表/h3/captiontheadtrth width40input typecheckbox/ththid/thth姓名/thth昵称/thth性别/thth width80操作/th/tr/theadtbodytrtdinput typecheckbox/tdtd1/tdtdlux/tdtd光辉女神/tdtd女/tdtda hrefjavascript:;编辑/a/td/trtrtdinput typecheckbox/tdtd1/tdtdlux/tdtd光辉女神/tdtd女/tdtda hrefjavascript:;编辑/a/td/trtrtdinput typecheckbox/tdtd1/tdtdlux/tdtd光辉女神/tdtd女/tdtda hrefjavascript:;编辑/a/td/trtrtdinput typecheckbox/tdtd1/tdtdlux/tdtd光辉女神/tdtd女/tdtda hrefjavascript:;编辑/a/td/tr/tbody/tablescript//全选复选框注册点击事件//获取全选复选框的checked状态//循环表体复选框将每个表体复选框的状态同步成全选复选框//表头中的全选复选框影响表体中的复选框//1.获取全选复选框并注册点击事件var allCheckeddocument.querySelector(thead input);var checksdocument.querySelectorAll(tbody input);allChecked.onclickfunction(){//2.获取当前复选框的状态var statusthis.checked;//console.log(status);//3.同步给表体中的所有复选框for(var i0;ichecks.length;i){checks[i].checkedstatus;}}//表体中的全选复选框影响表头中的复选框//循环为每个表体复选框注册点击事件//点击事件中判断表体每个复选框的状态//所有复选框的checked没有false时全选框选中否则不选中//循环为每一个表体复选框绑定点击事件for(var i0;ichecks.length;i){checks[i].onclickfunction(){//循环表体中的复选框判断checked状态for(var j0;jchecks.length;j){if(checks[j].checkedfalse){allChecked.checkedfalse;break;}else{allChecked.checkedtrue;}}}}/script
/body
/html自定义属性
html5中可通过data-*来设置自定义属性存储数据; 保存的数据以对象形式保存在dataset属性中
div data-namezs data-age8/divdataset:DOMStringMap age:“8” name:“zs”
for(var k in div.dataset){cconsole.log(k,div.dataset[k]);
}属性操作方法
设置属性dom.setAttribute(‘属性名’,‘值’)获取属性值dom.getAttribute(‘属性名’)移除属性dom.removeAtrribute(‘属性名’)
//属性前面的名称data前缀不能省略
div.setAttribute(data-id,1);除了可以操作自定义属性外还可以操作原有属性
新增/删除节点
新增节点
创建新节点并将新节点添加到html文档中
创建标签 document.createElement(“元素名”);
添加节点到文档的方法 方法一dom.insertBefore(d1,d2),在d2前添加d1
div idmaindiv idf/divdiv ids/divdiv idt/div
/div//创建一个新的div标签对象
var divDomdocument.createElement(div);
//将新增div添加到第一个div前
var maindocument.querySelector(#main);
main.insertBefore(divDom,f);方法二d1.appendChild(d2),将d2添加到d1中
//将新增div追加到main中
main.appendChild(divDom);特点添加不会覆盖原有内容 缺点复杂结构的标签不容易添加
字符串节点 insertAdjacentHTML(“添加位置”,标签字符串); 位置值有四个beforebegin、afterbegin、beforeend、afterend
var strlibr第一章/ba href#/a/li;
document.querySelector(ul).insertAdjacentHTML(beforeend,str);删除节点
d1.removeChild(d2)从d1中删除子节点d2
ulli苹果/lili idsec香蕉/lili西瓜/li
/ulvar uldocument.querySelector(ul);
var lidocument.querySelector(#sec);
ul.removeChild(li);删除例子 var arr[{id:1,name:李白,gender:男,age:100},{id:2,name:李白,gender:男,age:100},{id:3,name:李白,gender:男,age:100},{id:4,name:李白,gender:男,age:100},{id:5,name:李白,gender:男,age:100}];var str;for(var i0;iarr.length;i){strtrtdarr[i].id/tdtdarr[i].name/tdtdarr[i].gender/tdtdarr[i].age/tdtdbutton classdel删除/button/td/tr}var tbodydocument.querySelector(tbody);tbody.innerHTMLstr;//给所有删除按钮绑定点击事件var btnsdocument.querySelectorAll(button);for(var i0;ibtns.length;i){btns[i].onclickfunction(){//找到当前删除按钮对应的tr标签var trthis.parentNode.parentNode;tbody.removeChild(tr);}}其他节点属性 parentNode父节点 children子节点伪数组 nextElementSibling下一个兄弟元素节点(IE9) previouElementSibling上一个兄弟元素节点(IE9) nodeName节点名称 nodeType节点类型1.元素节点、2.属性节点、3.文本节点 nodeValue节点值
Tab栏切换
排他思想删除其他元素清除样式给当前元素设置样式 style*{margin:0;padding:0;}.box{width: 600px;height:500px;margin:0 auto;}li{width: 80px;height: 20px;border: 1px solid #eee;}li.active{border:3px solid orange;background-color: #fff;color:orange;}.contentdiv{display:none;width:100%;height:300px;line-height:300px;font-size:30px;text-align:center;}.content .current{display:block;}/style
/head
bodydiv classboxul classclearfixli classactive足球/lili篮球/lili乒乓球/li/uldiv classcontentdiv classcurrent足球消息列表/divdiv 篮球消息列表/divdiv乒乓球消息列表/div/div/divscript//获取所有li标签//li上循环绑定鼠标进入事件//清除所有li标签上的active类为当前li设置active类//获取所有的div//找到选中的li的索引//根据索引找到对应的div//清除所有div上的current类为当前div绑定current类var lisdocument.querySelectorAll(li);var divsdocument.querySelectorAll(.contentdiv);lis.forEach(function(item,index){item.onmouseenterfunction(){//循环清除所有的li的class值lis.forEach(function(val,i){val.className;})this.classNameactive;divs.forEach(function(val,i){val.className;})divs[index].classNamecurrent;}})/script
/bodyBOM
浏览器对象模型提供了一系列和浏览器交互的对象、属性、方法
window对象
window对象是BOM的核心对象也是顶级对象 window调用子对象时可以省略自己 console.log() window.console.log()
全局作用域下声明的变量和函数都自动挂载到window对象上 var username‘xx’ 等价 window.username‘xx’
声明全局变量时一般不使用name因为window对象中有name属性
window对象常用方法
BOM没有通用标准每个浏览器上显示效果不一样
alert() confirm()返回值true/false prompt()点击确定按钮返回值为输入的内容
页面加载事件
window.onload 页面加载事件在页面加载完成后触发 document.DOMContentLoaded 页面DOM加载完成后触发不包括样式表、flash、图片等 优势如果页面需要加载大量的图片或视频文件不需要等待大文件加载完成就会触发一定程度上提高了页面访问速度
window.onresize事件 窗口大小调整事件当窗口大小发生改变时触发
window.onresizefunction(){console.log(window.innerWidth,window.innerHeight);
}div classboxdiv classleft/divdiv classtmp/divdiv classright/div/div//在onresize事件中不断监听innerWidth的值//当innerWidth小于某个值时隐藏tmp//当innerWidth大于某个值时显示tmpvar tmpdocument.querySelector(.tmp);var boxdocument.querySelector(.box);window.onresizefunction(){if(window.innerWidth900){tmp.style.displaynone;box.style.window640px;}else{tmp.style.displayblock;box.style.window800px;}}
