您的位置: 首页  >  文章  >  JavaScript高级之DOM对象

JavaScript高级之DOM对象

分类: 文章 • 2022-10-08 17:10:55

JavaScript高级之DOM对象

01_DOM_概述

概念： Document Object Model 文档对象模型
* 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
JavaScript高级之DOM对象
JavaScript高级之DOM对象
说明：整个html文档被加载到内存中会形成一棵DOM树，产生一个DOM对象叫document。每个标签、文本、属性都会被封装成DOM树的节点对象，细分分别叫元素节点、文本节点、属性节点，但都称为节点。各节点之间的关系有父子节点关系，还有兄弟节点关系。

02_DOM_Document对象_获取Element方法

核心DOM模型：
* Document：文档对象
1. 创建(获取)：在html dom模型中可以使用window对象来获取
1. window.document
2. document
2. 方法：
1. 获取Element对象：
1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
有几种方式获取元素节点对象，方法有什么特点？
JavaScript高级之DOM对象

03_DOM_Document对象_创建DOM对象
2. 创建其他DOM对象：
createAttribute(name)
createComment()
createElement()
createTextNode()

04_DOM_Element对象

Element：元素对象
1. 获取/创建：通过document来获取和创建
2. 方法：
1. removeAttribute()：删除属性
2. setAttribute()：设置属性
JavaScript高级之DOM对象
JavaScript高级之DOM对象
05_DOM_Node对象

Node：节点对象，其他5个的父对象
* 特点：所有dom对象都可以被认为是一个节点
* 方法：
* CRUD dom树：
* appendChild()：向节点的子节点列表的结尾添加新的子节点。
* removeChild() ：删除（并返回）当前节点的指定子节点。
* replaceChild()：用新节点替换一个子节点。
* 属性：
* parentNode 返回节点的父节点 (注意,是属性,不是函数,没有())

06_HTMLDOM_innerHTML

HTML DOM

  1. 标签体的设置和获取：innerHTML
    JavaScript高级之DOM对象
    //使用innerHTML添加
    document.getElementById(“btn_add”).onclick = function() {
    //2.获取文本框的内容
    var id = document.getElementById(“id”).value;
    var name = document.getElementById(“name”).value;
    var gender = document.getElementById(“gender”).value;
    //获取table
    var table = document.getElementsByTagName(“table”)[0];
    //追加一行
    table.innerHTML += “\n” +
    " “+id+”\n" +
    " “+name+”\n" +
    " “+gender+”\n" +
    " <a href=“javascript:void(0);” onclick=“delTr(this);” >删除\n" +
    " ";
    }

07_HTMLDOM_样式控制

  1. 控制元素样式
    1. 使用元素的style属性来设置
    如：
    //修改样式方式1
    div1.style.border = “1px solid red”;
    div1.style.width = “200px”;
    //font-size–> fontSize
    div1.style.fontSize = “20px”;
  2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
    JavaScript高级之DOM对象
    Dom总结:
    查询元素
    document.getELementById(“id”);
    document.getElementsByClassName(“c2”);
    document.getELementsByTagName(“div”);
    document.getElementsByName(“uname”);
    创建元素
    var opt = document.createElement(“option”);
    var text1 = document.createTextNode(“北京市”);
    元素.innerHTML = “hello”;
    修改属性
    元素.setAttribute(“value”,“beijing”);
    value,checked,className,disabled,style,readonly
    readonly与disabled的区别:
    readonly:值不能改,但值可以提交
    disabled:值不能改,值也不可提交,连选中也不能
    JS控制checked,readonly和disabled的值是true和false;
    修改标签体内容
    元素.innerHTML
    添加元素
    父节点.appendChild(子节点);
    对象.innerHTML += “
    hello
    ”;
    删除元素
    父节点.removeChild(子节点);
    父节点.innerHTML = “”;

08_事件_概述

事件监听机制：
* 概念：某些组件被执行了某些操作后，触发某些代码的执行。
* 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
* 事件源：组件。如： 按钮 文本输入框…
* 监听器：代码。
* 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。 *JavaScript高级之DOM对象
* 常见的事件：
1. 点击事件：
1. onclick：单击事件
2. ondblclick：双击事件
2. 焦点事件
1. onblur：失去焦点
2. onfocus:元素获得焦点。
3. 加载事件：
1. onload：一张页面或一幅图像完成加载。
4. 鼠标事件：
1. onmousedown 鼠标按钮被按下。
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
5. 键盘事件：
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
6. 选择和改变
1. onchange 域的内容被改变。
2. onselect 文本被选中。
7. 表单事件：
1. onsubmit 表单提交按钮被点击。
2. onreset 重置按钮被点击。
09_事件_常见事件演示
JavaScript高级之DOM对象JavaScript高级之DOM对象
JavaScript高级之DOM对象
JavaScript高级之DOM对象

相关推荐