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

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

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">
                        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……


  • 节点对象document.getElementById(“id的字符串”):获得页面中指定id的节点对象
  • 节点集合document.getElementsByTagName("标签名"):获得页面中所有标签名符合要求的标签
  • 节点集合父节点.getElementsByTagName("标签名"):获得指定父节点下的所有名字符合要求的节点


<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、获取节点的属性与子节点


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


  • <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">
                        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)


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


DOM-html
<node>.属性名 = 值;
var v =<node>.属性名;
<节点>.style.成员=……


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

5758280f6b085aec3b6cad233eae8a9b.png


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>


相关文章
|
3天前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
`DOM`中的`Named Node Map`是元素节点属性的列表,自动更新增删操作。代码示例载入&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性列表,`x.length`显示属性数量,`x.getNamedItem(&quot;category&quot;).nodeValue`输出&quot;category&quot;属性值,如&quot;cooking&quot;,并显示属性总数1。
|
3天前
|
XML JavaScript 数据格式
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的元素数量。在示例中,代码加载&quot;books.xml&quot;,然后通过`getElementsByTagName(&quot;title&quot;)`获取所有标题节点。使用`for`循环遍历这些节点,输出每个标题的文本内容。这个例子展示了如何交互式地处理XML文档中的特定标签。
|
1天前
|
JavaScript
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的元素数量。通过遍历这个属性,如`for (i=0; i&lt;x.length; i++)`,可以访问和处理每个节点。在示例中,加载&quot;books.xml&quot;,然后获取所有&quot;&lt;title&gt;&quot;标签,并输出它们的子节点值。
|
2天前
|
XML JavaScript 数据格式
XML DOM 节点树
这是一个关于XML DOM节点树的描述,提到了从第一个子节点到最后一个子节点的内容。示例XML片段展示了一本书的信息:书名&quot;Giada De Laurentiis&quot;,出版年份&quot;2005&quot;和价格&quot;30.00&quot;。
|
3天前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
6 2
|
3天前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改
|
4天前
|
JavaScript 前端开发 索引
JavaScript基础-数组操作:增删改查
【6月更文挑战第11天】本文介绍了JavaScript数组的增删改查操作,包括查询(索引访问、indexOf、lastIndexOf、includes)、修改(直接赋值、splice)、添加(push、unshift、splice)和删除(pop、shift、splice)。同时,文章列举了三个易错点:数组越界、splice参数理解不清及修改原数组与返回值混淆,并提供了相应的避免策略。通过代码示例展示了各种操作的用法,强调理解方法特性和实践的重要性,以提升数组操作效率。
|
4天前
|
XML JavaScript 数据格式
XML DOM 节点树
这是一个关于XML DOM节点树的描述,关注第一个子节点到最后一个子节点。
|
6天前
|
XML 存储 JavaScript
XML DOM - 访问节点
XML DOM允许访问XML文档的所有节点,可通过getElementsByTagName()方法、节点遍历或导航节点关系来访问。getElementsByTagName()返回一个节点列表,类似数组。示例代码加载&quot;books.xml&quot;到xmlDoc,然后存储在变量x中。
|
JavaScript 前端开发
《编写可维护的JavaScript》——2.4 文档注释
这里强烈推荐你使用文档生成工具来为你的JavaScript生成文档。JavaScript代码注释必须符合你所用的工具支持的格式,但很多文档生成工具都支持JavaDoc风格的文档注释。当使用文档注释时,你应当确保对如下内容添加注释。
1331 0