一、查找
第一种方式:依据id查找
var obj = document.getElementById(id); //document是HTMLDocument的实例
<html>
<head>
<script>
function f1(){
var obj = document.getElementById('a1'); //双引号,单引号都可以
//innerHTML属性:可以访问或者设置节点的html的属性值
//alert(obj.innerHTML);
obj.innerHTML = "为什么点我"; //双引号单引号都可以
}
function f2(){
var obj = document.getElementById('d1');
alert(obj.innerHTML);
}
function f3(){
var obj = document.getElementById('username');
//value属性:可以获取文本输入框的值和改变值
alert(obj.value); //获得值
obj.value = 'abc';//改变值
}
</script>
</head>
<body style="font-size:30px;font-style:italic;">
<!--javascript:; 表示是一个空白的js语句-->
<a href="javascript:;" id="a1" onclick="f1();">click me</a><br/>
<div id="d1" ><span>你好</span></div><br/>
<input type="text" id="username" name="username"/><br/>
<input type="button" value="点我吧" onclick="f3();"/>
</body>
</html>
第二种方式
var arr = node.getElementsByTagName('tagName');
<html>
<head>
<style>
ul{
list-style-type:none;
}
ul li{
float:left;
border:1px solid black;
margin-left:10px;
width:100px;
height:40px;
background-color:red;
cursor:pointer;
}
.selected{
background-color:#ff88ee;
}
</style>
<script src="myjs.js"></script>
<script>
function doAction(index){
var arr = $('u1').getElementsByTagName('li');
for(i=0; i<arr.length; i++){
arr[i].className = '';
}
var obj = $('l'+index);
obj.className = 'selected';
}
</script>
</head>
<body style="font-size:30px;">
<ul id="u1">
<li onmouseover="doAction(1);" id="l1">选项一</li>
<li onmouseover="doAction(2);" id="l2">选项二</li>
<li onmouseover="doAction(3);" id="l3">选项三</li>
</ul>
</body>
</html>
第三种方式
使用遍历的方式(浏览器兼容性差)
parentNode
previousSibling 前一个兄弟
nextSibling 下一个兄弟
childNodes 所有子节点
firstChild 前一个子节点
lastChild 后一个子节点
遍历的方式因为有浏览器的兼容性问题,尽量少用
二、创建
document.createElement(tagName); //tagName表示标记名
三、添加
node.appendChild(obj); //作为最后一个孩子添加
node.insertBefore(obj, refNode); //添加到refNode的前面
node.replaceChild(obj, refNode); //替换refNode
四、删除
node.removeChild(obj);
<html>
<head>
<script src="myjs.js"></script>
<script>
function f1(){
var obj = document.createElement('div');
obj.innerHTML = '兴趣最重要...';
obj.className = 's1';
// $('d1').appendChild(obj);
// $('d1').insertBefore(obj, $('a1'));
// $('d1').replaceChild(obj, $('a1'));
$('d1').removeChild($('a1'));
}
</script>
<style>
.s1{
width:200px;
height:100px;
background-color:red;
}
</style>
</head>
<body style="font-size:30px;" id="d1">
<!-- <a href="javascript:alert('hello');">如何学好java</a> -->
<a id="a1" href="javascript:;" onclick="f1();">如何学好java</a>
</body>
</html>
五、样式
第一种方式:修改节点的className属性
比如:var obj = document.getElementById('id1'); obj.className = 's1'; //使用s1样式 ****见例子:表单验证****
第二种方式:修改节点的style属性
1.必须是内联样式
2.如果要修改的样式属性名包括"-",比如background-color,则要按照如下方式修改node.style.backgroundColor = 'red';
<html>
<head>
<style>
#d1{
width:80px;
height:80px;
background-color:blue;
position:relative;
}
</style>
<script src="myjs.js"></script>
<script>
function f1(){
var v1 = parseInt($('d1').style.left);
$('d1').style.left = v1 + 50 + 'px';
}
</script>
</head>
<body>
<div id="d1" style="left:10px;"></div>
<input type="button" value="click me"
onclick="f1();"/>
</body>
</html>
如何禁止浏览器的两种默认行为:
点击连接,浏览器会向href属性指向的地址发请求
点击表单提交按钮,浏览器会提交表单
禁止的方式
<a href="" onclick="return false;"></a>
<from onsubmint="return false;"></form>
分享到:
相关推荐
尤其是有洁癖的人更是如此,总是喜欢时不时的杀进程杀服务,可是由于android开源的特殊性,你会发现被干掉的服务又一次的重新复活了,总之生命力极其强悍,业界称之为——打不死的小强。这里是它怎么做的,哈哈
小强老师《零基础学习软件测试》系列视频之QTP使用指南——界面分析
“小强一号”——实验机器人制作过程(图文.docx
小强老师《零基础学习软件测试》系列视频之QTP使用指南
小强的HTML5移动开发之路系列博客中的一个视频播放器的例子。
小强老师《零基础学习软件测试》系列视频之QTP使用指南
详细请看《 小强的HTML5移动开发之路(42)》:http://blog.csdn.net/column/details/dawanganban-html5.html
小强老师软件测试基础课程5-软件质量基础知识
里面有小强开发板程序,对初学者有很大帮助
HTML、CSS、JavaScript网页制作从入门到精通
小强多个模版替换 小强多个模版替换 小强多个模版替换 小强多个模版替换 小强多个模版替换
小强影音盒是一个在线电影和视频播放器,能播放网上的海量电影。如果想看最新版本到:http://www.5aie.com/xiaoqiangplayer/flvshuoming.htm 查看。
小强多个模版替换 快速发布信息,让你的工作更有效率。
小强开发板原理图版本,在网上是很不好找到的 ,不过需要的人可能也不多
小强通话时间统计,显示归属地,统计指定号码通话时间
小强升职记 实现目标思维导图
ASP实例开发源码—一个非常小巧的自动更新asp新闻系统 小强修正版.zip ASP实例开发源码—一个非常小巧的自动更新asp新闻系统 小强修正版.zip ASP实例开发源码—一个非常小巧的自动更新asp新闻系统 小强修正版.zip
TinyButStrong version 2.05 TinyButStrong (TBS) 是一个PHP类,它能让你开发系统时能干净...没问题,TBS 同样能够让你创建 JavaScript 动态脚本. 正如它的名字一样, TBS 易用, 强大且快速. 它完全是 °~° 免费的°~°.
边学边练,依托网页实际开发,深入讲解JavaScript在网页中的各种应用;实例讲解,通过实例详细讲解每个知识点的实际应用。 本书共分为12章,分别介绍Web脚本编写和JavaScript语言的概念、JavaScript的基础知识、文档...