0
点赞
收藏
分享

微信扫一扫

JavaScript—DOM(文档对象模型)


目录

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(文档对象模型)_开发语言

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

JavaScript—DOM(文档对象模型)_开发语言_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">
                        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>

JavaScript—DOM(文档对象模型)_html_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>
                        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>

实战:

元素节点: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节点对象
                        };
                        onload =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">
	                        onload = 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>
                        onload = 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(文档对象模型)_前端_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}]';
                        onload = 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">
                        onload = 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>
                        onload = function(){
                                //创建div标签
                                var dv = document.createElement("div");   
                                dv.id="dv";
                                document.getElementsByTagName("body")[0].appendChild(dv);
                        };
                </script>
        </head>
        <body>	
        </body>
</html>

举报

相关推荐

0 条评论