DOM:
1.查找元素:
1.直接查找
2.间接查找
1.节点 (所有内容)
2.元素 (被括号括起来的内容)
比如:
111
1
节点包括111和1,元素只有1
2.操作元素:
1.ID
1.获得标签内容
1.通过ID查找到标签:t=document.getElementById("")
2.通过标签得到间接寻找相关节点:t.childNodes、t.parentNode
3.获得标签的值: t.value
4.获得标签的文本内容:t.innertext、t.innerHTML(
如:一111二)
t.innertext ————>一111二
t.innerHTML ————> 一111二
2.修改标签内容
t.value = "66"
2.class
1.寻找标签,获得标签列表:t=document.getElementsByTagName("div")
2.切片,对目的对线进行操作:(当然,如果知道ID,就找得更快了)
t[0].classList、t[0].classList.add('c4')、t[0].classList.remove()
3.样式
同理:也可以对标签的其他样式进行修改:
如t.style.color="red",如果带-:如background-color就变成t.style.backgroundColor
4.属性(
t.getAttribute(name) 获得属性
t.setAttribute("name","xixi") 修改属性
t.removeAttribute("name") 移除属性
可以用来控制选择框的是否选中,即控制checked
Title序号用户名密码
111112222233333var t1= document.getElementById("tb");
var t2=t1.children;for(var i=0;i
{
t3=t2[i].firstElementChild.firstElementChild;
t3.setAttribute("checked","checked");
t3.checked=true;
}
}
function CancleALL() {
var t1= document.getElementById("tb");
var t2=t1.children;for(var i=0;i
{
t3=t2[i].firstElementChild.firstElementChild;
t3.removeAttribute("checked")
t3.checked=false
}
}
function ReverseALL() {
var t1= document.getElementById("tb");
var t2=t1.children;for(var i=0;i
{
t3=t2[i].firstElementChild.firstElementChild;
var val=t3.getAttribute("checked");if ((t3.checked==true || val=="checked" )&&t3.checked!=false){t3.checked=false;t3.removeAttribute("checked")}else{t3.checked=true;t3.setAttribute("checked","checked");}
}
}
例子
PS:当在网页上勾选单选框时,不会在标签中增加 checkde=checked,所以不能通过获取属性来判断,而是直接用
对象.checked == true or false 来改变单选框的是否选中
最后一点,因此两个方法都能改变,所以两种方法要同时兼顾。
当然,最好的方法就是统一使用 对象.checked 来改变
3.使用的例子:
搜索框
1.创建输入框
2.给输入框绑定事件
3.在script上定义事件的内容
Title//onfocus表示鼠标的焦点在对话框 onblur鼠标的焦点移出对话框
var t=document.getElementById("i1");
var val=t.valueif (val=="请输入内容"){t.value=""}
}
function f2() {
var t=document.getElementById("i1");
var val=t.value;//去空格,看字符长度if (val.trim().length==0){t.value="请输入内容"}
}
View Code
弹出框
Titlemargin: 0;
}
.bj{
height: 2000px;
width:100%;
background-color: #9E9EA6;
}
.hide{
display: none;!important;
}
.shade{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
background-color: #5ab2ce;
z-index: 100;
}
.modal{
width: 400px;
height: 400px;
position: fixed;
background-color: white;
top:50%;
left:50%;
margin-top:-200px ;
margin-left: -200px;
z-index: 101;
}
var t1= document.getElementById("shade");
var t2= document.getElementById("modal");
t1.classList.remove("hide");
t2.classList.remove("hide");
}
function f2() {
var t1= document.getElementById("shade");
var t2= document.getElementById("modal");
t1.classList.add("hide");
t2.classList.add("hide");
}
View Code
4.标签操作
1.创建标签
方法一:创建对象
var tag = document.createElement('a')
tag.innerText = 'haha'
tag.className = 'c1'
tag.href = "http://www.baidu.com"
方法二:创建字符串
var tag = "haha"
2.添加标签
方法一:创建对象
xx.appendChild(tag) 默认加到最后
xx.insertBefore(tag,xx.children[1]) 加到任意位置
xx.insertAdjacentElement("afterBegin",document.createElement('p'))
方法二:创建字符串
xx.insertAdjacentHTML("beforeEnd",tag); 当成标签传进去
xx.insertAdjacentText("beforeEnd",tag); 当成文本传进去
第一个参数只能是
“beforeBegin”在标签外面的前面添加,与标签同级;
“afterEnd”在标签外面的后面添加,与标签同级;
“beforeEnd”在标签里面的最后面添加,是标签的子级