JavaScript基本语法（二）

最新推荐文章于 2022-01-22 20:19:36 发布
最新推荐文章于 2022-01-22 20:19:36 发布
阅读量350 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leomes/article/details/63261725
版权

JavaScript HTML DOM

DOM HTML 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

1.查找HTML元素：
通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素
代码如下：

<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法！</p>

<script>
x=document.getElementById("intro");
document.write('<p>id="intro" 的段落中的文本是：' + x.innerHTML + '</p>');
</script>
<p>Hello World!</p>

<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>

<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
</script>

提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

2.改变HTML输出流

<script>
document.write(Date());
</script>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

<p>上面的段落被一条 JavaScript 脚本修改了。</p>
<body>

<img id="image" src="/i/eg_tulip.jpg" />

<script>
document.getElementById("image").src="/i/shanghai_lupu_bridge.jpg";
</script>

<p>原始图片是郁金香（eg_tulip.jpg），但是已被修改为卢浦大桥（shanghai_lupu_bridge.jpg）。</p>

</body>

3.改变HTML样式

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

<p>上面的段落已被一段脚本修改。</p>
<h1 id="id1">My Heading 1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
点击这里！</button>
<p id="p1">这是一段文本。</p>

<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

4.对事件作出反应：

  • HTML 事件的例子：
    当用户点击鼠标时
    当网页已加载时
    当图像已加载时
    当鼠标移动到元素上时
    当输入字段被改变时
    当提交 HTML 表单时
    当用户触发按键时
<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>

<button onclick="displayDate()">点击这里</button>

<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
    {
    alert("已启用 cookie")
    }
else
    {
    alert("未启用 cookie")
    }
}
</script>

<p>提示框会告诉你，浏览器是否已启用 cookie。</p>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>

5.添加和删除节点
添加节点：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);

删除节点：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>var child=document.getElementById("p1");
child.parentNode.removeChild(child);
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

也可以用：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

删除节点

LeoMes
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript基本语法分析说明
10-30
把本小鸟着几天学习jacascript的一些心得发给大家看看 不一定很全面但应该适合一些想学习基础的人看 在以后我回相继发出php语言的基础
DOM操作-通过关系来获取元素
最新发布
qq_58167492的博客
07-14 1773
DOM操作之如何通过关系来获取元素
JavaScript操作DOM对象
m0_53509974的博客
05-17 100
JavaScript操作DOM对象 DOM : 文档对象模型 整个浏览器网页是一个DOM树形结构 更新DOM节点 遍历DOM节点 ： 获取DOM节点 删除DOM节点 增加DOM节点 DOM文件树 获得节点并操作 document.getElementById(’’) ; <body> <div id="parent"> <p id="p1">p1</p> <p id="p2">p2</p> </div>
js获取父级节点、子集节点、兄弟节点方法
诚实可靠小郎君的博客
12-05 5566
一.js获取父级节点 1. document.getElementById("test").parentElement; 2. document.getElementById("test").parentNode; 3.document.getElementById("test").offsetParent; // 获取所有父节点，返回数据为数组类型 二.js获取子集节点 1. ...
js中document.getElementById()用法
lyhmyway的专栏
03-03 6万+
dom标准里面的  获取当前文档中指定id的元素 if (document.getElementById("regjm").value != document.getElementById("regjm1").value ) {    alert("提示：请输入有效的认证码");    document.getElementById("regjm1").focus();    retur
document getElementById innerHTML
weixin_43726152的博客
05-06 7055
innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容； 如： 这是内容 ，我们可以通过 document.getElementById(‘demo’).innerHTML 来获取id为aa的对象的内嵌内容； 也可以对某对象插入内容，如 document.getElementById(‘demo’).innerHTML=‘这是被插入的内容’; 这样就能向id为abc的对象插入内容...
JavaScript基本语法
04-05
JavaScript的基础知识
javascript基本语法
01-19
在这里，我为大家解释一下，在javascript中，“==”是等同运算符。 等同运算符的比较规则： 当两个运算数的类型不同时：将他们转换成相同的类型 1)一个数字与一个字符串，字符串转换成数字之后，进行比较。 2)
JavaScript基本语法学习教程
10-22
javascript语言是网页中广泛使用的一种脚本语言，通过本文给大家介绍javascript基本语法，需要的朋友可以参考下本
document.getElementById()方法使用
热门推荐
酣睡的熊㊣的技术博客
02-07 36万+
document.getElementById使用 语法：oElement = document .getElementById ( sID ) 参数：sID――必选项。字符串 (String) 。 返回值：oElemen――对象 (Element) 。 说明：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一
document.getElementById
xx_yan的博客
03-28 2万+
var element = document.getElementById(id); 因为Id具有唯一性，所以这个方法用来查找页面中的某一个元素。 无Id元素的查找可以使用CSS选择器 querySelector() 参数 id 大小写敏感的字符串，指代被查找元素 返回值 elemnt 一个DOM中匹配id的Element对象。未查找到此id的Element时，返回null。 注意 get...
document.getElementById().innerHTML
qq_45330179的博客
11-11 1万+
innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容； 如：<div id="demo">这是内容</div> 我们可以通过 document.getElementById(‘demo’).innerHTML 来获取id为aa的对象的内嵌内容； 也可以对某对象插入内容， 如document.getElementById(‘demo’).innerHTML=‘这是被插入的内容’; 这样就能向id为abc的对象插入内容。 ...
document.getElementById的理解
u014552288的专栏
04-07 3504
个人现在的理解就是在一个页面中找到对应id的模块
JS获取子节点、父节点和兄弟节点的方法实例总结
盏茶作酒的博客
06-24 967
1.js获取子节点的方式 1.通过获取dom方式直接获取子节点 var a = document.getElementById("test").getElementsByTagName("div"); 2.通过children来获取子节点 利用children来获取子元素是最方便的，他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。 1 var getFirstChild = document.getElementById("test").chi.
二、document对象、获取元素、节点、遍历树
布白的博客
01-22 3140
二、document对象、获取元素、节点、遍历树 一、document对象 控制台打印document——>整个html结构 console.log(document); 其实document是一个对象，内部有方法和属性。 console.dir(document); … 二、获取元素 2.1 document.getElementById() 功能：通过标签id属性获取 一个 元素。 兼容性： IE8以下获取标签id属性不区分大小写。 IE8以下若标签没有id属性，匹配name属性。 开
js移除某个样式_js中如何移除css样式？
weixin_39741101的博客
12-19 5592
js中如何移除css样式？dom元素应用css有两种方式：● 通过class类名和id名应用样式● 通过指定style属性应用样式我们可以针对以上两种方式写移除css样式的方法(相关课程推荐：JS视频教程)1、使用removeAttribute方法移除class、id和style属性let app = document.getElementById('app');app.removeAttribu...
在html中用js原生写法移除指定样式的元素
qq_14853875的博客
08-09 3098
document.getElementsByClassName(‘tox-statusbar’).item(0).remove();
原生Javascript和jQuery获取元素归纳 document.getElementById,document.querySelector(““) 子节点 父节点 兄弟节点
hangshao_123的博客
11-03 2299
1. var div = document.querySelector("#box") var div = document.getElementByID("box") var div = document.getElementByClass("box")
document.getElementById("parentControl") 根据ID来获取一个控件
haoxiang110的专栏
03-30 1041
有一点一定要指出，aaaaaaaaaaa

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值