javascrpipt 的dom操作方法有哪些

2024-10-22

javascript DOM 操作

在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Model(文本对象模型). D : 文档(html或xml文档) O : 对象(文档对象) M : 模型 1.2.DOM结构 DOM将文档以家谱树的形式来表现. 下面是一个简单的html文档,我们可以看出该文档的DOM结构如下 <!DOCTYPE html> <html> <head&

解密jQuery内核 DOM操作方法（二）html,text,val

回顾下几组DOM插入有关的方法 innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式看图对照区别 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 innerText 和outerText 在读取得时候是一样的,只是在设置的时候outerText 会连带标签一起替换成目标文本 firefox不支持innerText ,但是可以用textCo

javascript原生dom操作方法

一.节点层次属性考虑空白符的相关层次关系属性: 1.childNodes属性包含 2.parentNode属性 3.previouseSibling属性和nextSibling属性 4.firstChild属性和lastChild属性不考虑空白符的相关层次关系属性: 1.children属性 2.childElementCount 3.firstElementChild 4.lastElementChild 5.previousElementSibling 6.nextElementSib

混淆篇之原生DOM操作方法小结

1.0 DOM结构 1.1先来看结构图: 父节点兄弟节点当前节点属性节点子节点兄弟节点一般任意一个节点我们都会从父节点,子节点,以及兄弟节点的角度去考察.节点一般我们只需关注元素节点,属性节点及文本节点即可. 1.2 节点的相关属性(只读的) 1.2.1 nodeType 属性规定节点的 nodeType = 1 元素节点记住 nodeType = 2

原生JavaScript的DOM操作方法总结

什么是DOM? DOM即文档对象模型,Document Object Model. 是HTML和XML文档的编程接口.它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容.DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合.简言之,它会将web页面和脚本或程序语言连接起来. 实际上,DOM就是浏览器为JavaScript提供的一系列的接口(由window.document提供),通过这些接口,我们可以操作web页面

JavaScript常用DOM操作方法和函数

查找节点ocument.querySelector(selectors) //接受一个CSS选择器作为参数,返回第一个匹配该选择器的元素节点.document.querySelectorAll(selectors) //接受一个CSS选择器作为参数,返回所有匹配该选择器的元素节点.document.getElementsByTagName(tagName) //返回所有指定HTML标签的元素document.getElementsByClassName(className) //返回包括了所有c

原生DOM操作方法小结

1.0 DOM结构父节点兄弟节点当前节点属性节点子节点兄弟节点一般任意一个节点我们都会从父节点,子节点,以及兄弟节点的角度去考察.节点一般我们只需关注元素节点,属性节点及文本节点即可. 1.2 节点的相关属性(只读的) 1.2.1 nodeType 属性规定节点的 nodeType = 1 元素节点记住 nodeType = 2 属性节点记住 nodeType = 3 文本节点记住 nodeType = 8 注释节点 nodeType = 9 文档 nodeType =

mui事件绑定和可以用的js dom操作方法

DOM操作方法的简单归纳

(1)要在每个匹配的元素中插入新元素,使用: .append() .appendTo() .prepend() .prependTo() (2)要在每个匹配的元素相邻的位置上插入新元素,使用: .after() .insertAfter() .before() .insertBefore() (3)要在每个匹配的元素外部插入新元素,使用: .wrap() (4)要用新元素或文本替换每个匹配的元素,使用: .html() .text() (5)要移除每个匹配中的元素,使用: .empty()

基本的dom操作方法

childNodes 返回当前元素所有子元素的数组firstChild 返回当前元素的第一个下级子元素lastChild 返回当前元素的最后一个子元素nextSibling 返回紧跟在当前元素后面的元素nodeValue 指定表示元素值的读/写属性parentNode 返回元素的父节点previousSibling 返回紧邻当前元素之前的元素 getElementById(id) (document) 获取有指定惟一ID属性值文档中的元素getElementsByTagName_r(name)

JavaScript中 DOM操作方法

DM是(Document Object Model)的简称. 一.找元素 document.getElementById() 根据id选择器找,最多找一个: document.getElementsByName() 根据name找,找出的是数组: document.getElementsByclassName() 根据类选择器找,找出的也是数组: document.getElementsByTagName() 根据标签名找,找出的是数组: 二.获取内容非表单元素:alert(a

DOM操作方法、属性

话不多说直接上demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="container" id="box"><span>我是

Extjs DOM操作的几个类

Extjs提供了非常完善的DOM操作方法,可以方便的操作DOM.另外Extjs还可以方便的查询DOM元素,并把这些DOM元素封装成Ext.Element对象,通过Element对象我们可以操作DOM元素.下面来看一下Extjs操作DOM的几个类: Ext.Element .Ext.DomHelper.Ext.DomQuery三个支柱性库. Extjs目前的最新版本是Extjs5,起飞网提供了最新的extjs5教程,欢迎访问. Ext.Element Ext.Element.get()快捷方式Ex

jQuery原生框架-----------------dom操作

// 扩展DOM操作方法jQuery.fn.extend({ // 设置或者获取元素的内容 html: function( html ) { /* * 实现思路: * 1.不传参,返回第一个元素的内容 * 2.传参 * 2.1.参数类型为null,遍历所有元素,依次清除它们的内容 * 2.2.参数类型为字符串,遍历所有元素,依次重置它们的内容 * 3.链式编程返回this * */ // 不传参,返回第一个元素的内容 if( arguments.length === 0 ) { return t

基础DOM和CSS操作(一)

DOM简介 DOM是一种文档对象模型,方便开发者对HTML结构元素内容进行展示和修改.在JavaScript中,DOM不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性.扩展性.在jQuery中,已经将最常用的DOM操作方法进行了有效封装,并且不需要考虑浏览器的兼容性. D表示的是页面文档Document.O表示对象,即一组含有独立特性的数据集合.M表示模型,即页面上的元素节点和文本节点. DOM有三种形式,标准DOM.HTML DOM.CSS DOM(难道不是XML DOM吗?),大部

jQuery2.x源码解析(DOM操作篇)

jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) jQuery这个类库最为核心重要的功能就是DOM操作了.DOM是由w3c制定的为HTML和XML文档编写的应用程序接口,全称叫做W3C DOM,它使得开发者能够修改html和xml的内容和展现方式,将网页与脚本或编程语言连接起来. 但是标准在各个浏览器中的实现是不一样的,同时DOM发展也是循序渐进的,不断地增加新的api,因此各个浏览器乃至各个版

Jquery5 基础 DOM 和 CSS 操作

学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 5.CSS 方法 DOM 是一种文档对象模型.方便开发者对HTML 结构元素内容进行展示和修改.在 JavaScript 中,DOM 不但内容庞大繁杂,而且开发的过程中需要考虑更多的兼容性.扩展性.在 jQuery 中,已经将最常用的 DOM 操作方法进行了有效封装,并且不需要考虑浏览器的兼容性. 一．DOM 简介由于课程是基于 JavaScript 基础上完成的,这里不去详细的了解 DOM 到底是什么.只需

对DOM操作的一些总结

一.DOM节点分为三大类: 1.元素节点 :<html>.<body>.<p>等标签 2.文本节点 :标签内的文本.例如<p>这就是文本节点</p>,里面的“这就是文本节点”这段文字就是一个文本节点. 注:Chrome.opera等浏览器中,把节点与节点之中的空白符(即空格)也视为文本节点.如下面代码中ul标签有5个子节点,两个li元素,三个空白符 <ul>  <li></li>

【extjs6学习笔记】1.12 初始： Working with DOM

http://www.extjs-tutorial.com/extjs/working-with-dom Ext JS是一个DHTML库. 它通过使用JavaScript创建或操作DOM元素来创建UI. 您可能知道,并不是所有浏览器都使用相同的JavaScript DOM操作方法对DOM元素执行相同的操作. 与DOM创建和操纵有关的跨浏览器问题. 为了解决跨浏览器问题,Ext JS包含以下类来创建或操作DOM元素. Class Description Ext.dom.Element Ext JS

JS原生DOM操作总结

DOM的主要操作——增.删.改.查节点 (1) 查找节点 document.getElementById('div1') document.getElementsByName('uname') document.getElementsByTagName('span') document.getElementsByClassName('alert') document.querySelector('#div1') document.querySelectorAll('.alert'); (2) 操

总结js常用的dom操作（js的dom操作API）

转载:https://www.haorooms.com/post/js_dom_api 前言很多同学用惯了jquery操作dom,让他们用js操作的时候,常常力不从心,本文总结了常用的js的dom操作方法,供大家翻阅!其实说起js操作dom,我很久很久之前有篇文章,jquery属性的相关js实现方法,里面囊括了很大一部分js操作dom的常用方法,但是不是很系统.不能说是API,今天来系统总结一下! 节点查找API document.getElementById :根据ID查找元素,大小写敏感,

javascrpipt 的dom操作方法有哪些

热门专题