0
点赞
收藏
分享

微信扫一扫

js基础④—DOM(文档对象模型)、DOM事件、DOM节点的增删改查

倚然君 2022-04-18 阅读 40

目录

DOM是什么?

DOM有什么作用?

一、事件

事件是什么?

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

实战演练

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

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

3、事件默认处理程序

二、对节点进行增删改查

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

为节点添加事件的方法

如何获得节点?

1、获取元素的方法:

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

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

①、创建属性节点

②、修改节点

③、添加节点

DOM是什么?

文档对象模型

DOM有什么作用?

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

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

一、事件

事件是什么?

节点就是对象

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

  • 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">
                        onload = 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……

<html>
        <head>
                <title></title>
                <style type="text/css">			
                
                </style>
                <script type="text/javascript">
                        onload = 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">
                        onload = 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、获取节点的属性与子节点

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

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

<html>
        <head>
                <title></title>
                <style type="text/css">			
                
                </style>
                <script type="text/javascript">
                        onload = 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">
                        onload = 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)

<html>
        <head>
                <title></title>
                <style type="text/css">			
                
                </style>
                <script type="text/javascript">
                        onload = 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>

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>
                        onload = 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>

举报

相关推荐

0 条评论