首页 > 编程语言 >JavaScript—DOM(文档对象模型)

JavaScript—DOM(文档对象模型)

时间:2023-09-08 11:00:46浏览次数:57  
标签:function DOM 标签 JavaScript dv 文档 var document 节点


目录

DOM是什么?

DOM有什么作用?

一、事件

理解事件

事件怎么写(要做什么就写什么)?

实战演练

1、页面加载完毕以后,打印一句话

2、如果有一个a标签,并给其添加一个点击事件

3、事件默认处理程序

二、对节点进行增删改查

节点是有类型(文件节点,元素节点,属性节点)

为节点添加事件的方法

如何获得节点?

1、获取元素的方法:

2、获取节点的属性与子节点

属性(如果是元素节点,那么它可以有子节点)

①、创建属性节点

②、修改节点

响应式编程

③、添加节点

第一步、创建节点

第二步、追加节点

④、删除节点

实战

由json对象创建一个table表格

无刷新评论

内嵌样式与生成的dom节点


理解DOM

<html>
	<head>
		<title></title>
	</head>
	<body>
		<p>
			今天天气<span style="color:red;font-size:30px">很好</span>,昨天很冷……
		</p>
	</body>
</html>

JavaScript—DOM(文档对象模型)_html

只要换行了,就是空文本节点

JavaScript—DOM(文档对象模型)_html_02

DOM是什么?

文档对象模型

DOM有什么作用?

每个元素是一个对象,对象就是一个节点

通过DOM可以访问JavaScript HTML文档的所有元素,为这些对象动态的添加事件


一、事件

理解事件

节点就是对象

onload事件(Form1_Load)

页面的DOM结构加载完毕后会触发这个事件

事件怎么写(要做什么就写什么)?

  • C#事件就是一个委托变量(事件的编程概念)
  • JavaScript就是方法(给某个标签添加事件就自动触发相应的方法,比方说页面完成加载、input字段改变时、按钮被点击,事件被触发都可以执行一些代码)

描述性概念

浏览器的底层也会有很多出发函数的机制

If(onload != null){ 
	onload();
}

如果鼠标点击一个div
if(div.onclick !=null) {
	div.onclick();
}

实战演练

1、页面加载完毕以后,打印一句话
<html>
        <head>
                <title></title>
                <style type="text/css">			
                
                </style>
                <script type="text/javascript">
                        onl oad = function(){
                                alert("Hello World,页面终于加载完毕了……");
                        };
                        
                        var foo = function(){
                                alert("我是一个函数");
                        };
                </script>
        </head>
        <body>
                邓礼梅
                <input type="button" value="点击" onclick="foo()"/>
        </body>
</html>
2、如果有一个a标签,并给其添加一个点击事件

你的事件没有返回值或返回true那么a标签会直接跳转

否则就会停止执行默认操作

在发现点击a标签的时候,浏览器内部会执行

if(a.onlick != null ) {
  Var res = a.onclick;
  If(res === false) {
  	break;  //默认的正常跳转就不做了
  }
}
<html>
        <head>
                <title></title>
                <style type="text/css">			
                
                </style>
                <script type="text/javascript">
                        var foo = function(){
                                alert("准备跳转");
                                return false;   //如果a标签写了return这里不写的话,程序不执行
                        };
                </script>
        </head>
        <body>
                <a href="https://www.baidu.com/" onclick="return foo();">点击</a>  //return 点击事件的返回值,链接不跳转
        </body>
</html>

如果事件处理函数,返回了false表示这个事件默认不跳转

3、事件默认处理程序
<html>
        <head>
                <title></title>
                <style type="text/css">			
                
                </style>
                <script type="text/javascript">
                        
                </script>
        </head>
        <body>
                <form>
                        <input type="text" value="123" /><br />
                        <input type="text"  /><br />
                        <input type="text"  /><br />
                        <input type="text"  /><br />
                        <input type="text"  /><br />
                        <input type="text"  /><br />
                        <input type="text"  /><br />
                        <input type="text"  /><br />
                        <input type="reset" onclick="return confirm('您确定要重新输入么');" /><br />
                </form>
        </body>
</html>

confirm:弹出提示选择框


二、对节点进行增删改查

节点是有类型(文件节点,元素节点,属性节点)

标准DOM定义中有12种:元素节点 1 (标签节点,有子节点)

文本节点 3 (没有子节点)

属性节点 2 (没有子节点)

获得方式

<node>.nodeType

为节点添加事件的方法

<node>.onclick = function( ) { };

有什么不同?

  • 原来:在标签中定义onclick事件
  • 现在:在script代码块中通过document对象的方法获取标签id,去执行相应的事件

如何获得节点?

1、获取元素的方法:

document.get……

  • 节点对象document.getElementById(“id的字符串”):获得页面中指定id的节点对象
  • 节点集合document.getElementsByTagName("标签名"):获得页面中所有标签名符合要求的标签
  • 节点集合父节点.getElementsByTagName("标签名"):获得指定父节点下的所有名字符合要求的节点
<html>
        <head>
                <title></title>
                <style type="text/css">			
                
                </style>
                <script type="text/javascript">
                        onl oad = function(){
                                //页面加载完成后,才会有节点对象可以被访问到
                                //document.getElementById:返回一个指定id属性值为btn的对象
                                var btn = document.getElementById("btn");
                                btn.onclick=function(){
                                        //事件本身
                                        alert("点击了");
                                };
                        };
                </script>
        </head>
        <body>
                <input type="button" value="点击" id="btn"/>
        </body>
</html>

点击事件批处理

<html>
        <head>
                <title></title>
                <style type="text/css">			
                
                </style>
                <script type="text/javascript">
                        onl oad = function(){
                                var dv = document.getElementById("dv");
                                var links=dv.getElementsByTagName("a");
                                for(var i = 0; i<links.length;i++){
                                        links[i].onclick = function(){
                                                return false;
                                        };
                                };
                        };
                </script>
        </head>
        <body>
                <div id ="dv">
                        <a href="https://www.baidu.com/">传智播客</a><br />
                        <a href="https://www.baidu.com/">传智播客</a><br />
                        <a href="https://www.baidu.com/">传智播客</a><br />
                        <a href="https://www.baidu.com/">传智播客</a><br />
                        <a href="https://www.baidu.com/">传智播客</a><br />
                        <a href="https://www.baidu.com/">传智播客</a><br />
                </div>
                <hr />
                <div>
                        <a href="https://www.baidu.com/">传智播客</a><br />
                        <a href="https://www.baidu.com/">传智播客</a><br />
                        <a href="https://www.baidu.com/">传智播客</a><br />
                        <a href="https://www.baidu.com/">传智播客</a><br />
                        <a href="https://www.baidu.com/">传智播客</a><br />
                        <a href="https://www.baidu.com/">传智播客</a><br />
                </div>
        </body>
</html>

2、获取节点的属性与子节点

属性(如果是元素节点,那么它可以有子节点)

  • <node>.childNodes 获得节点下的所有子节点
  • <node>.firstChild <node>.childNodes[0]
  • <node>.lastChild <node>.childNodes[<node>].childNodes.length-1]

Nodes[i].nodeName 获取第i个节点的名字

<html>
        <head>
                <title></title>
                <style type="text/css">			
                
                </style>
                <script type="text/javascript">
                        onl oad = function(){
                                //先要获得dv元素
                                var dv = document.getElementById("dv");
                                //获得下面的所有a标签
                                //dv.childNodes
                                var nodes = dv.childNodes;
                                
                                var _ = 0;
                        };
                </script>
        </head>
        <body>
                <div id ="dv">
                        <a href="https://www.baidu.com/">传智播客</a><br />
                        <a href="https://www.baidu.com/">传智播客</a><br />
                        <a href="https://www.baidu.com/">传智播客</a><br />
                        <a href="https://www.baidu.com/">传智播客</a><br />
                        <a href="https://www.baidu.com/">传智播客</a><br />
                        <a href="https://www.baidu.com/">传智播客</a><br />
                </div>		
        </body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
                <title></title>
                <style type="text/css">
                        
                </style>
                <script type="text/javascript">
                        onl oad = function(){			
                                var dv = document.getElementById("dv");
                                var nodes = dv.childNodes;
                                //获取下标为1的标签类型及标签名
                                alert(nodes[1].nodeType +"," +nodes[1].nodeName);  
                        };
                </script>
        </head>
        <body>
                <div id="dv">
                        <input type="button" value="点击" id="btn" />
                </div>
        </body>
</html>

①、创建属性节点

document.createAttribute(name)

创建一个名叫align,值为center的属性节点
Var attr = document.createAttribute("align")
Attr.value= "center";

②、修改节点

所谓的修改节点就是修改节点的属性与包含的文本

获得节点

修改属性的标准方法(DOM-Core)

  • <node>.setAttribute("属性名","值"); //设置属性值
  • 文本<node>.getAttribute("属性名"); //读取属性值

DOM-html

<node>.属性名 = 值;

var v =<node>.属性名;

<节点>.style.成员=……

<html>
        <head>
                <title></title>
                <style type="text/css">			
                
                </style>
                <script type="text/javascript">
                        onl oad = function(){				            //窗体加载
                                var btn = document.getElementById("btn");   //获取按钮节点对象
                                        
                                btn.onclick=function(){                     //给按钮添加点击事件
                                        var txtNode = document.getElementById("txt");   //获取文本域的节点对象
                                        var txt =txtNode.value;                         //获取节点对象的属性值
                                        var p = document.getElementById("p");           //获取p标签的节点对象
                                        p.setAttribute("style",txt);                    //给p节点对象设置属性值
                                };
                        };
                </script>
        </head>
        <body>
                <p id = "p">这是一个测试文本</p>                                //文本标签,有一个名叫p的id
                <textarea id="txt" style="width:400px;height:300px;"></textarea> //文本域
                <br />
                <input type="button" value="点击" id="btn" />    //按钮
        </body>
</html>

JavaScript—DOM(文档对象模型)_传智播客_03

Style="width:80%;" //跟随浏览器的大小变化大小

响应式编程

③、添加节点

第一步、创建节点

元素节点:var node = document.createElement("标签名");

文本节点:var textNode = document.createTextNode("文本");

<节点>.innerHTML="文本"; //这里可以使用html

<节点>.innerText="文本"; //非标准。少用innerHTML。专门针对复杂的标签结构

属性节点:<节点>.setAttribute(……,……);

标准方法,符合xml规范,可以添加任意的属性

<a href="……" jk="jk">测试</a>

aNode.jk ="jk"; //部分浏览器是可以的

第二步、追加节点

追加到尾部:父节点.appendChild(子节点);

插入到中间(插入到某一个元素的前面):父节点.insertBefore(新元素,旧元素);

插入元素节点
<html>
        <head>
                <title></title>
                <style type="text/css">			
                
                </style>
                <script type="text/javascript" src="C:\Users\denglimei\Desktop\J.js"></script>
                <script type="text/javascript" scr>
                        onl oad = function(){
                                //获取两个元素
                                var ul=J("ul");   
                                var li=J("li");
                                
                                //创建li标签
                                var newLi= document.createElement("li");
                                //在li中添加文本
                                newLi.innerHTML="添加的测试点";
                                //插入
                                ul.insertBefore(newLi,li)
                        };
                </script>
        </head>
        <body>
                <ul id="ul">
                        <li>测试1</li>
                        <li id="li">测试2</li>
                        <li>测试3</li>
                </ul>
        </body>
</html>

实战:

元素节点:var node = document.createElement("标签名");

<html>
        <head>
                <title></title>
                <style type="text/css">			
                
                </style>
                <script type="text/javascript">
                        var J = function(id){
                                return document.getElementById(id);   //获取所有id节点对象
                        };
                        onl oad =function(){            //窗体加载事件
                                var btn =J("btn");         //获取元素
                                btn.onclick =function(){  //按钮加载事件
                                        var dv=J("dv");
                                        //创建标签
                                        var img = document.createElement("img");
                                        //追加标签
                                        img.src="C:\Users\denglimei\Desktop\1.jpg";
                                        //追加标签
                                        dv.appendChild(img);
                                        
                                        //创建一个换行
                                        var br = document.createElement("br");
                                        //追加标签
                                        dv.appendChild(br);
                                };
                        };
                </script>
        </head>
        <body>
                <input type="button" value="点击添加" id="btn" />
                <div id="dv"></div>
        </body>
</html>

文本节点:var textNode = document.createTextNode("文本");

<节点>.innerHTML="文本"; //这里可以使用html

<节点>.innerText="文本"; //非标准。少用innerHTML。专门针对复杂的标签结构

<html>
	        <head>
	                <title></title>
	                <style type="text/css">			
	                
	                </style>
	                <script type="text/javascript" src="C:\Users\denglimei\Desktop\J.js"></script>
	                <script type="text/javascript">
	                        onl oad = function(){
	                                var bd=J("bd");    //获取body节点对象
	                                
	                                <!-- //第一种方法 -->
	                                <!-- //创建p标签 -->
	                                <!-- var p = document.createElement("p"); -->
	                                <!-- //在p中添加文本 -->
	                                <!-- p.innerHTML='今天天气<span style="color:red">真好</span>呀'; -->
	                                <!-- //追加节点 -->
	                                <!-- bd.appendChild(p); -->
	                                
	                                //第二种方法:利用创建节点的做法
	                                //创建标签p
	                                var p = document.createElement("p");
	                                //创建第一个文本节点
	                                var txt1=document.createTextNode("今天天气");
	                                //创建第二个标签节点
	                                var span = document.createElement("span");
	                                //设置标签的样式
	                                span.style.color="red";
	                                //创建span里面的文本
	                                var txt2=document.createTextNode("很好");
	                                //将文本追加到span中
	                                span.appendChild(txt2);
	                                //创建最后一个文本标签
	                                var txt3=document.createTextNode(",我很热……");
	                                
	                                //追加到p中
	                                p.appendChild(txt1);
	                                p.appendChild(span);
	                                p.appendChild(txt3);
	                                
	                                bd.appendChild(p);
	                        };
	                        
	                        //应该选择哪种?
	                        //如果比较少选择上面
	                        //如果是大面积拼接选择下面的
	                </script>
	        </head>
	        <body id="bd">
	                
	        </body>
	</html>

属性节点:<节点>.setAttribute(……,……);

标准方法,符合xml规范,可以添加任意的属性

<a href="……" jk="jk">测试</a>

aNode.jk ="jk"; //部分浏览器是可以的

④、删除节点

父节点.removeChild(子节点);

<html>
        <head>
                <title></title>
                <style type="text/css">			
                
                </style>
                <script type="text/javascript" src="C:\Users\denglimei\Desktop\J.js"></script>
                <script type="text/javascript" scr>
                        onl oad = function(){
                                var body=J("body");
                                var p=J("p");
                                //第一种方法
                                body.removeChild(p);   //父节点.
                                
                                //第二种方法:现在大多这样使用
                                p.style.display="none";
                        };
                </script>
        </head>
        <body id="body">
                <p>1111111111</p>
                <p id="p">22222222222</p>
                <p>33333333333</p>
        </body>
</html>

第二种方法不是把它删除掉了,而是把p标签隐藏起来了

JavaScript—DOM(文档对象模型)_html_04

onmouseover:鼠标触及动态js-

实战

由json对象创建一个table表格

json格式的对象应该是什么样子:{name:"",age:"",sex:""}

<!DOCTYPE html>
<html> 
        <head>
                <title></title>
                <style type="text/css">
                        
                </style>
                <script type="text/javascript" src="J.js"></script>
                <script type="text/javascript">
                        // json格式的字符串
                        var str = '[{name:"赵晓虎",sex:"男",age:19},{name:"牛亮亮",sex:"男",age:29},{name:"杨中科",sex:"男",age:39}]';
                        onl oad = function() {
                                
                                // 生成一个table,然后追加到body中
                                
                                // 一开始就需要生成一个table
                                // 里面遍历json对象生成里面的tr
                                // 每一个json对象中的每一个成员(for-in)得到td标签
                                
                                // 1、生成table
                                var table = document.createElement("table");
                                table.border = "1";
                                // 2、得到json格式的对象
                                var jsons = new Function("return " + str)();
                                
                                // 3、循环这个数组
                                for(var i = 0; i < jsons.length; i++) {
                                        // 4、生成每一个行
                                        // 创建tr标签
                                        var tr = document.createElement("tr");
                                        // 5、添加td,就需要遍历每一个对象中的成员
                                        for(var k in jsons[i]) {
                                                // 6、创建td
                                                var td = document.createElement("td");
                                                td.appendChild(document.createTextNode(jsons[i][k]));
                                                // 7、追加td
                                                tr.appendChild(td);
                                        }
                                        // 循环结束,就得到一个行
                                        // 将行追加到table
                                        table.appendChild(tr);
                                }
                                // 将table加到body中
                                document.getElementsByTagName("body")[0].appendChild(table);
                                
                                var _ = 0;
                        };
                </script>
        </head>
        <body>
        </body>
</html>

无刷新评论

<html>
        <head>
                <title></title>
                <style type="text/css">			
                        #txt{
                                width:400px;
                                height:100px;
                        }
                        #dv{
                                border:1px solid pink;
                        }
                        
                </style>
                <script type="text/javascript" src="J.js"></script>
                <script type="text/javascript">
                        onl oad = function(){
                                var btn = J("btn");          //获取按钮对象

        btn.onclick=function(){
                var txt=J("txt").value;  //获取用户输入
                var p = document.createElement("p");   //创建p标签
                
                <!-- p.innerHTML=txt; -->
                p.appendChild(document.createTextNode(txt));   //创建文本节点并传值,并将文本追加到p中
                
                //追加或插入
                //方法一、
                var ps =J("dv").getElementsByTagName("p");   //获得dv对象中所有标签名符合要求的标签
                if(ps.length >0) {
                        //插入
                        J("dv").insertBefore(p,ps[0]);  //插入标签
                }else{
                        //追加
                        J("dv").appendChild(p);
                }
                
                //方法二、
                var ps =J("dv").getElementsByTagName("p");
                new Function("p","ps",'J("dv").' + 
                        (ps[0] ? "insertBefore(p,ps[0])" : "appendChild(p)")
                )(p,ps);
        };
        };
        </script>
        </head>
        <body>
                <textarea id="txt"></textarea>
                <br />
                <input type="button" value="评论" id="btn"/>
                <br />
                <div id ="dv"></div>
        </body>
</html>

内嵌样式与生成的dom节点

body里面没有div,script进行创建设置

<html>
        <head>
                <title></title>
                <style type="text/css">			
                        #dv{
                                width:300px;
                                height:100px;
                                border:1px solid red;
                                background-color:pink;
                        }
                </style>
                <script type="text/javascript" src="C:\Users\denglimei\Desktop\J.js"></script>
                <script type="text/javascript" scr>
                        onl oad = function(){
                                //创建div标签
                                var dv = document.createElement("div");   
                                dv.id="dv";
                                document.getElementsByTagName("body")[0].appendChild(dv);
                        };
                </script>
        </head>
        <body>	
        </body>
</html>

标签:function,DOM,标签,JavaScript,dv,文档,var,document,节点
From: https://blog.51cto.com/u_15921176/7407688

相关文章

  • 结构化文档开发笔记
    一些浅薄的见解有错误请指出1.结构化文档编写和发布的基本流程看了一些工具的文档,发现从编写xml到输出为pdf、html的步骤是固定的,从编写XML文件到输出为PDF文档的一般流程包括以下步骤:编写XML文件:根据需要的文档结构和内容,使用XML标记语言编写XML文件。XML文件应包含所需的数......
  • 后疫情时代援助物资调度系统的设计与实现-计算机毕业设计源码+LW文档
    摘要新冠疫情的产生给人类社会产生了非常大的影响,通过管理系统来深化后疫情时代的援助物资调度管理是目前重要的工作。我国人口基数大,人员复杂,只有通过管理系统才能精确的进行人员和物资管理,为精准调度做出正确的操作。同时,利用数据库存储援助物资信息,改变传统的手工记录,有效提高......
  • 课程教学质量评价系统设计与实现-计算机毕业设计源码+LW文档
    1.选题背景、意义教学质量评价是依照教学标准和数学目标、对教师教学能力进行价值评判,是教学活动进行的重要步骤之一。教师的教学质量越高,代表其教学能力越强。因此,需要建立十分合理的评价标准来对教师教学质量进行评判。现如今国内外教育评价标准多种多样,国外学者侧重于将学生学......
  • 基于web的宿舍管理系统-计算机毕业设计源码+LW文档
    一、研究的背景意义高校作为教书育人的场所,利用信息技术改变落后的教育方式是很有必要的事情。基于web的宿舍管理系统可以解决目前高校高校宿舍管理的问题,提高教师工作效率,快速的完成高校高校宿舍管理相关事宜,及时发布宿舍信息,使得学生可以第一时间查询到自己的宿舍信息。学生宿舍......
  • 测试文档
    测试发布packagecom.tang.consumptionRecord;importcom.tang.consumptionRecord.domain.Feedback;importcom.tang.consumptionRecord.util.JDBCUtils;importorg.apache.commons.dbutils.QueryRunner;importorg.apache.commons.dbutils.handlers.BeanListHandler;imp......
  • Vue的数组操作方法和JavaScript原生数组方法有什么区别?
    Vue的数组操作方法和JavaScript原生数组方法之间存在一些区别,主要体现在对响应式更新的处理上。#####1:响应式更新:Vue数组操作方法是对JavaScript原生数组方法的封装,能够触发Vue的响应式更新机制。这意味着当你使用Vue的数组操作方法修改数组时,Vue会自动检测到数组的变化......
  • 统信UOS1060使用UDOM工具箱打开支持长文件名特性
    原文链接:统信UOS1060使用UDOM工具箱打开支持长文件名特性hello,大家好啊,今天给大家带来一篇文章,在统信UOS发布的最新版桌面操作系统1060中,增加了长文件名模式,最长支持255个中文或英文字符,这样对于在windows上使用长文件的文件,迁移到国产操作系统上而言,避免了文件命名失败、文件丢失......
  • 论文解读(CST)《Cycle Self-Training for Domain Adaptation》
    Note:[wechat:Y466551|可加勿骚扰,付费咨询]论文信息论文标题:CycleSelf-TrainingforDomainAdaptation论文作者:HongLiu,JianminWang,MingshengLong论文来源:2021 论文地址:download 论文代码:download视屏讲解:click......
  • WorkPlus Meet白板和文档共享功能上线,私有化视频会议全新升级
    在迅猛发展的数字化时代,私有化视频会议成为企业高效沟通和协作的关键工具。WorkPlusMeet作为领先品牌,倾力打造私有化视频会议平台,并且最新上线了全新的白板和文档共享模块。本文将重点介绍WorkPlusMeet如何通过创新功能和稳定性,提供卓越的私有化视频会议体验,助力企业实现高效沟通......
  • 无涯教程-JavaScript - ERFC函数
    描述ERFC函数返回x和无穷大之间集成的互补ERF函数。互补误差函数等于1-ERF(即1-误差函数),由等式给出-$$Erfc(x)=\frac{2}{\sqrt{\pi}}\int_{x}^{\infty}e^{-t^2}dt$$语法ERFC(x)争论Argument描述Required/OptionalxThelowerboundforintegratingE......