DOM编程 学习笔记（二）

学习内容：

1.document对象

2.event对象

该对象将标记型文档进行封装
该对象的作用，是对可标记型文档进行操作
常见操作，想要实现动态效果，需要对节点操作，那么先获取到这个节点，想获取节点，就必须先获取节点所属的文档对象document
获取节点的方法体现：
getElementById();提高标签的id属性值获取该标签节点，返回该标签节点
getElementsByName();通过标签的name属性获取节点，返回的是一个数组/容器

getElementsTagName();通过标签名获取节点，因为标签名会有重复，所以返回一个数组

在操作文档时为了获取某一个特定的元素，getelementById方法是最好的选择...

 

复制代码
<html>
<head>
<script type="text/javascript">
function getValue()
  {
  var x=document.getElementById("myHeader")
  alert(x.innerHTML)//修改h1所显示的标题...
  }
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>

</body>
</html>
复制代码

 

当我们在执行多次的getelementById方法时，我们可以定义一个方法，使其返回getelementById方法，这样可以避免

在每次调用的时候，都书写其方法，解决了代码冗余...

function id(x) {
  if (typeof x == "string") return document.getElementById(x);
  return x;
  }

getElementByName（）与getelementById方法相似，但是他查询的是name，而不是id属性...

复制代码
<html>
<head>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByName("myInput");
  alert(x.length);
  }
</script>
</head>

<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="名为 'myInput' 的元素有多少个？" />
</body>

</html>
复制代码

getElementsByTagName（） 返回一个指定标签的集合...

复制代码
<html>
<head>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByTagName("input");
  alert(x.length);
  }
</script>
</head>
<body>

<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="How many input elements?" />

</body>
</html>
复制代码

可以用 getElementsByTagName() 方法获取任何类型的 HTML 元素的列表。例如，下面的代码可获取文档中所有的表：

 

var tables = document.getElementsByTagName("table");
alert ("This document contains " + tables.length + " tables");

 

也可以使用 getElementsByTagName() 方法获取文档中的一个特定的元素。

复制代码
<script type="text/javascript">

        function getNodeByTagNameDemo2(){
                var divNode = document.getElementById("newlink");
                var nodes = divNode.getElementsByTagName("a");//nodes成为了一个数组，存放着多个a属性...
                for(var i = 0;i<nodes.length;i++){
                    nodes[i].target="_blank";
                }
        }
    </script>
    <input type="button" value="document对象获取节点" onclick="getNodeByTagNameDemo2()"/>

    <a href="http://www.baidu.com">百度1</a>
    <a href="http://www.baidu.com">百度2</a>

    <div id="newlink">
        <a href="http://www.163.com">1631</a>
        <a href="http://www.163.com">1632</a>
        <a href="http://www.163.com">1633</a>
    </div>
复制代码

 

 

2.event对象..

事件绑定：

第一种方式

 

复制代码
<html>
<head>
<script type="text/javascript">
        function text(){
              window.alert("hello");
        } 
</script>
</head>
<body>
        <input type="button" value="直接绑定方式" onclick="test()"/>
</body>
</html>
复制代码

 

第二种方式：

通过getelementById方法获取元素后再监听绑定

复制代码
<html>
<head>

<script language=”javascript”
Function test()
{
Document.write("hello");
}
</script>
</head>
<body>
        <input type=”button” id=”ID名称” value=”刷新界面”/>
<script>
          Document.getElementById(“ID名称”).onClick=test;//只能绑定在这，绑定在前面会报错。。。
</script>
</body>
</html>
复制代码

 

posted @   代码丶如风  阅读(269)  评论(0)  编辑  收藏  举报
编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
AI IDE Trae