Js-DOM文档对象模型

最新推荐文章于 2023-01-06 08:28:43 发布
最新推荐文章于 2023-01-06 08:28:43 发布
阅读量236 收藏
点赞数
分类专栏： Js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42863800/article/details/103765445
版权

Ⅰ- 壹 - DOM文档对象模型

  1. DOM ( Document Object Model ) 文档对象模型, 是W3C组织推荐的一套操作网页元素的应用程序接口(API)。
  1. document是DOM的核心对象，HTML DOM 定义了访问和操作HTML文档的标准方法
  1. 我们可以通过JavaScript操作DOM，可以对节点实现增删改查操作，可以动态添加标签，属性等。

元素的继承树

所有的标签都是DOM元素 是Object类型

Object–>EventTarget–>Node–>Element–>HTMLElement–>HTMLDivElement

//div的继承树 //
Object–>EventTarget–>Node–>Element–>HTMLElement–>HTMLDivElement

//a的继承树 //
Object–>EventTarget–>Node–>Element–>HTMLElement–>HTMLAnchorElement

//span的继承树 //
Object–>EventTarget–>Node–>Element–>HTMLElement–>HTMLSpanElement

//ul的继承树 //
Object–>EventTarget–>Node–>Element–>HTMLElement–>HTMLUListElement

//li的继承树 //
Object–>EventTarget–>Node–>Element–>HTMLElement–>HTMLLIElement

 ..........................

Ⅱ - 贰 -DOM 节点

HTML 文档中的每个成分都是一个节点，如：HTML 里整个文档、每个标签、每个标签的属性和文本都可作为一个节点。

一 节点分类与层次关系

1 节点分类

① 文档节点(Document)：整个 XML、HTML 文档

② 元素节点(Element)：每个 XML、HTML 元素

③ 属性节点(Attr)：每个 XML、HTML 元素的属性

④ 文本节点(Text)：每个 XML、HTML 元素内的文本

⑤ 注释节点(Comment)：每个注释

2 层次关系

节点层次关系-节点彼此都有等级关系.
节点彼此都有等级关系：父节点、兄弟节点、子节点等等。
HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。

和 的父节点是 节点。

当节点分享同一个父节点时，它们就是同辈（同级节点）。

节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点。

节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。比方说，所有的文本节点都可把 节点作为先辈节点。

HTML DOM 模型被构造为对象的树
在这里插入图片描述

二 DOM 节点属性

在这里插入图片描述

1 标签的内容属性

（1）innerHTML

以 HTML 代码格式获取或设置节点的内容

获取标签内容的时候，不管标签还是文本，都能获取到
innerHTML设置内容的时候，覆盖原来内容，标签也能生效，浏览器能解析这个标签

（2）innerText

获取或设置节点的文本内容

获取标签内容的时候，只会获取文本，标签扔掉了 设置标签内容的时候，覆盖原来内容，对标签进行转义（目的：把标签直接当文本来用）

兼容性

innerText是 IE 提出来的属性，因此低版本的火狐浏览器不支持这个属性。
火狐有一个textContent属性，效果跟innerText一样，但是 IE678 不支持这个属性
innerText 的兼容性代码:

function getInnerText(element){
  if(typeof element.innerText === "string"){
    return element.innerText;
  } else {
    return element.textContent;
  }
}
（3）区别

共同点 : 都是用来获取和设置标签的内容的
区别 :

  • innerHTML可以用于获取和设置标签的所有内容，包括标签和文本内容
  • innerText只识别文本，标签会被转义。（可以防止 xss 攻击）
  • innerHTML会转义HTML标签，innerText则不会

三 节点的属性

分别是 nodeName（节点名称）nodeValue（节点值）nodeType（节点类型）

1 nodeName（节点名称）

获取节点名称，只读属性

  • 各个节点的返回值
节点类型nodeName
文档节点(Document)返回 #document
元素节点(Element)返回 大写元素名称
属性节点(Attr)返回 属性名称
文本节点(Text)返回 #text
  • 示例：
console.log( document.nodeName ); // => #document：文档节点
console.log( document.body.nodeName ); // => BODY：元素节点

// => DIV：元素节点
console.log( document.getElementById('div').nodeName ); 

// => style：属性节点
console.log( document.getElementById('div').attributes.style.nodeName );
2 nodeValue（节点值）

获取或设置节点的值

  • 各个节点的返回值
    说明：文档节点、元素节点此属性返回 null，并且为只读。
节点类型nodeType
节点类型nodeValue
文档节点(Document)只读，返回 null
元素节点(Element)只读，返回 null
属性节点(Attr)获取或设置属性的值
文本节点(Text)获取或设置文本的值
  • 示例：
<div style="width:200px;height:100px;border:1px solid black" id="div">
<span>文本1</span>
文本2
</div>
console.log( document.nodeValue ); // => null：文档节点

console.log( document.body.nodeValue ); // => null：元素节点

console.log( document.getElementById('div').nodeValue ); // => null：元素节点

// => width:200px;height:100px;border:1px solid black;：style属性的值
console.log( document.getElementById('div').attributes.style.nodeValue ); 

// 设置style属性的值
document.getElementById('div').attributes.style.nodeValue = ' width:200px;height:200px';
3 nodeType（节点类型）

返回节点类型，只读属性

  • 各个节点的返回值
节点类型nodeType
文档节点(Document)9
元素节点(Element)1
属性节点(Attr)2
文本节点(Text)3
  • 示例：
console.log( document.nodeType ); // => 9：文档节点
console.log( document.body.nodeType ); // => 1：元素节点
console.log( document.getElementById('div').nodeType ); // => 1：元素节点
console.log( document.getElementById('div').attributes.style.nodeType ); // => 2：属性节点

四 获取元素的方法

编号方法简述
1document.getElementById()获取指定 ID 的元素。
2document.getElementByTagName()获取指定标签的元素。
3document.getElementsByClassName()获取所有指定类名的元素。
4document. getElementsByTagName()通过标签名获取元素。
5document. querySelector()根据选择器获取一个元素。
6document. querySelectorAll()根据选择器获取全部元素。
1 getElementById()

获取指定 ID 的元素。

  • 参数：元素 ID。

  • 返回值：元素节点对象。若没有找到，返回 null。

示例：

document.getElementById()
//功能：通过id 获取元素
document : 文档对象
get : 得到
element:元素
by:通过
id:id值
// 参数 : 字符串类型的id
//返回值 : 一个元素 一个对象
var div = document.getElementById('div');
console.dir(div);

注意：

  • HTML 元素 ID 是区分大小写的。

  • 若没有找到指定 ID 的元素，返回 null。

  • 若一个父节点下面有多个相同 ID 元素时，默认选取第一个(而不是层级最高的)。

2 getElementByTagName()

获取指定标签的元素。

  • 参数：name 名称。

  • 返回值：符合条件的元伪素数组。若没有找到符合条件的，返回空数组。

示例：

var ps = document.getElementsByTagName('p');

注意：

  • getElementsByTagName()方法返回元素的顺序是它们在文档中的顺序。

  • 返回值有没有获取到元素，都是一个伪数组，即便元素只有一个。

  • 传递给getElementsByTagName()方法的字符串可以不区分大小写。

  • 如果把特殊字符串 “*” 传递给getElementsByTagName()方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。

3 getElementsByClassName()

获取所有指定类名的元素。

  • 参数：class 名称。

  • 返回值：符合条件的元素伪数组。若没有找到符合条件的，返回空数组。

示例：

// 返回一个class包含show的元素数组
var show = document.getElementsByClassName('show');

注意：

  • getElementsByClassName( )方法在几个重要的浏览器中支持的最低版本
4 getElementsByTagName()

通过标签名获取元素。

  • 参数：标签名称。如：div、a 等等

  • 返回值：符合条件的元素伪数组。若没有找到符合条件的，返回空数组。

示例：

document.getElementsByTagName('div'); // 返回一个标签为div的元素数组

注意：

  • 返回值有没有获取到元素，都是一个伪数组，即便元素只有一个
5 querySelector()

根据选择器获取一个元素。

  • 参数：选择器
  • 返回值：一个元素。

示例：

var li = document.querySelector(’.u1 li’);

6 querySelectorAll()

根据选择器获取全部元素。

  • 参数：选择器
  • 返回值：符合条件的元素伪数组。若没有找到符合条件的，返回空数组。

示例：

var lis = document.querySelectorAll('.u1 li');

五 节点的操作

1 节点查找/节点遍历

编号节点方法简述
1document.childNodes获取所有子节点（包括注释）
2document.children获取所有子元素
3document.parentElement获取已知节点的父元素
4document.parentNode获取已知节点的父节点
5document.firstElementChild第一个子元素
6document.firstChild第一个子节点
7document.lastElementChild最后一个子元素
8document.lastChild最后一个子节点
9document.nextElementSibling下一个兄弟元素
10document.nextSibling下一个兄弟节点
11document.previousElementSibling上一个兄弟元素
12document.previousSibling上一个兄弟节点
（1）找子节点/元素
// 找孩子
var ul = document.querySelector('ul');

//1. childNodes 获取所有的子节点
console.log(ul.childNodes);

//2. children 获取所有的子元素
onsole.log(ul.children);

//3. firstChild  第一个子节点
console.log(ul.firstChild);

//4. firstElementChild  第一个子元素
console.log(ul.firstElementChild);

//5. lastChild 最后一个子节点
console.log(ul.lastChild);

//6. lastElementChild 最后一个子元素
console.log(ul.lastElementChild);

//7. children[2]  任意一个
console.log(ul.children[2]);
（2）找兄弟节点/元素
// 找兄弟 sibling 兄弟姊妹
var elem = document.querySelector('.li');

//1. nextSibling  下一个兄弟节点
console.log(elem.nextSibling);

//2. nextElementSibling 下一个兄弟元素
console.log(elem.nextElementSibling);

//3. previousSibling 上一个兄弟节点
// previous 上一个
console.log(elem.previousSibling);

//4. previousElementSibling 上一个兄弟元素
console.log(elem.previousElementSibling);
（3）找父节点/元素
// 找父亲
//1. parentElement 父元素 ie9+
console.log( son.parentElement);

//2. parentNode   父节点  (下面的 ) ie6789+
console.log(son.parentNode);

2 节点的创建和插入

（1） createElement() 创建元素节点

创建一个元素节点（具体的一个元素）
结构 : var element = document.createElement(‘标签名’)；

（2） createTextNode() 创建文本节点

创建一个文本节点
结构 ：var element = document.createTextNode(“文本”);

（3）appendChild() 追加新子节点

在指定节点的最后一个子节点列表之后添加一个新的子节点，（向元素末尾插入一个元素）

  • 结构 : 父元素.appendChild(子元素)

示例：

<ul>
    <li class="l1">1</li>
    <li class="l2">2</li>
    <li class="l3">3</li>
</ul>
<hr>
<p>哈哈</p>

var ul = document.querySelector('ul');
var p = document.querySelector('p');
// 添加
ul.appendChild(p);//将p追加到ul里面的最后面

注意点：

  1. 如果要添加的子元素在网页中本来就存在, appendChild 就相当于一个剪切
  2. 会添加到所有子元素的最后面
  3. innerHTML会覆盖之前的内容 ，而appendChild不会
**碎片容器 ** createDocumentFragment

var elem=document. createDocumentFragment( )

  1. createDocumentFragment()`方法，是用来创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。

  2. DocumentFragment节点不属于文档树，继承的parentNode属性总是null。它有一个很实用的特点，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点，即插入的是括号里的节点。这个特性使得DocumentFragment成了占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。

  3. 如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原来的节点。

  • appendChild() 每次追加都会从新打开DOM树 在创建的数量过多时候，效率特别低下
  • createDocumentFragment（）会起到优化作用，存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流(reflow)(对元素位置和几何上的计算)
  • documentFragment 被所有主流浏览器支持
  • 最后通过appendChild（）添加
var ul = document.getElementById("ul");
var fragment = document.createDocumentFragment();
for (var i = 0; i < 20; i++) {
    var li = document.createElement("li");
    li.innerHTML = "index: " + i;
    fragment.appendChild(li);
}
ul.appendChild(fragment);

取自：https://blog.csdn.net/weixin_43606809/article/details/97916174?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159479952719195265904194%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=159479952719195265904194&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allfirst_rank_ecpm_v3~pc_rank_v3-1-97916174.pc_ecpm_v3_pc_rank_v3&utm_term=createDocumentFragment

（4）insertBefore() 之前插入新子节点

在已有的子节点前插入一个新的子节点。

  • 结构： 父级节点.insertBefore( 要插入的节点，指定节点 )

示例：

var ul = document.querySelector('ul');
var l1 = document.querySelector('.l1');
var l2 = document.querySelector('.l2');
var l3 = document.querySelector('.l3');
var p = document.querySelector('p');

ul.insertBefore(p,l3);//把p插入到l3之前
ul.insertBefore(p,null);//把p添加到最后
ul.insertBefore(p,ul.children[0]);//添加到子元素最前面  (不获取l1)
ul.insertBefore(p,l2.nextElementSibling)//添加到l2之后,不获取l3的情况下

3 节点的替换replaceChild ()

替换节点

  • 结构 : 父元素.replaceChild(newChild, oldChild)
  • 参数：
    newChild：必须。你要插入的节点对象。
    oldChild：必须。你要移除的节点对象。
//将div1替换div2
var replaceChild = document.body.replaceChild(div1,div2);

4 节点的删除removeChild()和remove()

  • 在页面中删掉事件还会存在
  • 需要在设置null之前，将事件也需要删除
（1）removeChild()

从子节点列表中删除某个节点。

  • 结构：父容器.removeChild(删除的子元素)
  • 返回值：返回被删除的节点，如失败，则返回 NULL。
  • 父容器删除子元素

示例：

// 方式1 :  父元素.removeChild(子元素)
father.removeChild(son);

// 方式2 :  子元素.parentNode.removeChild(子元素)
son.parentNode.removeChild(son);
（2）remove()

从子节点列表中删除某个节点。

  • 结构：需要删除的元素.remove();

示例：

需要删除的元素.remove();

elem.removeChild();
elem=null
removeEventListener(事件名)

5 节点的克隆cloneNode()

克隆节点 (复制 拷贝)

结构 :

  • 节点.cloneNode(isdeep)

  • 参数：isdeep(Boolean)

    true : 深拷贝，克隆节点及其属性，以及后代
    false : 浅拷贝(默认)，只克隆节点及其后代

  • 返回值：返回一个克隆之后的节点

  • 在克隆的标签有id时候必须修改，因为会将标签属性一起复制

示例：

  <div class="father">
    <div class="son">
      <div class="sun"></div>
    </div>
  </div>

var father = document.querySelector('.father');

// 浅拷贝:只拷贝自己的一层 (内容没有拷贝)
var newFather = father.cloneNode(false);

// 深拷贝:更深入一层的拷贝, 内容全部拷贝  (整体拷贝)
// 深拷贝最常用
var newFather1 = father.cloneNode(true);

// 默认值:默认是false（浅拷贝）
var newFather2 = father.cloneNode();

Ⅲ - 叁 -DOM 属性和DOM对象

  • 分为自定义属性和原Dom属性

  • 查看原有的对象属性，例如：console.dir(div);

  • Dom对象的原属性与Dom 对象标签属性，部分对应

  • 每个标签的属性都是不一样的 例如 input中有name,checked,placeholder其他属性都没有

  • 对象可以添加自定义属性 例如 div.aa=234 console.log(div.aa) 打印234

一 DOM 常见内置属性

编号DOM常用属性简介
1document. body获取 body
2document. documentElement获取 html
3document.head获取 head
4document.title获取 title
5document.styleSheets获取css样式对象
6document.URL获得完整的URL
7document.domain获取域名
console.log(document.body);//body标签
console.log(document.title);//title标签
console.log(document.head);//head标签
console.log(document.styleSheets);//css样式对象
console.log(document.URL);//当前地址
console.log(document.domain);//当前域

二 DOM操作节点的标签属性

编号DOM操作节点的属性简介
1getAttribute(属性)获取节点上的属性，获取标签的属性
2setAttribute(属性,值)给节点创建一个新属性，设置标签的属性
3removeAttribute(属性)删除节点上的属性

自定标签属性时

  1. 命名单词之间使用-连接，不适用使用下划线区分

  2. 标签属性值必须是字符串 ，都是小写

  3. 不区分大小写

var div=document.querySelector("div");

//获取标签属性  属性值都是字符串
div.getAttribute("name");

//自定标签属性时，1、命名单词之间使用-连接,2、标签属性值必须是字符串
div.setAttribute("toggle-data","30");

//删除标签属性
div.removeAttribute("toggle-data");

三 DOM对象的样式（HTML DOM Style 对象）

1 设置DOM对象的样式

所有的样式对象： https://www.w3school.com.cn/jsref/dom_obj_style.asp

行内样式通过dom.style…来获取和设置，不能获取CSS中的样式
需要注意，如果样式属性中有 ”-“ 连接符，需要将连接符省略，后面的第一个字母用大写。
例：

var div=document.getElementById("div");
//设置行内样式
div.style.backgorundColor="red";
// 获取行内样式，不能获取CSS样式
console.log(div.style.backgroundColor)
2 获取计算后的DOM样式

计算后样式，即CSS样式和行内样式合并计算后的样式，

  • 非IE所支持的获取非行间样式的方法：
    用法：getComputedStyle(对象，伪类).样式名
    例：getComputedStyle(oDiv,null).color
  • IE所支持的获取非行间样式的方法
    用法：对象.currentStyle.样式名
    例：oDiv.currentStyle.width
  • getComputedStyle () 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。
var div=document.getElementById("div");
//仅适用于IE浏览器
console.log(div.currentStyle.width)
//IE8以下不支持，谷歌火狐支持
console.log(getComputedStyle(div).width);

//可以合并写为
var style=getComputedStyle(div) || div.currentStyle;
3 利用Object.assign（） 设置样式

简介：

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。

复制对象浅复制，无引用关系

Object.assign(元素.style,{

	样式

})

取自 https://www.jianshu.com/p/d5f572dd3776

4 styleSheets 获取Css样式 style标签内

Document.styleSheets 只读属性，返回一个由 StyleSheet对象组成的 StyleSheetList，每个 StyleSheet对象都是一个文档中链接或嵌入的样式表。

*styleSheetList*.item(*index*) 或 *styleSheetList*[*index*] 根据它的索引（索引基于0）返回一个单独的样式表对象。

  <style>
    div {
      width: 400px;
      height: 500px;
      background: red;
      position: absolute;
      left: 300px;
      top: 200px
    }

    p {
      text-align: center;
      font-size: 16px;
    }
  </style> 
  
    <script>
    var divs = document.querySelector("div")
    console.log(document.styleSheets[0].cssRules)//获取style

  </script>

console.log(document.styleSheets[0].cssRules)打印结果 可以通过下标获取指定的style样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OUopHSWg-1595245005593)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200717212906191.png)]

四 DOM常用属性

1 DOM元素、HTML、body宽高

详见 ： https://blog.csdn.net/Charissa2017/article/details/103837572

编号对象简介
1DOM元素即通过DOM获取的元素例，如var elem=document.querySelector(“div”);
2HTML标签document.documentElement
3body标签document.body
对象名简介
clientWidth 、clientHeight客户宽高（自身到浏览器）
offsetWidth 、offsetHeight自身宽高
scrollWidth 、scrollHeight滚动内容的宽高
（1）DOM元素宽高

自身宽高

元素.offsetWidth水平方向 width + 左右padding + 左右border-width-(如果有滚动条会减掉)
元素.offsetHeight垂直方向 height + 上下padding + 上下border-width-(如果有滚动条会减掉)

客户宽高

元素.clientWidth水平方向 width + 左右padding-(如果有滚动条会减掉)
元素.clientHeight垂直方向 height + 上下padding -(如果有滚动条会减掉)

滚动内容的宽高

元素.scrollWidth元素内容真实的宽度，内容不超出盒子高度时为盒子的clientWidth
元素.scrollHeight元素内容真实的高度，内容不超出盒子高度时为盒子的clientHeight
（2）HTML标签宽高
document.documentElement.clientWidth、document.documentElement.clientHeight当前文档的可视宽高-(如果有滚动条，减去滚动条宽高)
document.documentElement.offsetWidth、document.documentElement.offsetHeight当前文档的内容宽高-(如果有滚动条，减去滚动条宽高)
document.documentElement.scrollWidth、document.documentElement.scrollHeight当前文档的可视宽高、如果有滚动条，就是实际body撑开的宽高
（3） body标签宽高
document.body.clientWidth、document.body.clientHeight实际body的宽度和高度-滚动条宽高
document.body.offsetWidth、document.body.offsetHeight实际body的宽度和高度-滚动条宽高
document.body.scrollWidth、document.body.scrollHeight实际body中内容的宽高
2 DOM位置
clientLeft clientTop客户位置
offsetLeft offsetTop自身偏移位置（自身到到父容器（定位））
scrollLeft scrollTop滚动条位置（可写）
（1） 元素标签位置
元素.clientLeft、元素.clientTop边线的宽高
元素.offsetLeft、元素.offsetTop当前元素到父容器左上角的距离（父容器是定位），它和position的left和top是相同的
元素.scrollLeft、元素.scrollTop当前元素的滚动条位置、（可写）
（2） body和HTML位置

body、html中clientLeft ,offsetLeft 不考虑、页面中的滚动是html的scrollTop和scrollLeft控制

HTML可以控制浏览器滚动条的位置 document.documentElement.scrollTop=200;

元素.offsetTop 获取当前元素到 定位父节点 的top方向的距离 元素.offsetLeft 获取当前元素到 定位父节点 的left方向的距离

3 getBoundingClientRect()

用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

语法:
  <style>
    div {
      width: 70px;
      height: 80px;
      background: blueviolet;
      position: absolute;
      left: 40px;
      top: 50px;
    }
  </style>


var div=document.querySelector(".div");

div.getBoundingClientRect();//获取div 相对于视窗的位置集合

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w2L9XpHi-1595245005599)(C:\Users\幻影旅团\AppData\Roaming\Typora\typora-user-images\image-20200720193556157.png)]

0 - 0 - 知识点：

1 设置CSS样式不可用
document.styleSheets[0].disabled=true;
2 trim（）去掉字符串的前后空格
3 元素.textContent=内容：给元素添加内容，不能设置HTML
4 元素.className 设置元素类名
自律自强的鱼
关注
专栏目录
JavaScript高级程序设计 第十四章---DOM 文档对象模型
weixin_40794404的博客
09-03 1177
第十四章 本章内容 理解文档对象模型（DOM）的构成 节点类型 浏览器兼容性 MutationObserver 接口 文档对象模型（DOM，Document Object Model）是HTML 和XML 文档的编程接口。DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早期的动态HTML（DHTML，Dynamic HTML），DOM 现在是真正跨平台、语言无关的表示和操作网页的方式。 14.1 节点层级 任何HTML 或XML 文档都可以用DOM表示
JS-dom文档对象模型介绍及常用引用类型
Those who achieve great thing do not stick to trifles
01-26 320
JS-dom文档对象模型介绍 1、文档对象模型 当浏览器接受到html代码的时候，浏览器会将所有的代码装载到内存中，形成一颗树（document树）。 这棵树又包含了很多节点（Node）如： 文档节点 document ...
要在 JavaScript 中改变 DOM 元素的样式
weixin_42612405的博客
01-06 263
可以使用 JavaScript 的 style 属性来改变 DOM 元素的样式。例如： document.getElementById("myDiv").style.color = "red"; document.getElementById("myDiv").style.fontSize = "20px";
jQuery核心--对象访问
前端
03-12 937
列表 函数 说明 size()1.8- 用于返回当前jQuery对象封装的元素个数。 get() 用于获取当前jQuery对象匹配到的DOM元素。 index() 用于获取当前jQuery对象中指定DOM元素的索引值。 each() 用于以当前jQuery对象匹配到的每个元素作为上下文来遍历执行指定的函数。 属性 ...
HTMLDivElement 和 Object 相互转换
l4642247的专栏
09-10 9382
var obj = document.createElement("div"); //html转换为jquery var objJquery = $(obj); //jquery转换成html var objJquery = objJquery[0]; 要是元素是HTMLDivElement的，append的操作的话，只能追加字符串。转换过来才能追加元素。...
Cannot read property 'style' of undefined at HTMLLIElement.lis.(anonymous function).onclick
helloFE的博客
01-24 6820
想做一个点击隐藏li标签的简单案例，但是报错Cannot read property 'style' of undefined     at HTMLLIElement.lis.(anonymous function).onclick  一般这种错误都是因为‘style’前面的元素找不到，可以打印一下，发现是undefined，只要将lis[i]替换为this就可以了，this指当前元素
javascript-manipulation-of-the-dom-document-object-Model:Dom文档对象模型课程的Java语言操作
03-30
JavaScript DOM（Document Object Model）文档对象模型是Web开发中的核心概念，它允许开发者通过JavaScript来操纵HTML或XML文档的结构、内容和样式。本课程主要关注JavaScript如何与DOM交互，特别是使用Java语言进行...
第三章：javascript-DOM对象模型-补充课件.ppt
最新发布
03-31
JavaScript DOM对象模型是Web开发中不可或缺的一部分，它允许开发者通过编程方式操纵网页的结构、内容和样式。在JavaScript中，DOM被用作一种接口，使我们能够读取、修改、添加或删除HTML、XML文档的各个部分。DOM将...
JS详解[Object HTMLDivElement]和[Object Object]
weixin_34037173的博客
11-16 1万+
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 <!DOCTYPEhtmlPUBL...
关于原生js里报这个错：Cannot read properties of undefined (reading ‘classList‘) at HTMLLIElement.
qq_59281339的博客
09-09 7994
关于原生js里报这个错：Cannot read properties of undefined (reading 'classList') at HTMLLIElement.
hashcode是什么意思_为什么重写 equals() 方法，一定要重写 hashCode() 呢？| HashMap
weixin_39621044的博客
11-24 111
首先我们有一个假设：任何两个 object 的 hashCode 都是不同的。 那么在这个条件下，有两个 object 是相等的，那如果不重写 hashCode()，算出来的哈希值都不一样，就会去到不同的 buckets 了，就迷失在茫茫人海中了，再也无法相认，就和 equals() 条件矛盾了，证毕。 撒花～～ 接下来我们再对这两个方法一探究竟： 其实 hashCode() 和 equ...
html的“object HTMLDivElement”与jquery“object Object”相互之间的转换方式
干勾鱼的CSDN博客
10-20 9215
转载请注明出处：http://blog.csdn.net/dongdong9223/article/details/52875537 本文出自【我是干勾鱼的博客】 当需要将html的“object HTMLDivElement”与jquery“object Object”相互之间进行转换时，可以如下进行：var obj = document.createElement("div"); //h
关于BUI列表Item onclick方法事件报错Uncaught ReferenceError: XXX is not defined     at HTMLLIElement.onclick
sinat_33248260的博客
12-05 5369
报错如下： 代码： 出错原因： 模块里面的定义是个闭包, 外部访问不到, 解决方式：把方法挂载在window变量上, 或者定义成全局的, 在index.js 定义（这种试过了也报方法undefined问题，如果你试过，请告诉我(*￣︶￣)） 本文只介绍把方法挂载window变量上，代码如下： 提示：在jq中写onclick方法传递的参数要加单引号...
html的“object HTMLDivElement”与jquery“object Object”相互转换
兔子 兔子 你掉毛么
12-25 6607
今天写代码时遇到一个问题需要将html的“object HTMLDivElement”转换为jquery的“object Object” 实现代码如下： //获取元素 var b = document.getElementById("XX"); //类型转换 var obj = $(b); 如果要将jquery的“object Object”转换成html的“object HTMLDivEle
html页面调用js文件里的函数报错onclick is not defined处理方法
热门推荐
一生为追梦的博客
11-11 8万+
今天处理html标签里的onclick功能的时候总是报错：Uncaught ReferenceError: dosave is not defined(…) 找了半天都没发现错在哪，最后发现原来是我写法不对，正确写法如下： html： <input type="button" value="立即登录" onclick="dosave();"/> js： ...
python一切皆对象的理解_如何理解python中一切皆对象呢？看type，object，class的关系...
weixin_39621060的博客
11-21 246
在Python的学习中我们肯定会听到一句话：「python中一切皆对象」。如果再接着学习下去的话，我们就会接触到Python中的type, object, class等概念。网上也有不少文章阐述了这三者之间的关系，但是在看了大部分文章之后我还是似懂非懂，感觉就像有什么东西卡在了喉咙一直咽下不去一样。于是为了能让自己晚上顺利吃上饭，我立马对着搜索引擎就是一顿操作，终于赶在外卖小哥打响我电话之前，咽下...
JavaScript HTML DOM节点类型之Node类型介绍
tasty
01-11 4107
JavaScript中所有HTML DOM节点类型都继承自Node类型，因此所有类型的节点都有一些相同的属性和方法。Node接口是DOM1级中定义的一个接口，在JavaScript中Node接口被实现为Node类型。 返回节点类型：nodeType返回节点名：nodeName返回或设置节点值：nodeValue节点间的关系节点操作 1. 返回节点类型nodeType no
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值