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>              
时间: 2024-10-29 05:04:53

DOM编程 学习笔记(二)的相关文章

HTML DOM(学习笔记二)

嗯,在HTML DOM(学习笔记一)中简单描述了一下HTML DOM 是什么,这一篇将记录下来有关HTML DOM的内容! 1:DOM节点 首先,再来看一下HTML DOM的树状结构,如下图所示: 这就是我们要处理的HTML DOM 也就是一种HTML文档的另一种表现的形式,更加接近我们的HTML文档的表现形式的样式是这样的,如下图所示: 在HTML DOM中,所有的事物都是节点.HTML DOM就是被视为节点树的HTML.根据W3C的HTML DOM标准,HTML文档中所有内容都是节点,如上图

DOM编程 学习笔记(一)

PS:虽然自己JS基本语法算是掌握了,但是其实在JS掌握的只是远远还不够,网页上有太多好看的动态效果都是用JS 做出来的,自己也就仅仅会那么一两个动态的效果,学的只是皮毛...等有空的时候一定要好好的研究那些动态效果 的制作,实在是太炫酷了...先开始DOM的基本语法吧...等DOM和JQuery的基本语法和用法搞定后就去深入的研究 研究那些动态效果的制作... DOM编程 学习内容 1.DOM简单介绍 2.DOM解析方式 3.在网页中使用DOM编程 4.DOM window对象以及Loacti

FFmpeg编程学习笔记二:音频重采样

ffmpeg实现音频重采样的核心函数swr_convert功能非常强大,可是ffmpeg文档对它的注释太过简单,在应用中往往会出这样那样的问题,其实在读取数据->重采样->编码数据的循环中在第一次执行swr_convert后还应用swr_convert再作个缓存检测看看是否还有数据,如果有就要把它写到FIFO中去,留在下次再使用,这点在转码和由低向高转换采样率时特别重要. 下面一段简单的代码,摘自我自已写的测试程序. const int frame_size = FFMIN(fifo_size

JavaScript DOM编程 学习笔记

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //整个HTML文档加载完成之后出发window.onload事件,事件出发后执行function函数体 window.onlo

JavaScript DOM编程 学习笔记-获取元素节点

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function() { //在编写html文档时需要确定id属性值是唯一的 //该方法为doc

JavaScript DOM编程 学习笔记-节点属性

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //关于节点的属性:nodeType  nodeName  nodeValue //在HTML文档中,任何一个节点都有这三个属性

JavaScript DOM编程 学习笔记-创建并接入节点

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //新创建一个元素节点,并把该节点添加为文档中指定节点的子节点 window.onload = function() { //创

JavaScript DOM编程 学习笔记-两个小示例

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function() { //点击每个li节点都弹出其文本值 var liNodes = doc

linux sheel编程学习笔记(二) --- grep命令

Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达式版本,它的使用权限是所有用户. grep的工作方式是这样的,它在一个或多个文件中搜索字符串模板.如果模板包括空格,则必须被引用,模板后的所有字符串被看作文件名.搜索的结果被送到标准输出,不影响原文件内容. grep可用于shell脚本,因为grep通过返回一个状态值来说明搜索的状态,如果模板搜索成