python操作dom_Python Dom 的介绍和使用day1

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

序号用户名密码

111112222233333

var 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

弹出框

Title

margin: 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”在标签里面的最后面添加，是标签的子级