正文

python Dom

IP云
IP云V管理员/0 阅读
12/01
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

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. 第一绑定方式

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

function Clickon(self){

//self 当前点击的标签

}

b.第二种绑定方式

<input id=‘i1’ type='button'>

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()

相关阅读

目录[+]