python操作dom_【Python第十二篇】Dom

文档对象模型(Document Object Model，DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

一、查找元素

1、直接查找

2、间接查找

二、操作

1、内容

2、属性

	111	222
	111	222
	111	222
	111	222

var tb= document.getElementById('tb');

var trs=tb.childNodes;for(var i =0; i

var current_tr=trs[i];if(current_tr.nodeType==1){

var inp= current_tr.firstElementChild.getElementsByTagName('input')[0];

inp.checked=true;

}

}

}

function CancelAll(ths){

var tb= document.getElementById('tb');

var trs=tb.childNodes;for(var i =0; i

var current_tr=trs[i];if(current_tr.nodeType==1){

var inp= current_tr.firstElementChild.getElementsByTagName('input')[0];

inp.checked=false;

}

}

}

function ReverseCheck(ths){

var tb= document.getElementById('tb');

var trs=tb.childNodes;for(var i =0; i

var current_tr=trs[i];if(current_tr.nodeType==1){

var inp= current_tr.firstElementChild.getElementsByTagName('input')[0];if(inp.checked){

inp.checked=false;

}else{

inp.checked=true;

}

}

}

}

demo

3、class操作

4、标签操作

a.创建标签

b.操作标签

5、样式操作

ths.style.color= "black";if(ths.value == '请输入关键字' || ths.value.trim() == ""){

ths.value= "";

}

}

function Blur(ths){if(ths.value.trim() == ""){

ths.value= '请输入关键字';

ths.style.color= 'gray';

}else{

ths.style.color= "black";

}

}

demo

margin: 0px;

}

img {

border: 0;

}

ul{

padding: 0;

margin: 0;

list-style: none;

}

.clearfix:after {

content:".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.wrap{

width: 980px;

margin: 0 auto;

}

.pg-header{

background-color: #303a40;

-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);

box-shadow: 0 2px 5px rgba(0,0,0,.2);

}

.pg-header .logo{

float: left;

padding:5px 10px 5px 0px;

}

.pg-header .logo img{

vertical-align: middle;

width: 110px;

height: 40px;

}

.pg-header .nav{

line-height: 50px;

}

.pg-header .nav ul li{

float: left;

}

.pg-header .nav ul li a{

display: block;

color:#ccc;

padding: 0 20px;

text-decoration: none;

font-size: 14px;

}

.pg-header .nav ul li a:hover{

color:#fff;

background-color: #425a66;

}

.pg-body{

}

.pg-body .catalog{

position: absolute;

top:60px;

width: 200px;

background-color: #fafafa;

bottom: 0px;

}

.pg-body .catalog.fixed{

position: fixed;

top:10px;

}

.pg-body .catalog .catalog-item.active{

color:#fff;

background-color: #425a66;

}

.pg-body .content{

position: absolute;

top:60px;

width: 700px;

margin-left: 210px;

background-color: #fafafa;

overflow: auto;

}

.pg-body .content .section{

height: 500px;

}

• 首页

• 功能一

• 功能二

第1张

第2张

第3张

第一章

第二章

第三章

var bodyScrollTop=document.body.scrollTop;if(bodyScrollTop>50){

document.getElementsByClassName('catalog')[0].classList.add('fixed');

}else{

document.getElementsByClassName('catalog')[0].classList.remove('fixed');

}

}

Demo-滚动固定

6、位置操作

7、提交表单

8、其他操作

三、事件

对于事件需要注意的要点：

this

event

事件链以及跳出

this标签当前正在操作的标签，event封装了当前事件的内容。

实例：

Title

var tag= document.getElementById('i1');

var val=tag.value;

console.log(val);if(val === "请输入纳税人识别号"){

tag.value= "";

}

}

function Blur(){

var tag= document.getElementById('i1');

var val=tag.value;if(val.length ===0){

tag.value= '请输入纳税人识别号';

}

}

搜索框中的提示文字

生日快乐

欢迎税友集团总裁张镇潮先生莅临甘肃分甘肃指导。

var tag= document.getElementById('i1');//获取标签的内容

var content=tag.innerText;

var f=content.charAt(0);

var l= content.substring(1,content.length);

var new_content= l +f;

tag.innerText=new_content;

}

setInterval('f1()',300)

滚动显示

Title

display: none;

}

.c1{

position: fixed;

left:0;

right: 0;

top: 0;

bottom: 0;

background-color: black;

opacity:0.5;

z-index: 9;

}

.c2{

height: 400px;

width: 500px;

left:50%;

top:50%;

margin-top: -200px;

margin-left: -250px;

z-index: 10;

background-color: white;

position: fixed;

}

主机名端口

1.1.1.1801.1.1.2801.1.1.380

document.getElementById('i1').classList.remove('hide');

document.getElementById('i2').classList.remove('hide');

}

function HideModel() {

document.getElementById('i1').classList.add('hide');

document.getElementById('i2').classList.add('hide');

}

模态对话框