DOM,文档对象模型

DOM全称:Document Object Model文档对象模型。JS通过DOM来对HTML文档进行操作。

  • 文档:表示的是整个html网页文档
  • 对象:表示将网页中的每一个部分都转换为一个对象
  • 模型:使用模型来表示对象之间的关系,方便获取对象

在这里插入图片描述

DOM常进行的操作

  • 获取元素节点
  • 对元素进行操作
  • 动态创建元素
  • 事件

获取元素

节点

构成HTML文档最基本的单元

常用节点分四类

  • 文档节点:整个html文档
  • 元素节点:html文档中html标签
  • 属性节点:元素的属性
  • 文本节点:html标签中的文本内容
    在这里插入图片描述
节点属性nodeNamenodeTypenodeValue
文档节点#document9null
元素节点标签名1null
属性节点属性名2属性值
文本节点#text3文本内容

获取元素节点

  • 通过document对象调用
  1. getElementById():通过id属性获取一个元素节点对象
    var myElement = document.getElementById("intro");
    
  2. getEleMentsByTagName():通过标签名获取一组元素节点对象
    var x = document.getElementById("main");
    var y = x.getElementsByTagName("p"); 
    
  3. getElementsByName():通过name属性获取一组元素节点对象
    var x = document.getElementsByName("intro");
    
  4. getElementsByClassName():通过类名获取相同类名元素节点对象
    var x = document.getElementsByClassName("intro");
    
  5. querySelectorAll():通过选择器获取元素节点内容
    var x = document.querySelectorAll("p.intro");
    
  • 如果需要读取元素节点属性,直接使用元素.属性名,如元素.id,元素.name元素.value,注意class属性需要元素.className

获取元素节点的子节点

  • 通过具体的元素节点调用
  1. getElementByTagName():方法,返回当前节点的指定标签名后代节点
  2. child Nodes:属性,表示当前节点的所有子节点
  3. first Child:属性,表示当前节点的第一个子节点
  4. lastChild:属性,表示当前节点的最后一个子节点

对元素进行操作

操作元素属性

  • 对象.src = ‘目标地址’
  • 对象.href = ‘目标链接’
  • 对象.alt = ‘目标替换文本’
  • 对象.title = ‘目标图片提示信息’

操作表单属性

  • 对象.type = ‘更换表单类型’;
  • 对象.value = ‘更换表单的内容’
  • 对象.disabled = ‘true’

操作样式属性

普通修改

<div id="box">123456798</div>  
// 点击目标盒子,显示一个红色背景
var box = document.querySelector('#box');
box.onclick = function() {
this.style.backgroundColor = 'red';
     }

利用className= '值'属性

// 设置红色背景的样式
.red {
      background-color: red;
 }
// 通过给目标盒子添加red的样式类,来改变他的背景
var box = document.querySelector('#box');
    box.onclick = function() {
       this.className = 'red';
     }

动态创建元素

document.write();

比较随意,想创建就创建,可以直接在write里写属性就行,但由于容易覆盖原页面,所以不推荐使用;

<script>
// window.onload表示当页面全部加载完毕后再执行{}内的代码
window.οnlοad=function(){
	document.write("<div>123</div>");
}
</script>

inner HTML = ();

<div></div>
<script>
// 采取拼接字符串的方式创建元素 效率很低
	var divs = document.querySelector("div");
	for(var i=0; i<=500; i++){
		divs.innerHTML += "<a href='javascript:;'>123</a>";
	}
// 采取数组的方式创建元素 效率更高
	var arr = [];
	for(avr i=0; i<=500; i++){
	// 向数组中添加a
		arr.push("<a href='javascript:;'>123</a>");
	}
	// join把数组转换为字符串形式
	dis.innerHTML = arr.join[""];
</script>

document.createElement();

<div></div>
<script>
	var divs = document.querySelector("div");
	for(var i=0; i<=500; i++){
            var as = document.createElement("a");
            divs.appendChild(as);
        }
</script>

innerHTM和document.createElement()如果是创建单个元素是没有区别的。如果创建的元素数量很多, 使用innerHTML拼接字符串的方式和document.createElement()相比,效率会低很多。但如果使用innerHTML数组的形式和document.createElement()相比,效率就会提高很多,比document.createElement()效率还要高。

事件

文档或浏览器窗口中发生的一些特定的交互瞬间,即用户和浏览器的交互行为

  • JavaScript与HTML之间的交互是通过事件实现的
  • 对于Web应用来说,有点击某个元素 将鼠标移动到某个元素上方按下键盘上某个键等这些代表性事件

事件监听程序

  1. 绑定HTML元素属性
<input type = "button" id = "btn" value = "1" onclick = "alert('?')" >
  1. 绑定DOM对象属性
<body>
	<input type="button" id="btn" value="点我有惊喜" />
    <script>
      // 获取元素
      var btn = document.getElementById("btn");
      // 添加绑定事件
      btn.onclick = function () {
        // 定义的是事件被触发后要做的事
        alert("惊喜");
      };
    </script>
</body>

分配事件

事件触发方式
onclick鼠标单击
onload进入页面
onunload离开页面
onchange离开字段
onmouseover鼠标移动到元素上
onmouseout鼠标移动到元素边界
onmousedown鼠标按键按下
onmouseup鼠标按键放开
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值