学习总结--Dom
节点(每个元素都会有的3个nodeValue nodeType nodeName;)
1 元素节点 nodeName 元素节点名 nodeType 1 nodeValue null或者undefined
2属性节点 nodeName 属性节点名 nodeType 2 nodeValue 属性节点的值
3 文本节点 nodeName #text nodeType 3 nodeValue 文本值
2 创建元素节点 document.createElement('li')
3创建文本节点document.createTextNode("123");
4 属性节点 通过元素节点.属性名去创建或者 node.setAttribute(name,value);获取节点的属性值 node.getAttribute(name);移除节点的属性值 node.removeAttribute(name);
5追加节点 node.appendChild(newchild);
6 删除节点 node.parentNode.removeChild(node);
7 克隆节点 node.cloneNode(true);
8 替换节点node.replaceChild(nwchild, oldchild); 除了具有替换节点的功能,还具有移动节点的功能;可以自定义函数replaceEach(achild,bchild) 两个节点彼此替换位置;
9父节点 paraentNode 子节点 firstElementChild firstChild lastElementChild lastChild 下一兄弟节点nextSibling nextElementSibling 前一兄弟节点previousSibling previousElementSibling;
10节点的获取
document.getElementById('');
document.getElementsByTagName('');
document.getElementsByClassName('')
document.getElementsByName('');
学习总结--Dom的更多相关文章
- html学习笔记-DOM
html学习笔记-DOM Table of Contents 1. 什么是 DOM? 2. DOM 节点 3. DOM 方法 4. DOM 属性 5. DOM 访问 6. DOM 修改 7. DOM ...
- 学习总结——DOM
DOM(Document Object Model),即文档对象模型.DOM是针对HTML和XML文档的一个API,它描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.在定义方面, ...
- 原生js学习 选择dom
连bootstrap5 都抛弃jquery了,重新使用原生js来写,所以最近在学习原生js. 一.选择dom元素: id let sure=document.getElementById('sure' ...
- js学习笔记--dom部分(一)
js 学习整理之Dom部分 前面我总结了我最近学习js基础部分,当时提到过js分了三大部分,第一部分ECMA基础也就是第一次写的基础部分, 第二部分也就是DOM部分,也就是这里要写的内容的,然后第三部 ...
- javascript基础学习系列-DOM盒子模型常用属性
最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下: client系列 clientWidth :width+(padding-left)+(padding-right)— ...
- javascript基础学习--HTML DOM
写在前面的话:由于学校没有开过javascript这门课,所以平时用javascript时都是用到什么就去搜什么样的代码,但是在工作中有时候搜来的代码总是有那么点小问题,而当自己想去修改时,却又无从下 ...
- Vue.js_础学习之DOM操作
demo说明: 1.{{message}} --“Mustache” 语法(双大括号) 2.v-bind:属性名 ...
- 轻松学习JavaScript十八:DOM编程学习之DOM简单介绍
一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分 ...
- 学习WEBAPI(DOM)第二天
目录 第二天学习目标: 一.阻止超链接的默认跳转行为 二.鼠标进入事件和鼠标离开事件 三.根据name属性值获取元素==>表单标签,返回的是伪数组 四.根据类样式的名字来获取元素,返回的是伪数组 ...
- Javascript学习,DOM对象,方法的使用
JavaScript: ECMAScript: BOM: DOM: 事件 DOM的简单学习 功能:控制html文档内容 代码:获取页面标签(元素)对象和Element document.getElem ...
随机推荐
- 紫书 习题8-7 UVa 11925(构造法, 不需逆向)
这道题的意思紫书上是错误的-- 难怪一开始我非常奇怪为什么第二个样例输出的是2, 按照紫书上的意思应该是22 然后就不管了,先写, 然后就WA了. 然后看了https://blog.csdn.net/ ...
- hdoj 1719 Friend
Friend Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
- Java排序之直接选择排序
public class SelectSort { public static void selectSort(int [] a){ int min; int temp; if(a==null || ...
- RISC设计原则及基本技术
CISC的特点: 指令系统庞大,指令功能复杂,指令寻址方式多,指令格式多 绝大多数指令须要多个机器周期完毕 各种指令都能够訪问存储器 採用微程序控制 有专用寄存器,少量 难以用优化编译技术生成高效的目 ...
- 由老同事学习SAP所想到的
前段时间一位老同事在微信上跟我说他们公司正计划导SAP系统,但整个IT中心几乎无人使用过SAP,知道我在这行业干了多年了,所以想问我怎么开始学习.于是我约他今天出来聊聊,顺便把手里的SAP ECC E ...
- [BZOJ3884] 上帝与集合的正确用法 (欧拉函数)
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=3884 题目大意: 给出 M, 求 $2^{2^{2^{2^{...}}}}$ % M ...
- JavaScript中函数作为另一个函数的参数的时候它存在于哪个作用域
一直对函数作为参数被传递进另外一个函数理解的不是很清除.先看下这段代码吧: function test(fn){ var bar = 1; fn(); } var bar = 99; test(fun ...
- PostgreSQL Replication之第四章 设置异步复制(8)
4.8 处理时间线 时间线是一个您必须要知道的一个重要的概念,尤其是当您规划一个大型的设置的时候. 那么,什么是时间线呢?事实上,它是XLOG的一个分支.正常情况下,刚设置的一个数据库实例使用的时间线 ...
- Xor Sum 2(位运算)
D - Xor Sum 2 Time limit : 2sec / Memory limit : 1024MB Score : 500 points Problem Statement There i ...
- UI Framework-1: Ash Color Chooser
Ash Color Chooser Overview This document describes how to achieve <input type=”color”> UI in C ...