JavaWeb-04(BOM&DOM)JavaWeb-04

75 阅读 0 评论 50 点赞

我是靠谱客的博主高兴萝莉，最近开发中收集的这篇文章主要介绍JavaWeb-04(BOM&DOM)JavaWeb-04，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

JavaWeb-04

JavaWeb-BOM&DOM

BOM

一、知识回顾

* BOM 概述
* BOM 的各个对象
* window对象
innerHeight，innerWidth
document.body.clientWidth,document.body.clientHeight,
self
opener:超链和window.open()
parent : iframe和frame
frames[]:
三种对话框： alert(),prompt(),confirm()
定时器： setTimeout(),setInterval()
模态窗口： showModalDialog() ,showModelessDialog()
*
History对象
forward() ,back(),go()
*
Location对象.

二、内容

事件（掌握，明白每个事件发生的时机）

1、鼠标移动事件

* onmousemove(event) : 鼠标移动事件event是事件对象。名字固定
* onmouseover : 鼠标悬停事件,当鼠标移动到某个控件上面的时候发生
this: 把this写在那个标签里面就代表那个标签对象
this.style.backgroundColor : 当调用样式表中的属性的时候，如果属性中间有横杠，则应去掉.
示例： 当鼠标移动到p标签上的时候，p标签改变样式
* onmouseout : 鼠标移出事件,当鼠标从控件上移开的时候

2、鼠标点击事件

onclick : 当鼠标单击某个控件时发生
示例： 当单击按钮时，在<p>中显示字符串 "冠希哥来了" 。

3、加载与卸载事件 ####

*加载事件(onload) : 在整个页面的元素加载完毕之后发生
*卸载事件(onunload) : 是在页面关闭时发生
注意： onload和onunload事件必须写在body或者图片标签里面

4、聚焦与离焦事件

*聚焦事件onfocus：是在控件获得焦点的时候发生
*离焦事件onblur：是在控件失去焦点的时候发生
示例： 文本框获得焦点的时候改变样式，失去焦点时变回原样

5、键盘事件

onkeypress,onkeyup,onkeydown
*onkeypress: 按下键盘按键并松开
*onkeydown : 按下按键发生
*onkeyup: 松开按键

6、提交与重置事件

onsubmit,onreset
*提交事件： 是在点击提交按钮后发生。(必须写在form表单中)
*重置事件： 是在点重置交按钮后发生。
示例： 提交表单中的数据(检查):如果是陈冠希：通过，否则不能提交数据。

Demo


<!doctype html>
<html lang="en">
<head>
<title>重置与提交事件</title>
</head>
<script type="text/javascript">
<!--
/*
提交事件：点击提交按钮时发生，函数在去目的地之前调用，根据结果决定是否去目标页面。
注意：必须写在form标签中
*/
function fun(from){
//判断姓名
var username = form.username.value;
if(username==""){
alert("姓名不能为空");
return false;
}
//判断年龄
var age = document.forms[0].age.value;
if(age=="")
{
alert("年龄不能为空");
return false;
}
if(isNaN(age)){
alert("age必须是整数");
return false;
}
if(age<0 || age>100){
alert("年龄必须在0~100");
return false;
}
return true;
}
function fun1(form){
return false;
}
//-->
</script>
<body>
<form method="post" action="#a.html" onsubmit="return fun(this)" onreset="return fun1(this)">
姓名：<input type="text" name="username"><br>
年龄：<input type="text" name="age"><br>
<input type="submit" value="提交"><input type="reset" value="重置">
</form>
</body>
</html>

7、选择与改变事件

onselect: 只能用于输入框. 当选择输入框中的文本时发生
onchange: 用于select和文本框.对于下拉框是在选项发生变化的时候发生，对于文本框是在文本框的内容发生变化并且失去焦点时发生。
示例： 当选择文本框的内容时，弹出文本框的内容
下拉框的selectedIndex属性：代表选中某项的索引

DOM技术

一、Dom概述？

1、什么是DOM？

document object model 文档对象模型

2、它的作用？

重构整个HTML 文档。可以添加、移除、改变或重排页面上的项目。

3、分类？

Core DOM :
定义了一套标准的针对任何结构化文档的对象
XML
DOM :
定义了一套标准的针对 XML 文档的对象
HTML DOM :
定义了一套标准的针对 HTML 文档的对象。

4、xml介绍？

expensible markup language : 可扩展标记语言.
<penson>
<name>张无忌</name>
<age>23</age>
</person>

二、DOM树

1、结点 :

 文档中的每个成分都是一个节点.(包括文本也是节点)

2、结点的属性

a. nodeName（节点名称）

元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

b. nodeValue（节点值）

对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。

c. nodeType（节点类型） : nodeType 属性可返回节点的类型。

标签节点的类型值是 1
属性节点的类型值是 2
文本节点的类型值是 3

Dom节点的属性.html


<!doctype html>
<html lang="en">
<head>
<title>Dom节点的属性</title>
</head>
<body>
<p id="p">p节点的属性</p>
<script type="text/javascript">
<!--
var p = document.getElementById("p");
alert(p.nodeType);//标签节点的类型值是 1
var txt = p.firstChild;
alert(txt.nodeType);//文本节点的类型值是 3
//-->
</script>
</body>
</html>

dom导航节点属性.html


<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<table border = 1>
<tr>
<td>凌志玲</td>
<td>女</td>
<td>23</td>
</tr>
<tr>
<td>大s</td>
<td>女</td>
<td>28</td>
</tr>
<tr>
<td>小s</td>
<td>女</td>
<td>20</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
<!--
/*
问题： 拿到大s的年龄
*/
//拿到根节点
var html = document.documentElement ;
//alert(html.nodeName) ;
//拿到body节点
var body = html.lastChild ;
//alert(body.nodeName) ;
//拿到table节点
var table = body.firstChild ;
//alert(table.nodeName) ;
var value =
table.firstChild.firstChild.nextSibling.lastChild.firstChild.nodeValue ;
alert(value) ;
//如何准确拿出？需要结合浏览器中的DOM模型来查看每一个节点的细节，以至于不会拿错你想获取的目标节点
//-->
</script>
<!--由于该示例涉及具体的IE浏览器，所以不截图-->

通过方法获得标签节点对象.html


<!doctype html>
<html lang="en">
<head>
<title>通过方法获得标签节点对象</title>
</head>
<script type="text/javascript">
<!--
/*
通过方法获得标签节点对象:
1.getElementById():
2.getElementsByTagName() ;
3.getElementsByName(): 只能用于表单控件
*/
//-->
</script>
<body>
<div name = "d">刘德华</div>
<div name = "d" id = "div">成龙</div>
<div name = "d">陈冠希</div>
<input type="text" name="name" value="弹出我吧"><br>
<input type="text" name="name"><br>
<input type="text" name="name"><br>
<input type="text" name="name"><br>
</body>
</html>
<script type="text/javascript">
<!--
var div = document.getElementById("div");
alert(div.innerText);
var divs = document.getElementsByName("d");
alert(divs[0].innerText);
var names = document.getElementsByTagName("input");
alert(names[0].value);
//-->
</script>

获取节点内容的方法.html


<!doctype html>
<html lang="en">
<head>
<title>获取节点内容的方法</title>
</head>
<body>
<h1 id = "h">明天休息</h1>
<script type="text/javascript">
<!--
var h = document.getElementById("h");
//第一种方法
alert(h.firstChild.nodeValue);
//第二种方法
alert(h.lastChild.nodeValue);
//第三种方法
var nodes = h.childNodes
alert(nodes[0].nodeValue);
//第四种方法
alert(h.innerText);
//-->
</script>
</body>
</html>

打印ul中的值（教你如何解决不同IE给你附加的节点而取出你想要的节点内容）.html


<!doctype html>
<html lang="en">
<head>
<title>5打印ul中的值（教你如何解决不同IE给你附加的节点而取出你想要的节点内容）</title>
</head>
<body>
<ul>
<li id="bj" value="beijing">
北京
<h1>海淀</h1>
奥运
</li>
<li id="sh" value="shanghai">
上海
</li>
<br/>
<input type="button" value="li取值" onclick="getLi()"/>
</ul>
<script type="text/javascript">
<!--
function getLi(){
var bjNode = document.getElementById("bj") ;
//alert(bjNode.nodeName + ":" + bjNode.nodeValue +":" + bjNode.nodeType) ;
var txts = bjNode.childNodes ;
for(var i = 0 ;i <txts.length;i++){
if(txts[i].nodeType == 3)
alert(txts[i].nodeValue) ;
else if(txts[i].nodeType == 1)
alert(txts[i].firstChild.nodeValue) ;
}
}
//-->
</script>
</body>
</html>

打印select的值.html


<!doctype html>
<html lang="en">
<head>
<title>打印select的值</title>
</head>
<body>
<select name="edu" id="edu">
<option value="本科">本科</option>
<option value="专科">专科</option>
<option value="高中">高中</option>
<option value="小学">小学</option>
<option value="幼儿园">幼儿园</option>
</select>
</body>
</html>
<script type="text/javascript">
<!--
//取出方式1
var edu = document.getElementById("edu");
var opt = edu.childNodes ;
for(var i = 0;i<opt.length;i++){
//注意：浏览器添加了很多空行，所以要判断
if(opt[i].nodeType==1){
alert(opt[i].firstChild.nodeValue);}
}
//取出方式2(推荐)
var ops = edu.options;
for(var i = 0;i<ops.length;i++){
alert(ops[i].innerText);
}
//-->
</script>

3、结点的分类


整个文档是一个文档节点
每个 XML 标签是一个元素节点
包含在 XML 元素中的文本是文本节点
每一个 XML 属性是一个属性节点
注释属于注释节点

4、结点的关系


只有父子和兄弟关系
parentNode
: 父节点
childNodes
：所有的子标签
firstChild
：第一个儿子
lastChild 　：最后一个儿子
nextSibling ：下一个兄弟节点
previousSibling ：　上一个兄弟节点

5、对结点进行CRUD操作（重点）

5.1、查找结点？

两种方式：
a. 采用节点之间的关系去拿根节点：
document.documentElement ;
b. 采用方法去拿
getElementById() : 根据标签的ID拿到此标签节点
getElementsByTagName() : 根据标签的名字拿到此标签节点数组
getElementsByName(): 适用于表单控件。根据标签的name属性值拿到控件的数组。

5.2、删除结点？

removeChild() : 采用父节点删除子节点

5.3、创建节点：

document.createElement()
: 创建一个标签节点
docuemnt.createTextNode("内容") ：创建一个文本节点
节点的setAttribute() :添加属性节点

5.4、添加结点？

appendChild() : 添加子节点

5.5、修改或替换结点？

replaceNode(): 替换节点(适用于IE)
replaceChild() : 替换子节点

替换节点和克隆节点.html


<!doctype html>
<html lang="en">
<head>
<title>替换节点和克隆节点</title>
</head>
<script type="text/javascript">
<!--
function changeNode(){
//拿到bj节点
var bjNode = document.getElementById("bj") ;
//拿到game节点
var gameNode = document.getElementById("game") ;
//替换
//第一种方式(不推荐)
//bjNode.replaceNode(gameNode) ;
//第二种
//克隆节点
var kNode = gameNode.cloneNode(true) ;
//有一个参数是boolean类型的,如果是true，表示连子节点一起复制，如果是false，则再复制本节点，不复制内容
//bjNode.replaceNode(kNode) ;
//第三种方式(推荐)
bjNode.parentNode.replaceChild(kNode,bjNode) ;
}
//-->
</script>
<body>
<ul >
<li id="bj" onclick="changeNode()">北京</li>
<li>湖南</li>
<li>山东</li>
</ul>
<ul>
<li
id="game">打<p>灰机</p></li>
<li>抓泥鳅</li>
<li>斗地主</li>
</ul>
</body>
</html>

创建节点.html


<!doctype html>
<html lang="en">
<head>
<title>创建节点</title>
</head>
<script type="text/javascript">
<!--
function addOptions(){
//拿到下拉框对象
var sel = document.getElementsByTagName("select")[0] ;
//创建一个节点
// 创建option第一种方法
//var option = document.createElement("option") ;
//option.text = "小学" ;
// 创建option第二种方法
//var option = new Option("小学","小学") ;
// 创建option第三种方法
/*var option = new Option() ;
option.value = "小学" ;
option.text = "小学" ;
sel.options.add(option) ;*/
//第二种添加方式
var option = new Option("小学","小学") ;
//sel.appendChild(option) ;
//IE有问题
//第三种方式
sel.innerHTML = sel.innerHTML + "<option value = '小学'>小学</option>"
}
//-->
</script>
<body>
<input type="button" value="添加选项" onclick="addOptions()"/>
<select>
<option>本科</option>
<option>专科</option>
<option>高中</option>
<option>初中</option>
</select>
</body>
</html>

操作节点的属性.html


<!doctype html>
<html lang="en">
<head>
<title>操作节点属性</title>
</head>
<script type="text/javascript">
<!--
/*
功能： 按钮只能点击一次
操作节点属性：
１.　setAttribute() :设置某个属性的值
2.
getAttribute(): 获得属性的值
3.
removeAttribute() : 删除属性
*/
function fun(){
//拿到btn对象
var btn = document.getElementById("btn") ;
//删除disabled属性
//btn.removeAttribute("disabled") ;
btn.onclick =
function(){
fun1(this) ;
} ;
}
function fun1(btn){
//第一种方式
//btn.setAttribute("disabled","disabled") ;
//第二种方式
//btn.disabled = "disabled" ;
alert("我只会弹出一次哦") ;
btn.removeAttribute("onclick") ;
}
//-->
</script>
<body>
<input type="button" value="只能点击一次" id = "btn"
onclick = "fun1(this)" >
<input type="button" value="恢复" onclick = "fun()">
</body>
</html>

添加表格行（练习），导购常用.html


<!doctype html>
<html lang="en">
<head>
<title>添加表格行</title>
</head>
<script type="text/javascript">
<!--
function addtr(){
//拿到单元格的内容
var name = document.getElementById("name").value ;
var email = document.getElementById("email").value ;
var age = document.getElementById("age").value ;
//创建tr,td,并赋值
var nametd = document.createElement("td") ;
nametd.innerHTML = name ;
var emailtd = document.createElement("td") ;
emailtd.innerHTML = email ;
var agetd = document.createElement("td") ;
agetd.innerHTML = age ;
var btntd = document.createElement("td") ;
btntd.innerHTML = "<input type = 'button'
value = '删除' onclick = 'delTr(this)'> " ;
//创建tr并组合
var tr = document.createElement("tr") ;
tr.appendChild(nametd) ;
tr.appendChild(emailtd) ;
tr.appendChild(agetd) ;
tr.appendChild(btntd) ;
//将tr加入到table中
var table = document.getElementById("table") ;
table.firstChild.appendChild(tr) ;
}
function delTr(btn){
//爷爷干掉儿子
btn.parentNode.parentNode.parentNode.removeChild(btn.parentNode.parentNode) ;
}
//-->
</script>
<body>
<table width = 600 height = 100 align = center>
<tr>
<td>姓名:</td>
<td><input type="text" name="" id = "name"></td>
<td>邮箱:</td>
<td><input type="text" name="" id = "email"></td>
<td>年龄</td>
<td><input type="text" name="" id = "age"></td>
</tr>
<tr>
<td align = "center" colspan = "6"> <input type="button" value="添加" onclick="addtr()"></td>
</tr>
</table>
<br>
<br>
<br>
<br>
<hr>
<table width = "500" border =1 align = center id = "table">
<tr>
<td>姓名</td>
<td>邮箱</td>
<td>年龄</td>
<td>操作</td>
</tr>
</table>
</body>
</html>

全选全不选：选择你的爱好.html


<!doctype html>
<html lang="en">
<head>
<title>选择你的爱好</title>
</head>
<script type="text/javascript">
<!--
function checkAll(flag){
//拿到所有的选项
var hobbys = document.getElementsByName("hobby") ;
for(var i = 0;i < hobbys.length ;i ++){
hobbys[i].checked = flag ;
}
}
function reverseCheck(){
//拿到所有的选项
var hobbys = document.getElementsByName("hobby") ;
for(var i = 0;i < hobbys.length ;i ++){
hobbys[i].checked = !hobbys[i].checked ;
}
}
//-->
</script>
<body>
<h1>请选择你的爱好：</h1>
全选/全不选<input type="checkbox" name="hobbys" onclick="checkAll(this.checked)" /><br/>
<input type="checkbox" name="hobby" value="football" />足球
<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="swim" />游泳
<input type="checkbox" name="hobby" value="singing" />唱歌<br/>
<input type="button" value="全选" onclick="checkAll(true)"/>
<input type="button" value="全不选" onclick="checkAll(false)"/>
<input type="button" value="反选" onclick="reverseCheck()"/> </body>
</body>
</html>

下拉框选项的移动(多项).html


<!doctype html>
<html lang="en">
<head>
<title>下拉框选项的移动(多项)</title>
</head>
<script type="text/javascript">
<!--
function removeLeft(){
//获取下拉框的所有的选项数组
var ops = document.getElementById("left").options ;
//获得右边下拉框
var rightsel = document.getElementById("right") ;
//循环判断每一个选项是否选中
for(var i =0 ;i<ops.length ;i++){
if(ops[i].selected){
rightsel.appendChild(ops[i]) ;
i-- ;
}
}
}
function removeLeftAll(){
//获取左边下拉框的所有的选项数组
var ops = document.getElementById("left").options ;
//获得右边下拉框
var rightsel = document.getElementById("right") ;
//循环添加
var length
= ops.length ;
for(var i = 0 ;i <length;i++){
rightsel.appendChild(ops[0]) ;
}
}
//-->
</script>
<body>
<table align="center">
<tr>
<td>
<select size="10" id="left" multiple>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
<option>选项7</option>
<option>选项8</option>
</select>
</td>
<td>
<input type="button" value="--->" onclick="removeLeft()"/><br/>
<input type="button" value="===>" onclick="removeLeftAll()"/><br/>
<input type="button" value="<---" onclick=""/><br/>
<input type="button" value="<===" onclick=""/><br/>
</td>
<td>
<select size="10" id="right">
<option>选项9</option>
</select>
</td>
</tr>
</table>
</body>
</html>

超链.html


<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<script type="text/javascript">
<!--
function fun(){
alert("哈哈，我来了") ;
return false ;
}
//-->
</script>
<body>
<a href="http://blog.163.com/faith_yee/blog/demo03-dom节点的属性.html" onclick = "return false ;">demo03-dom节点的属性.html</a><br>
<a href = "javascript: void(0)">demo03-dom节点的属性.html</a>
</body>
</html>

表单数据的判断.html


<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<style type="text/css">
.one{
border:2px solid red ;
}
.two{
background-image:url("images/error.jpg");
background-position:right;
background-repeat:no-repeat;
}
</style>
</head>
<script type="text/javascript">
<!--
function checkInfo(form){
//判断通行证名称
var username = form.username.value ;
if(username == ""){
form.username.className = "two" ;
var span = document.getElementById("susername") ;
span.className = "one" ;
span.innerHTML = "<img src='http://blog.163.com/faith_yee/blog/images/error.jpg'>通行证用户姓名不能为空" ;
return false ;
}
return true ;
}
//-->
</script>
<body>
<form method = "post" action = "" onsubmit = "return checkInfo(this)">
<fieldset>
<table>
<tr>
<td align = "right">通行证名称：</td>
<td><input type="text" name="username">@163.com</td>
<td><span id = "susername"></span></td>
</tr>
<tr>
<td align = "right">密码:</td>
<td><input type="password" name="pass"></td>
<td><span id = "spass"></span></td>
</tr>
<tr>
<td align = "right">确认密码:</td>
<td><input type="password" name="repass"></td>
<td><span id = "srepass"></span></td>
</tr>
<tr>
<td colspan = "3"><input type="submit" value = "提交"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>

javascript模拟类的实现.html


<!doctype html>
<html lang="en">
<head>
<title>javascript模拟类的实现</title>
</head>
<script type="text/javascript">
<!--
/*
1.定义类并创建类的实例对象
2.定义公有属性和私有属性
3.定义公有方法和私有方法
4.静态属性和静态方法
5.构造函数（无参，有参）
6.原型方式声明属性与方法
7.直接用Object或函数对象加属性与方法
*/
//----------------------------------------------------------
//1.定义类并创建类的实例对象
/*function Person(){
}
var p = new Person() ;*/
//------------------------------------------------------------
//2.定义公有属性和私有属性
/*
定义私有属性：
1.在函数里： var name = '张三' ;
2.在函数外:
采用对象.属性名
定义公有属性：
1.在函数里：this.name = '张三' ;
2.在函数外
类名.prototype.属性名
*/
/*function Person(){
var name = "张三" ;
this.age = 20 ;
}
var p = new Person() ;
//alert(p.name) ;
//name是私有属性，只能在函数中访问
//alert(p.age);
//p.weight = 100 ;
//定义一个私有属性
//alert(p.weight) ;
Person.prototype.height = 180 ;
alert(p.height) ;
var p1 = new Person() ;
//alert(p1.age) ;
//alert(p1.weight) ;
//访问不了weight,因为weight是专属于p对象的私有属性
alert(p1.height) ;*/
//-----------------------------------------------------------------
//3.定义公有方法和私有方法
/*
定义私有方法：
1.在函数里： var say = function() ;
2.在函数外: 采用对象.方法名
定义公有方法：
1.在函数里：this.name = function() ;
2.在函数外:类名.prototype.方法名
*/
/*function Person(){
var say = function(){
alert("我是私有方法") ;
}
this.show = function(){
say() ;
}
}
var p = new Person() ;
//p.show() ;
p.sing = function(){
//采用匿名函数的方式定义私有方法
alert("我想唱忘情水") ;
}
//p.sing() ;
Person.prototype.eat = function(a){
alert("我想吃" + a) ;
}
p.eat("鸡肉") ;
var p1 = new Person() ;
//p1.sing() ;
//不能调用，因为sing方法是p对象的专属方法，私有的
p1.eat("鸭肉") ;*/
//--------------------------------------------------------------
//4.静态属性和静态方法 : 注意： 不能通过对象来调用
/*function Person(){}
Person.name = "张无忌" ;
//定义一个静态属性
Person.show = function(){ //定义一个静态方法
alert("我是静态方法") ;
} ;
alert(Person.name) ;
Person.show() ;*/
//---------------------------------------------
//5.构造函数（无参，有参）
//注意： 不要起同名的函数
/*function Person(name){
this.name = name ;
}
function Person(name,age){
alert("我被调用了") ;
this.name = name ;
this.age = age ;
}
var p = new Person("张无忌",20) ;
alert(p.name + ":" + p.age) ;
var p1 = new Person("张三丰") ;
alert(p1.name) ;*/
//------------------------------------------------
//5.创建对象的方式
/*
创建对象的三种方式：
1. 采用new 函数名()
2. new Object() ;
3. json
*/
// var a = new Object() ;
// alert(typeof(a)) ;
//json格式
var json = {"a":"中国","b":"美国","c":"日本"} ;
//alert(typeof(json));
//alert(json["b"]) ;
//alert(json.b) ;
var json1 = {1:"中国",2:"美国",3:"日本"} ;
//alert(json1[2]) ; //此种情况下只能采用中括号去拿值
//如果想都拿到
/*for(var x in json){
alert(x + ":" + json[x]) ;
}*/
//扩展：foreach循环是拿到对象的所有的属性
/*function fun(p){
for(var a in p){
alert(a) ;
}
}*/
//---------------------------------------------------
//给数组添加方法
//功能：获取数组中的最大值
/*Array.prototype.getMax= function(arr){
var max
= arr[0] ;
for(var i = 1 ;i<arr.length ;i++){
if(arr[i] > max)
max = arr[i] ;
}
return max ;
}
var arr = [2,6,12,67,58] ;
var max = arr.getMax(arr) ;
alert(max) ;*/
//改造document.getElementById();
/*function $(id){
if(arguments.length > 1){
alert("传递的参数个数不对") ;
return ;
}
var obj = document.getElementById(id) ;
if(obj == null){
alert("传递的参数必须是id的值") ;
return ;
}
return
obj ;
}
function func(){
//var p = $("a,","b") ;
var p = $("p") ;
p.innerHTML = "刘德华" ;
p.onclick = function(){
alert(this.innerHTML);
}
}*/
//--------------------------------------------
//继承
/*function Person(){
this.name = "张无忌" ;
this.show = function(a){
alert(a) ;
}
}
function Student(){
this.name = "张三丰" ;
this.show =function(){
alert("我是子类的方法");
}
}
Student.prototype = new Person() ;
//student继承了Person
var s = new Student() ;
//alert(s.name) ;
s.show("aaaa") ;*/
//------------------------------------------
//with(对象的名字)
//设定p标签的样式
function func(){
var p = document.getElementById("p") ;
//p.style.color = "red" ;
//p.style.border="1px solid green" ;
//p.style.fontSize = "50px" ;
with(p){
style.color = "red" ;
style.border = "1px solid green" ;
style.fontSize="50px" ;
}
}
//-->
</script>
<body>
<p id = "p" onclick = "fun(this)" name = "p1">李德华</p><input type="button" value="拿取p标签的内容" onclick="func()">
</body>
</html>

资料下载

最后

以上就是高兴萝莉为你收集整理的JavaWeb-04(BOM&DOM)JavaWeb-04的全部内容，希望文章能够帮你解决JavaWeb-04(BOM&DOM)JavaWeb-04所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：JavaWeb
浏览次数：75 次浏览
发布日期：2023-11-15 10:55:05
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_14_f1_14__23__14_4.html

JavaWeb-04(BOM&DOM)JavaWeb-04

概述

JavaWeb-04

JavaWeb-BOM&DOM

BOM

一、知识回顾

二、内容

1、鼠标移动事件

2、鼠标点击事件

3、加载与卸载事件 ####

4、聚焦与离焦事件

5、键盘事件

6、提交与重置事件

7、选择与改变事件

DOM技术

一、Dom概述？

1、什么是DOM？

2、它的作用？

3、分类？

4、xml介绍？

二、DOM树

1、结点 :

2、结点的属性

3、结点的分类

4、结点的关系

5、对结点进行CRUD操作（重点）

最后

评论列表共有 0 条评论

发表评论取消回复

JavaWeb-04(BOM&DOM)JavaWeb-04

概述

JavaWeb-04

JavaWeb-BOM&DOM

BOM

一、知识回顾

二、内容

1、鼠标移动事件

2、鼠标点击事件

3、加载与卸载事件 ####

4、聚焦与离焦事件

5、键盘事件

6、提交与重置事件

7、选择与改变事件

DOM技术

一、Dom概述？

1、什么是DOM？

2、它的作用？

3、分类？

4、xml介绍？

二、DOM树

1、结点 :

2、结点的属性

3、结点的分类

4、结点的关系

5、对结点进行CRUD操作（重点）

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复