8.DOM模型

目录

一、HTML DOM 树

HTML DOM 模型被构造为对象的树。

image-20200719143330143

DOM规定HTML中每一个成分都是一个节点。

  • 文档节点(document对象)：代表整个节点
  • 元素节点（element对象）：代表一个元素
  • 文本节点（text对象）：代表元素（标签）中的文本
  • 属性节点（attribute对象）：代表属性
  • 注释也是一个节点，注释节点（comment对象）

js可以修改HTML元素、属性、CSS样式

二、DOM文档的加载步骤

　1、解析HTML结构。

　　2、加载外部脚本和样式表文件。

　　3、解析并执行脚本代码。

　　4、DOM树构建完成。

　　5、加载图片等外部文件。

　　6、页面加载完毕。

注意：需要注意的是DOM数先构建完成，才加载图片等外部文件。

三、DOM节点——节点查找

直接查找

document.getElementById			根据id获取一个标签
document.getElementsByClassName			根据class值获取一个标签的属性，返回数组
document.getElementsByTagName			根据标签名获取标签合集

间接查找

parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

var a = document.getElementById('d1');
a.aprentElement;

a.parenmentElement.innerText = 'qwe';			//这会将d1的父级标签下的所有文本改成qwe

var cc = doucment.getElementByclassName('cc');
cc[0].children;			//返回一个数组

四、DOM节点——节点操作

4.1 创建一个节点

document.createElement('标签名称')

var aa = document.createElement('a');
a.innerText = 'google';
var d = document.createElement('div');

4.2 添加节点

appendChild(新元素)：把当前创建的新元素添加到容器(div等)的末尾

insertBefore(新元素, 老元素)：在当前容器(div等)中，把新元素添加到老元素之前

dd = document.getElementByid('dd');			//找到div标签
dd.appendChild(aa);		//aa是上面创建的a标签,将aa添加到dd这个div标签下

4.3 删除节点

removeChild(元素)：获得要删除的元素，通过父元素调用删除

dd.removeChild(d2);

4.4 替换节点

replaceChild(新元素， 老元素)：在当前容器中，拿新元素替换老元素。

dd.replaceChild(newnode, 某个节点)

4.5 复制节点

cloneNode(false/true):把原有的元素复制一份一摸一样的

false：只复制当前元素本身

true：深度copy，当前元素和后代都复制

document.body.appendChild(box2.cloneNode()) // -> 克隆盒子并添加到body末尾,但不克隆子元素及内容
document.body.appendChild(box2.cloneNode(true)) // -> 克隆元素并添加到body末尾,克隆子元素及内容(即使是深度克隆也只是克隆内容和结构,并不会克隆盒子上发生的事件)

4.6 文本操作

dd.innerText = "<a></a>";			//只能是纯文本
dd.innerHTML = "<a></a>";			//能识别标签，也可以是纯文本

4.7 属性操作

//获取标签属性
console.log(oH2.getAttribute('class'));//
 
//设置标签属性
oA.setAttribute('href','https://www.baidu.com');
 
//删除元素上的属性
oA.removeAttribute('href');

getAttribute不可以操作class，因为不唯一。

//取属性值 :
//    方式一
    ele.getAttribute('id');
//    方式二
    ele.id;
// 属性赋值
//    方式一
    ele.setAttribute('id','d3');
//    方式二
    ele.id = 'd3';

4.8 值的操作

value属性可设置或返回单选按钮的value属性的值。

var inp = document.getElementById('username');
inp.value;			//查看值
inp.value = 'an';		//设置值

//选择框
<select name='city' id = 'city'>
  <option value='1'>北京</option>
	<option value='2'>上海</option>
	<option value='3'>杭州</option>
</select>

//查看值
var inp = document.getElementById('city');
inp.value;
inp.value = '1';

4.8 class操作

dd.classlist; 返回这个标签所有的class，是一个list。

var d = document.getElementById('oo');
d.classList;
d.classList.add('aa1');
d.classList.remove('aa1');
d.classList.contains('aa1');		//判断是否有这个class，有就返回true，否则返回false
d.classList.toggle('aa1');		//有就删除，没有就增加

d.style.backgroundColor = 'red';		//带'-'的css属性要去掉'-',后面单词的首字母大写
d.style.height = '100px';

五、事件

　Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

　　事件通常与函数结合使用，函数不会在事件发生前被执行，通常和标签绑定事件。

绑定事件：

5.1 onclick

鼠标点击时

方式一：

<body>
  <div id='d1' class='c1' onclick='func1();'>
    
  </div>
  
  <script>
    func1 f1(){
      var d = document.getElementById('d1');
      d.style.backgroundColor = 'red'
    }
  </script>
</body>

方式二：

<script>
  var d = document.getElementById('d1');
  d.onclick = function(){
    d.style.backgroundColor = 'red';
  }
</script>

方式三：

<body>
  <div id='d1' class='c1' onclick='func1(this);'>
    
  </div>
  
  <script>
    func1 f1(){
      this.style.backgroundColor = 'red'
    }
  </script>
</body>

5.2 onfocus和onblur

<body>
    <div id='d1' class='cc1'>
    
    </div>
    username<input type='text' id='username'>

    <script>
        //onfocus事件，获得光标
        var inp = document.getElementById('username');
        inp.onfocus = function(){
            var d = document.getElementById('d1');
            d.style.backgroundColor = 'red'
        }

        // onblur 失去光标时触发的事件
        inp.onblur = function(){
            var d = document.getElementById('d1');
            d.style.backgroundColor = 'green';
        }
    </script>
</body>

5.3 onchage

<body>
    <div id='d1' class='c1'></div>
    <select name = "" id = "j">
        <option values="1">an</option>
        <option values="2">bn</option>
        <option values="3">cn</option>

    </select>
    <script>
        //onchange事件，内容发生时触发
        var s = document.getElementById('j')
        s.onchange = function(){
            console.log(this.options[this.selectedIndex].innerText + '舒服')
          //this.options   select标签的所有的option标签
          //this.selectedIndex被选中的标签在所有标签中的索引值
          //
        }

    </script>
</body>

5.4 其他属性和方法

属性 发生场景
onabort 图像的加载被中断
onblur 元素失去焦点
onchange 域的内容被改变
onclick 当用户点击某个对象时调用的事件句柄
ondblclick 当用户双击某个对象时调用的事件句柄
onerror 在加载文档或图像时发生的错误
onfocus 元素获得焦点
onkeydown 某个键盘按键被按下
onkeypress 某个键盘按键被按下并松开
onkeyup 某个键盘按键被松开
onload 一张页面或一幅图完成加载
onmousedown 鼠标按钮被按下
onmousemove 鼠标被移动
onmouseout 鼠标移动到某元素之上
onmouseup 鼠标按键被松开
onreset 重置按钮被点击
onselect 文本被选中
onsubmit 确认按钮被点击
onunload 用户退出页面
posted @   journeyerxxx  阅读(175)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 通过 API 将Deepseek响应流式内容输出到前端
· AI Agent开发，如何调用三方的API Function，是通过提示词来发起调用的吗
返回顶部
点击右上角即可分享
微信分享提示