JS入门随笔

1.DOM简单实例

1.通过onclick="changeImage()"调用changeImage()方法

2.通过element=document.getElementById('myimage')获取id="myimage"控件的值

3.element.src.match("bulbon")：match()是检索是否含有相应的字符，有的话判断为真，没有判断就假，即此段为判断2中获取的id的控件的src属性值的字段中是否含有“bulbon”.

4.菜鸟教程在线编辑器 (runoob.com)灯光明灭

 1 <script>
 2 function changeImage()
 3 {
 4     element=document.getElementById('myimage')
 5     if (element.src.match("bulbon"))
 6     {
 7         element.src="/images/pic_bulboff.gif";
 8     }
 9     else
10     {
11         element.src="/images/pic_bulbon.gif";
12     }
13 }
14 </script>
15 <img id="myimage" onclick="changeImage()" border="0" src="/images/pic_bulboff.gif" width="100" height="180">
16 <p>点击灯泡 开/关 灯</p>

2.什么是 HTML DOM？

1.HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

2.换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

3.在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

3.HTML DOM 方法

下面的代码获取 id="intro" 的 <p> 元素的 innerHTML：

1 <!--简单获取-->
2 <p id="intro">Hello World!</p>
3 <p>这个实例演示了 <b>getElementById</b> 方法!</p>
4 
5 <script>
6 x=document.getElementById("intro");
7 document.write("<p>段落的文本为: " + x.innerHTML + "</p>");
8 </script>

在上面的例子中，getElementById 是一个方法，而 innerHTML 是属性。

菜鸟教程在线编辑器 (runoob.com)

一些常用的 HTML DOM 方法：

  • getElementById(id) - 获取带有指定 id 的节点（元素）
  • appendChild(node) - 插入新的子节点（元素）
  • removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

  • innerHTML - 节点（元素）的文本值
  • parentNode - 节点（元素）的父节点
  • childNodes - 节点（元素）的子节点
  • attributes - 节点（元素）的属性节点

DOM对象的一些方法

方法描述
getElementById() 返回带有指定 ID 的元素。（id=""）(单个)
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。（标签名例：<p></p>）(列表)
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。（类名class=""）(列表)
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。

 

1.修改 HTML

 

通过脚本来修改文本内容

 

1 <p id="p1">Hello World!</p>
2 
3 <script>
4 document.getElementById("p1").innerHTML="新文本!";
5 </script>
6 
7 <p>段落通过脚本来修改文本内容。</p>

菜鸟教程在线编辑器 (runoob.com)

通过脚本来修改内容颜色
1 <p id="p1">Hello world!</p>
2 <p id="p2">Hello world!</p>
3 
4 <script>
5 document.getElementById("p2").style.color="blue";
6 document.getElementById("p2").style.fontFamily="Arial";
7 document.getElementById("p2").style.fontSize="larger";
8 </script>

菜鸟教程在线编辑器 (runoob.com)

通过脚本来创建标签
 1 <div id="div1">
 2 <p id="p1">这是一个段落。</p>
 3 <p id="p2">这是另一个段落。</p>
 4 </div>
 5 <script>
 6 var para=document.createElement("p");
 7 var node=document.createTextNode("这是一个新段落。");
 8 para.appendChild(node);
 9 var element=document.getElementById("div1");
10 element.appendChild(para);
11 </script>

菜鸟教程在线编辑器 (runoob.com)

以上可以添加按钮方法，实现动态变化。

直接写在控件中
1 <input type="button"
2 onclick="document.body.style.backgroundColor='lavender';"
3 value="修改背景颜色">
写在JS中
1 <script>
2 function ChangeBackground()
3 {
4     document.body.style.backgroundColor="lavender";
5 }
6 </script>
7 
8 <input type="button" onclick="ChangeBackground()" value="修改背景颜色" />

菜鸟教程在线编辑器 (runoob.com)

 

posted @ 2023-02-27 11:44  初雨了然  阅读(71)  评论(0)    收藏  举报