节点(每个元素都会有的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的更多相关文章

  1. html学习笔记-DOM

    html学习笔记-DOM Table of Contents 1. 什么是 DOM? 2. DOM 节点 3. DOM 方法 4. DOM 属性 5. DOM 访问 6. DOM 修改 7. DOM ...

  2. 学习总结——DOM

    DOM(Document Object Model),即文档对象模型.DOM是针对HTML和XML文档的一个API,它描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.在定义方面, ...

  3. 原生js学习 选择dom

    连bootstrap5 都抛弃jquery了,重新使用原生js来写,所以最近在学习原生js. 一.选择dom元素: id let sure=document.getElementById('sure' ...

  4. js学习笔记--dom部分(一)

    js 学习整理之Dom部分 前面我总结了我最近学习js基础部分,当时提到过js分了三大部分,第一部分ECMA基础也就是第一次写的基础部分, 第二部分也就是DOM部分,也就是这里要写的内容的,然后第三部 ...

  5. javascript基础学习系列-DOM盒子模型常用属性

    最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下: client系列 clientWidth :width+(padding-left)+(padding-right)— ...

  6. javascript基础学习--HTML DOM

    写在前面的话:由于学校没有开过javascript这门课,所以平时用javascript时都是用到什么就去搜什么样的代码,但是在工作中有时候搜来的代码总是有那么点小问题,而当自己想去修改时,却又无从下 ...

  7. Vue.js_础学习之DOM操作

    demo说明: 1.{{message}}                           --“Mustache” 语法(双大括号) 2.v-bind:属性名                   ...

  8. 轻松学习JavaScript十八:DOM编程学习之DOM简单介绍

    一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分 ...

  9. 学习WEBAPI(DOM)第二天

    目录 第二天学习目标: 一.阻止超链接的默认跳转行为 二.鼠标进入事件和鼠标离开事件 三.根据name属性值获取元素==>表单标签,返回的是伪数组 四.根据类样式的名字来获取元素,返回的是伪数组 ...

  10. Javascript学习,DOM对象,方法的使用

    JavaScript: ECMAScript: BOM: DOM: 事件 DOM的简单学习 功能:控制html文档内容 代码:获取页面标签(元素)对象和Element document.getElem ...

随机推荐

  1. 怎么给Unity写一个原生的插件

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/50266889 作者:car ...

  2. 【转】C#添加修改删除文件文件夹大全

    [转]C#添加修改删除文件文件夹大全 C#添加修改删除文件文件夹大全 StreamWriter sw = File.AppendText(Server.MapPath(".")+& ...

  3. Android ADB工具-截图和录制视频(五)

    Android ADB工具-截图和录制视频(五) 标签(空格分隔): Android ADB 7. 截图和录制视 命令 功能 adb shell screencap –p <path/file& ...

  4. leetcode笔记:Merge Sorted Array

    一.题目描写叙述 二.解题技巧 这道题不存在复杂的分析过程和边界条件.假设单纯得考虑从小到大地将两个数组进行合并的话.每次在num1中插入一个数的话,须要将后面的元素都向后移动一位.这样.整个处理过程 ...

  5. RabbitMQ inequivalent arg 'durable' for exchange 'csExchange' in vhost '/': received

    错误:inequivalent arg 'durable' for exchange 'csExchange' in vhost '/': received 使用不同的MQ客户端时,常常会出现以上错误 ...

  6. 计算机系统之汇编---IA32处理器数据格式及数据操作

    计算机系统之汇编---IA32处理器数据格式及数据操作 IA32数据格式: Intel用术语"字"表示16位数据类型,因此.称32位数为"双字",称64位数为& ...

  7. _00020 妳那伊抹微笑_谁的异常最诡异第一期之 SqlServer RSA premaster secret error

    博文作者:妳那伊抹微笑 博客地址:http://blog.csdn.net/u012185296 博文标题:_00020 妳那伊抹微笑_谁的异常最诡异第一期之 SqlServer RSA premas ...

  8. HP-lefthand底层结构具体解释及存储灾难数据恢复

    HP-lefthand底层结构具体解释及存储灾难数据恢复 一.HP-lefthand的特点 HP-lefhand是一款很不错的SAN存储,使用iscsi协议为client分配空间. 它支持RAID5. ...

  9. nj09---util、inherits、inspect、events、error

    一.util全局变量 1.util.inherits(constructor,superConstructor) 此方法是一个实现对象间原型继承的函数.javaScript通过原型赋值来实现继承,细节 ...

  10. Numpy科学计算工具

    Numpy初探 Numpy基础数据结构 Numpy数组是一个多维数组,称为ndarray.其由两部分组成: 实际的数据 描述这些数据的原数据 导入该库: import numpy as np 多维数组 ...