python Dom

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

一、查找元素

1、直接查找

document.getElementById（'il'）根据ID获取一个标签

document.getElementsByName('div') 根据name属性获取标签集合

document.getElementsByClassName('c1') 根据class属性获取标签集合

document.getElementsByTagName('') 根据标签名获取标签集合

例如：tag=document.getElementById（'il'）

html结构图

2、间接查找(在直接查找的基础下进行间接查找)

parentNode // 父节点

childNodes // 所有子节点

firstChild // 第一个子节点

lastChild // 最后一个子节点

nextSibling // 下一个兄弟节点

previousSibling // 上一个兄弟节点

parentElement // 父节点标签元素

children // 所有子标签

firstElementChild // 第一个子标签元素

lastElementChild // 最后一个子标签元素

nextElementtSibling // 下一个兄弟标签元素

previousElementSibling // 上一个兄弟标签元素

例如：tag=document.getElementById（'il'）

tag.parentNode

结果：结构图

二、操作

innerText 文本例如：document.getElementById（'il'）.innerText 输出标签中的内容。

outerText

innerHTML HTML内容

innerHTML

value 值

class操作

className                // 获取所有类名

classList.remove(cls)    // 删除指定类

classList.add(cls)       // 添加类

例如,如果id=il的标签中没有name的话，有添加属性class='c1'：

tag=document.getElementById（'il'）

tag.classname='c1'     #输出html结构图

tag.classlist      #输出列表

事件操作：

弹窗实例：

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>Insert title here</title>

	<style>

        .hide{

            display: none;

        }

        .c1{

            position: fixed;

            left: 0;

            top: 0;

            right: 0;

            bottom: 0;

            background-color: black;

            opacity: 0.6;

            z-index: 9;

        }

        .c2{

            width: 500px;

            height: 400px;

            background-color: white;

            position: fixed;

            left: 50%;

            top: 50%;

            margin-left: -250px;

            margin-top: -200px;

            z-index: 10;

        }

	</style>

</head>

<body style='margin:0;'>

	<div>

		<input type="button" value="点我" onclick='ShowModel();'></input>

	</div>

	<!--遮罩开始-->

	<div class='c1 hide' id='i1'></div>

	<!-- 遮罩结束 -->

	<div class='c2 hide ' id="i2">

	     <input type="button" value="取消" onclick='HideModel();'></input>    

	</div>

	<script >

	function ShowModel(){

        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');

    }

	</script>

</body>

</html>

样式操作：

className

classList : classList.add/classList.remove

obj.style.fontSize='11px';

obj.style.backgroundColor='red';

obj.style.color='red';

属性操作：

obj.setAttributr('','');

obj.removeAttribute（）；

创建标签的两中方式：字符串方式和对象方式

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<input type='button' onclick='A1();' value='+'/>

<input type='button' onclick='A2();' value='+'/>

<div id='i1'>

	<p><input type='text'/></p>

</div>

<script>

	function A1(){

	 	var tag='<p><input type="text"/></p>';

	 	document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag);

	  }

	function A2(){

	 	var tag=document.createElement('input');

	 	tag.setAttribute('type','text');

	 	tag.style.fontSize='11px';

	 	tag.style.color='red';

	 	var p=document.createElement('p');

	 	p.appendChild(tag);

	 	document.getElementById('i1').appendChild(p);

	  }

</script>

</body>

</html>

提交表单

任何标签都可以通过document 提交表单

样式、行为、结构相分离。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<table border='1'; width='300px'>

	<tr><td>1</td><td>2</td><td>3</td></tr>

	<tr><td>1</td><td>2</td><td>3</td></tr>

	<tr><td>1</td><td>2</td><td>3</td></tr>

</table>

<script>

   var MT=document.getElementsByTagName('tr');

   var len=MT.length

   for(var i=0;i<len;i++){

	   MT[i].onmouseover=function(){

		   this.style.backgroundColor='red';

	   }

	   MT[i].onmouseout=function(){

		   this.style.backgroundColor='';

	   }

   }

</script>

</body>

</html>

绑定事件的两种方式：

a.直接标签绑定 onclick='xx()' onfocus

b.先获取dom对象然后进行绑定

this,当前触发事件的标签

a. 第一绑定方式

function Clickon(self){

//self 当前点击的标签

}

b.第二种绑定方式

document.getElementById('i1').onclick=function(){

//this 代指当前点击的标签

}

1.冒泡

2.词法分析

function t1(age){

console.log(age); //function age()

var age=27;

console.log(age);//27

function age(){}

console.log(age);//27

}

t1(3)

分析过程，还没正式执行：

active object ====>AO

1.形式参数

2.局部变量

3.函数声明表达式

1.形式参数

AO.age=undefined

AO.age=3;

2.局部变量

AO.age=undefined

3.函数声明表达式

AO.age=function()

python Dom的更多相关文章

python DOM解析XML
#conding:utf-8 # -*- coding:utf-8 -*- __author__ = 'hdfs' """ XML 解析 :DOM解析珍整个文档作为一个可 ...
python dom操作
1.DOM介绍 (1)什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节 ...
python: DOM 小实例
一.全选全部取消反选全选:选择指定的所有项目. 全部取消: 取消所有选定的项目. 反选: 选择未选定的,之前已选定的则取消. <!DOCTYPE html> <html la ...
xml.dom——文档对象模型API
文档对象模型,或者“DOM”,是一个跨语言API的World Wide Web Consortium(W3C)来访问和修改XML文档.DOM的实现提供了一个XML文档树结构,或允许客户机代码从头开始建 ...
UI——DOM
原文链接:Introduction to the DOM Introduction The Document Object Model, usually referred to as the DOM, ...
python2.7入门---XML解析
首先我们先来考虑,什么是XML?XML 指可扩展标记语言(eXtensible Markup Language).XML 被设计用来传输和存储数据.XML是一套定义语义标记的规则,这些标记将文 ...
Python之Web前端Dom, jQuery
Python之Web前端: Dom jQuery ###Dom 一. 什么是Dom? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...
Python开发【前端】：DOM
DOM(文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页 ...
Python自动化【第十五篇】：CSS、JavaScript 和 Dom介绍
本节内容 CSS javascript dom CSS position标签 fixed: 固定在页面的某个位置 relative + absolute: 相对定位 opacity:0.5 设置透明度 ...

随机推荐

PAT Advanced 1015 Reversible Primes (20) [素数]
题目 A reversible prime in any number system is a prime whose "reverse" in that number syste ...
java内部类（构造spring中的接收返回数据的实体类）
说起内部类这个词,想必很多人都不陌生,但是又会觉得不熟悉.原因是平时编写代码时可能用到的场景不多,用得最多的是在有事件监听的情况下,并且即使用到也很少去总结内部类的用法.今天我们就来一探究竟. 原文链 ...
bzoj3218 a+b Problem（最小割+主席树优化建边）
由于6.22博主要学测,大半时间学文化课,近期刷题量&写题解的数量会急剧下降. 这题出得挺经典的,首先一眼最小割,考虑朴素的做法:与S联通表示白色,与T联通表示黑色,S向i连流量为w[i]的边 ...
6.docker container
1. 什么是container 通过 image 创建 (copy得到的) 在 image layer (在image 层) 上增加了一层 container layer (container 层 ...
吴裕雄--天生自然TensorFlow高层封装：使用TFLearn处理MNIST数据集实现LeNet-5模型
# 1. 通过TFLearn的API定义卷机神经网络. import tflearn import tflearn.datasets.mnist as mnist from tflearn.layer ...
C++ malloc()函数的注意点及使用示例
1.malloc()函数的头文件是stdlib.h,其函数声明如下: void* malloc(size_t size); 其中参数size_t size表示动态内存分配空间的大小,以字节为单位. s ...
mpu6050的驱动的加载和测试步骤
mpu6050的使用方法: 1.接线方式: VCC,GND,SCL,SDA,正常接法,VCC接3.3v,主要说一下AD0引脚,用来表示地址接低电平设备地址为0x68,接高电平表示0x69 2.设备接 ...
十四、linux-MySQL的数据库集群读写分离及高可用性、备份等
一.数据库集群及高可用性二.mysql实现读写分离 mysql实现读写分离有多种方式: 1)代码语言(php\python\java等)层面实现读写分离,找开发进行实现. 2)通过软件工具实现读写分 ...
Qt HWND的句柄与QWidget的转换
QT中用到HWND的句柄在编程中遇到了问题,第三方API用了hwnd类型做形参,但是QT中又没有该类型,可以做如下操作来解决问题. 在.h中先声明: HWND m_hWnd; 再声明 public: ...
python-django电商项目-需求分析架构设计数据库设计_20191115
python-django电商项目需求分析 1.用户模块 1)注册页注册时校验用户名是否已被注册. 完成用户信息的注册. 给用户的注册邮箱发送邮件,用户点击邮件中的激活链接完成用户账户的激活. 2) ...

python Dom

一、查找元素

二、操作

python Dom的更多相关文章

随机推荐

热门专题