Python的平凡之路（15）

一、CSS补充：

1、上节课讲述

a、css重用

        <style>
            如果整个页面的宽度 > 900px时：
            {
                .c{
                   共有
                }
                .c1{
                    独有
                }
            }

            .c2{
                独有
            }
        </style>

        <div class='c c1'></div>
        <div class='c c2'></div>

b、自适应和改变大小变形

左右滚动条的出现
宽度，百分比
页面最外层：像素的宽度 => 最外层设置绝对宽度

自适应：media

c、默认img标签，有一个1px的边框
img{
border: 0;
}

d、作业中的数量输入框

2、其他属性

(1)、 position

定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

relative.html

<html>

<head>

h2.pos_left

{

position:relative;

left:-20px

}

h2.pos_right

{

position:relative;

left:20px

}

</style>

</head>

<body>

<h2>这是位于正常位置的标题</h2>

<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>

<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>

<p>相对定位会按照元素的原始位置对该元素进行移动。</p>

<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>

<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>

</body>

absolute.html

<html>

<head>

h2.pos_abs

{

position:absolute;

left:100px;

top:150px

}

</style>

</head>

<body>

<h2 class="pos_abs">这是带有绝对定位的标题</h2>

<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>

</body>

</html>

fix.html

<html>

<head>

p.one

{

position:fixed;

left:5px;

top:5px;

}

p.two

{

position:fixed;

top:30px;

right:5px;

}

</style>

</head>

<body>

<p class="two">更多的文本。</p>

</body>

</html>

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

(2)、 background

设置所有背景属性：

<html>

<head>

body

{

background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;

}

</style>

</head>

<body>

<p>这是一些文本。</p>

</body>

</html>

值	描述	CSS
background-color	规定要使用的背景颜色。	1
background-position	规定背景图像的位置。	1
background-size	规定背景图片的尺寸。	3
background-repeat	规定如何重复背景图像。	1
background-origin	规定背景图片的定位区域。	3
background-clip	规定背景的绘制区域。	3
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	规定要使用的背景图像。	1
inherit	规定应该从父元素继承 background 属性的设置。	1

(3)、 hover

鼠标指针浮动在其上的元素，并设置其样式：

<!DOCTYPE html>

<html>

<head>

<style>

/* hover表示悬浮，active表示活动链接 */

a.ex1:hover,a.ex1:active {color:red;}

a.ex2:hover,a.ex2:active {font-size:150%;}

a.ex3:hover,a.ex3:active {background:red;}

a.ex4:hover,a.ex4:active {font-family:'微软雅黑';}

a.ex5:visited,a.ex5:link {text-decoration:none;}

a.ex5:hover,a.ex5:active {text-decoration:underline;}

</style>

</head>

<body>

<p>请把鼠标指针移动到这些链接上。</p>

<p><a class="ex1" href="/index.html">这个链接改变颜色。</a></p>

<p><a class="ex2" href="/index.html">这个链接改变字体大小。</a></p>

<p><a class="ex3" href="/index.html">这个链接改变背景色。</a></p>

<p><a class="ex4" href="/index.html">这个链接改变字体。</a></p>

<p><a class="ex5" href="/index.html">这个链接会出现下划线。</a></p>

</body>

</html>

未访问、已访问、悬浮和活动链接，并设置它们的样式：

a:link    {color:blue;}
a:visited {color:blue;}
a:hover   {color:red;}
a:active  {color:yellow;}

(4)、 overflow

(5)、 z-index

设置图像的 z-index

<html>

<head>

img

{

position:absolute;

left:0px;

top:0px;

z-index:-1;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>

</body>

</html>

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值。

(6)、opacity

设置 div 元素的不透明级别

值	描述	测试
value	规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。	测试
inherit	应该从父元素继承 opacity 属性的值。

<!DOCTYPE html>

<html>

<head>

function ChangeOpacity(x)

{

// 返回被选选项的文本

var opacity=x.options[x.selectedIndex].text;

var el=document.getElementById("p1");

if (el.style.opacity!==undefined)

{el.style.opacity=opacity;}

else

{alert("Your browser doesn't support this example!");}

}

</script>

</head>

<body>

<p id="p1">请从下面的例子中选择一个值，以改变此元素的不透明度。</p>

<option />0

<option />0.2

<option />0.5

<option />0.8

<option selected="selected" />1

</select>

</body>

</html>

示例：输入框右边放置图标

二、JavaScript

参考：http://www.cnblogs.com/wupeiqi/articles/5602773.html

0、释义

独立的语言，浏览器具有js解释器
    JavaScript代码存在形式：
        - Head中
                <script>
                    //javascript代码
                    alert(123);
                </script>

                <script type="text/javascript">
                    //javascript代码
                    alert(123);
                </script>
        - 文件
            <script src='js文件路径'> </script>

PS: JS代码需要放置在 <body>标签内部的最下方

注释

当行注释 //
多行注释 /* */

1、局部变量 var

name = 'alex' # 全局变量

var name = 'eric' # 局部变量

<script type="text/javascript">

// 全局变量

name = 'seven';

function func(){

// 局部变量

var age = 18;

// 全局变量

gender = "男"

}

</script>

2、基本数据类型：

a、数字

a = 18;

b、字符串

a = "alex”
a.chartAt(索引位置)
a.substring(起始位置，结束位置)
a.lenght 获取当前字符串长度

obj.length 长度

obj.trim() 移除空白

obj.trimLeft()

obj.trimRight)

obj.charAt(n) 返回字符串中的第n个字符

obj.concat(value, ...) 拼接

obj.indexOf(substring,start) 子序列位置

obj.lastIndexOf(substring,start) 子序列位置

obj.substring(from, to) 根据索引获取子序列

obj.slice(start, end) 切片

obj.toLowerCase() 大写

obj.toUpperCase() 小写

obj.split(delimiter, limit) 分割

obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效)

obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。

obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项，

$数字：匹配的第n个组内容；

$&：当前匹配的内容；

$`：位于匹配子串左侧的文本；

$'：位于匹配子串右侧的文本

$$：直接量$符号

c、数组

a = [11,22,33]

d、字典

a = {'k1':'v1','k2':'v2’}

obj.length 数组的大小

obj.push(ele) 尾部追加元素

obj.pop() 尾部获取一个元素

obj.unshift(ele) 头部插入元素

obj.shift() 头部移除元素

obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素

obj.splice(n,0,val) 指定位置插入元素

obj.splice(n,1,val) 指定位置替换元素

obj.splice(n,1) 指定位置删除元素

obj.slice( ) 切片

obj.reverse( ) 反转

obj.join(sep) 将数组元素连接起来以构建一个字符串

obj.concat(val,..) 连接数组

obj.sort( ) 对数组元素进行排序

e、布尔值

g、其他

f、For循环

（1）. 循环时，循环的元素是索引

            a = [11,22,33,44]
            for(var item in a){
                console.log(item);
            }

            a = {'k1':'v1','k2':'v2'}
            for(var item in a){
                console.log(item);
            }

           var names = ["alex", "tony", "rain"];
 
           for(var i=0;i<names.length;i++){
                    console.log(i);
                    console.log(names[i]);
            }

           var names = ["alex", "tony", "rain"];

          for(var index in names){
                    console.log(index);
                    console.log(names[index])

（2）.
            for(var i=0;i<10;i=i+1){

            }

            a = [11,22,33,44]
            for(var i=0;i<a.length;i=i+1){

            }

（3）不支持字典的循环

3、条件语句

if(条件){

        }else if(条件){

        }else if(条件){

        }else{

        }

        == 值相等
        === 值和类型都相等
        && and
        || or

4、函数的定义：

function func(){

...

}

function f2(){

var arg= 111;

function f3(){

console.log(arg);

}

return f3;

}

ret = f2();

ret();

5、Dom

a. innerText

  获取标签中的文本内容
    标签.innerText
    对标签内部文本进行重新复制
    标签.innerText = ""

b. className
tag.className =》直接整体做操作
tag.classList.add('样式名') 添加指定样式
tag.classList.remove('样式名') 删除指定样式

PS：
<div onclick='func();'>点我</div>
<script>
function func(){

                    }
   </script>

c. checkbox
获取值
checkbox对象.checked
设置值
checkbox对象.checked = true

c、事件：

。。。。

</script>

d、定时器

setInterval('函数()', 4000)

e、其他：

alert()

console.log()

f. Document类型

document.childNodes 继承自上面讲的Node类型，可以返回文档的直接子节点（通常包括文档声明和html节点）

document.documentElement 可以直接拿到html节点的引用（等价于document.getElementsByTagName(“html”)[0]）。

document.body body节点的引用

document.title 页面的title，可以修改，会改变浏览器标签上的名字

document.URL 页面的url

document.referrer 取得referrer，也就是打开这个页面的那个页面的地址，做来源统计时候比较有用

document.domain 取得域名，可以设置，但是通常只能设置为不包含子域名的情况，在一些子域名跨域情况下有效。

6 异常处理

try {

//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行

}

catch (e) {

// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。

//e是一个局部变量，用来指向Error对象或者其他抛出的对象

}

finally {

//无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。

}

注：主动跑出异常 throw Error('xxxx')

三、课堂例子

t1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个页面</title>
    <style>
        img{
            border: 0;
        }
    </style>
</head>
<body>
    <a href="http://www.sogou.com">asdf</a>
    <a href="http://www.sogou.com">
        <img src="wgl.jpg" style="width: 200px;height: 300px">
    </a>

</body>
</html>

t2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二个页面</title>
    <style>
        .pg-header {
            <!-- 高度48px -->
            height: 48px;
            background-color: black;
            color: #DDDDDD;
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
        }
        .pg-body{
            background-color: #DDDDDD;
            height: 5000px;
            <!-- 离顶部55px -->
            margin-top: 55px;

        }
    </style>
</head>

<body>
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
        <div style="position: absolute;left:0;bottom: 0;width: 50px;height: 50px;background-color: black; ">

        </div>
    </div>
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
        <div style="position: absolute;right:0;top: 0;width: 50px;height: 50px;background-color: black; ">

        </div>
    </div>

</body>
</html>

t3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第三个页面</title>
</head>
<body>
    <div style="z-index: 10;position: fixed;top:50%;left:50%;
    margin-left: -250px;margin-top: -200px;background-color: white;height: 40px;width: 500px;">
        <input type="text" />
        <input type="text" />
        <input type="text" />
    </div>
    <div style="z-index: 9;position: fixed;background-color: black;
    top:0;
    bottom: 0;
    right: 0;
    left:0;
    opacity: 0.5;
    "></div>
    <div style="height: 5000px;background-color: green;">
        这是一个嵌套!
    </div>
</body>
</html>

t4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第四个页面</title>
</head>
<body>
     <div style="height: 500px;width: 500px;overflow: auto">
        <img src="wgl.jpg">
    </div>
    <div style="height: 500px;width: 500px;overflow: hidden">
        <img src="2.jpg">
    </div>
</body>
</html>

t5.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第五个页面</title>
    <style>
        .pg-header{
            position: fixed;
            right:0;
            left:0;
            top:0;
            height:48px;
            background-color: #2459a2;
            line-height:48px;
        }
        .pg-body{
            margin-top:50px;
        }
        .w{
            width:980px;
            margin:0 auto;
        }
        .pg-header .menu{
            display: inline-block;
            /*上 右 下 左*/
            padding:0 10px 0 10px;
            color: white;
        }
        /*当鼠标移动到当前标签上时,以下css属性才生效*/
        .pg-header .menu:hover{
            background-color: blue;
        }
    </style>
</head>
    <div class="pg-header">
        <div class="w">
            <a class="logo">LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
        </div>
    <div class="pg-body">
        <div class="w">a</div>
    </div>
    </div>
<body>

</body>
</html>

t6.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第六个页面</title>
</head>
<body>
    <div style="height:100px;"></div>
    <div style="background-image: url(icon_18_118.png);background-repeat: no-repeat;height: 40px;width:40px;border: 1px solid red;"></div>
</body>
</html>

t7.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第七个页面</title>
</head>
<body>
    <div style="height: 35px;width: 400px;position: relative;">
        <input type="text" style="height: 35px;width:370px;padding-right: 30px;">
        <span style="position: absolute;right: 6px;top:10px;background-image: url(i_name.jpg);
        height:16px;width: 16px;display: inline-block;"></span>
    </div>
</body>
</html>

t8.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第八个页面</title>
</head>
<body>
    <div id="i1">欢迎老男孩莅临指导</div>
    <script>
        function func() {
           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('func()',500);
    </script>
</body>
</html>

t9.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第九个页面</title>
</head>
<body>
    <div id="i1">我是i1</div>
    <a>asdf</a>
    <a>909</a>
    <a>kafsufd</a>
</body>
</html>

t10.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第十个页面</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();"/>
    </div>
    <!-- 遮罩层开始 -->
    <div id="i1" class="c1 hide"></div>
    <!-- 遮罩层结束 -->
    <!-- 弹出框开始 -->
    <div id="i2" class="c2 hide">
        <p><input type="text"/></p>
        <p><input type="text"/></p>
        <p>
            <input type="button" value="取消" onclick="HideModel();"/>
            <input type="button" value="确定"/>
        </p>
    </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>


t11.html

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</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 type="button" value="全选" onclick="ChooseAll();" />
	<input type="button" value="取消" onclick="CancleAll();" />
	<input type="button" value="反选" onclick="ReverseAll();" />

	<table>
	<thead>
	<tr>
	<th>选择</th>
	<th>主机名</th>
	<th>端口</th>
	</tr>
	</thead>
	<tbody id="tb">

	<tr>
	<td>
	<input type="checkbox" />
	</td>
	<td>1.1.1.1</td>
	<td>190</td>
	</tr>
	<tr>
	<td><input type="checkbox"f id="test" /></td>
	<td>1.1.1.2</td>
	<td>192</td>
	</tr>
	<tr>
	<td><input type="checkbox" /></td>
	<td>1.1.1.3</td>
	<td>193</td>
	</tr>
	</tbody>
	</table>
	</div>

	<!-- 遮罩层开始 -->
	<div id="i1" class="c1 hide"></div>
	<!-- 遮罩层结束 -->

	<!-- 弹出框开始 -->
	<div id="i2" class="c2 hide">
	<p><input type="text" /></p>
	<p><input type="text" /></p>
	<p>
	<input type="button" value="取消" onclick="HideModel();"/>
	<input type="button" value="确定"/>

	</p>

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

	function ChooseAll(){
	var tbody = document.getElementById('tb');
	// 获取所有的tr
	var tr_list = tbody.children;
	for(var i=0;i<tr_list.length;i++){
	// 循环所有的tr，current_tr
	var current_tr = tr_list[i];
	var checkbox = current_tr.children[0].children[0];
	checkbox.checked = true;

	}
	}

	function CancleAll(){
	var tbody = document.getElementById('tb');
	// 获取所有的tr
	var tr_list = tbody.children;
	for(var i=0;i<tr_list.length;i++){
	// 循环所有的tr，current_tr
	var current_tr = tr_list[i];
	var checkbox = current_tr.children[0].children[0];
	checkbox.checked = false;

	}
	}

	function ReverseAll(){
	var tbody = document.getElementById('tb');
	// 获取所有的tr
	var tr_list = tbody.children;
	for(var i=0;i<tr_list.length;i++){
	// 循环所有的tr，current_tr
	var current_tr = tr_list[i];
	var checkbox = current_tr.children[0].children[0];
	if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}}

	</script>
	</body>
	</html>


t12.html

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	.hide{
	display: none;
	}
	.item .header{
	height: 35px;
	background-color: #2459a2;
	color: white;
	line-height: 35px;
	}
	</style>
	</head>
	<body>
	<div style="height: 48px"></div>

	<div style="width: 300px">

	<div class="item">
	<div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div>
	<div class="content">
	<div>内容1</div>
	<div>内容1</div>
	<div>内容1</div>
	</div>
	</div>
	<div class="item">
	<div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div>
	<div class="content hide">
	<div>内容2</div>
	<div>内容2</div>
	<div>内容2</div>
	</div>
	</div>
	<div class="item">
	<div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div>
	<div class="content hide">
	<div>内容3</div>
	<div>内容3</div>
	<div>内容3</div>
	</div>
	</div>
	<div class="item">
	<div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div>
	<div class="content hide">
	<div>内容4</div>
	<div>内容4</div>
	<div>内容4</div>
	</div>
	</div>



	</div>

	<script>
	function ChangeMenu(nid){
	var current_header = document.getElementById(nid);

	var item_list = current_header.parentElement.parentElement.children;

	for(var i=0;i<item_list.length;i++){
	var current_item = item_list[i];
	current_item.children[1].classList.add('hide');
	}

	current_header.nextElementSibling.classList.remove('hide');
	}
	</script>
	</body>
	</html>

t13.html

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<body>
	<div>
	<div></div>
	<div>
	c1
	</div>
	</div>
	<div>
	<div></div>
	<div id="i1">
	c2
	</div>
	</div>
	<div>
	<div></div>
	<div>
	c3
	</div>
	</div>
	</body>
	</html>

四、补充

JS-DOM Element方法和属性

（一）,获取html元素

1.getElementByID(id)

通过对元素的ID访问,这是DOM一个基础的访问页面元素的方法.
example:
<div id="divid">测试</div>
<script language="javascript">
var div=document.getElementByID("divid”);
alert (div.nodeName); //显示元素名
</script>
如果id在元素中不是唯一的,那么获得的将是第一个ID.
2.getElementsByName(name)
仅用于input radio checkbox等元素,返回名字为name的元素数组
example:
<div name="george"></div>
<input name="george"></div>
<script language=javascript>
var ge=document.getElementsByName("george");
alert (georges.length); //获取georges个数,对div唔效果
</script>
3.getElementsByTagName(tagname)
返回具有tagname的元素列表数组.处理大的DOM结构会用到它

（二）,DOM Element常用方法
1.appendChild(node)   //增加内容
向当前对象追加节点,example:
<div id="test">123</div>
<script type="text/javascript">
var newdiv=document.createElement("div");
var newtext=document.createTextNode("A new div");
newdiv.appendChild(newtext) ;
document.getElementById("test").appendChild(newdiv) ;
</script>
当然,上面的功能用document.getElementById("test").innerHTML="测试一下"就可实现,遗憾的是,innerHTML不属于DOM.
2,removeChild(childreference)
移除当前节点的子节点,并返回节点
<div id="father"><div id="child">A child</div></div>
<script type="text/javascript">
var childnode=document.getElementById("child");
var removednode=document.getElementById("father").removeChild(childnode)
</script>
3.cloneNode(deepBoolean)
复制并返回当前的复制节点,由于复制了原节点的id属性,所以在document树中要改ID属性,以确保ID唯一性.
4,insertBefore(newElment,targetElement)  插入新的节点
在当前节点插入一个新节点,如果targetElement为null,那新节点为最后节点.
example:
<body>
<span id="lovespan">熊掌我所欲也!</span>
</body>
<script type="text/javascript">
var lovespan=document.getElementById("lovespan");  //获取id
var newspan=document.createElement("span");
var newspanref=document.body.insertBefore(newspan, lovespan);
newspanref.innerHTML="鱼与";
</script>

（三）,DOM Element常用属性
1、childeNodes  返回所有子节点对象,
例如
<ul id="mylist">
<li>美国</li>
<li>意大利</li>
<li>加拿大</li>
</ul>
<script>
var msg="" ;
var mylist=document.getElementById("mylist")
for (i=0; i<mylist.childNodes.length; i++){
   var li=mylist.childNodes[i];
      msg+=li.innerText;
}
alert (msg);
</script>
2,innerHTML
这是一个标准,但它并不书DOM
例如:
<div id="bbb"><span id="aaa">我拉</span></div>
<input type=button  value="点击看看">
<script language="javascript">
function change()
{
document.getElementById("aaa").innerHTML= "修改修改";
}
</script>
3,style
这是一个极其重要的属性,可以获取并修改每个单独的样式.
例如:document.getElementByTagName("body")[0].style.backgroundColor="#cccccc"
4、firstChild    返回第一个子节点
lastChild     返回最后一个子节点
parentNode   返回父节点的对象。
nextSibling   返回下一个兄弟节点的对象
previousSibling 返回前一个兄弟节点的对象
nodeName 返回节点的HTML标记名称，使用英文的大写字母，如P, FONT
5,click()
执行元素的一次点击，可以用于通过脚本来触发onClick函数

发表于 2016-11-14 21:05 wspkh 阅读(270) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Python的平凡之路（15）

公告

导航