DOM查找与操作（document)_js

一、DOM操作

DOM就是document操作，就是找到对应需要操作的html标签

二、查找获取标签

1、直接查找

document.getElementById 根据标签id属性查找

document.getElementsByName 根据标签的name属性进行查找

document.getElementsByClassName 根据class属性进行查找

document.getElementsByTagName 根据标签名进行查找

2、间接查找

parentElement 父节点标签

chlidren：所有子标签

firstElementChild 第一个字标签

lastElementChild 最后一个子标签

nextElementSibling 下一个兄弟标签

previousElementSibling 上一个兄弟标签

三、操作标签

1、文本操作

tag.innerText 操作文本内容

tag.innerHtml 操作内部所有内容

tag.value 操作标签的value值

2、样式操作

tag.className="" 直接对整体进行操作

tag.classList 对class的列表操作

　　tag.classList.add(‘样式名‘) 添加样式

　　tag.classList.remove(‘样式名‘) 删除样式

3、style操作

tag.style.fontSize=‘16px‘ 直接对style属性操作

4、属性操作

tag.setAttribute(‘属性名‘,‘属性值‘) 添加属性

tag.getAttribute(‘属性名‘) 获取属性

tag.removeAttribute(‘属性名‘) 删除属性

tag.attributes 获取所有属性

原文地址：https://www.cnblogs.com/chenxiaozan/p/12683438.html

时间： 2024-10-24 10:09:00

DOM查找与操作（document)_js的相关文章

DOM之节点操作

DOM提供了很多实用的API,这些API让我们可以轻松的访问HTML文档.所谓API(应用程序接口),简单来说,就是让我们可以直接使用它访问程序的一些属性或方法,而不用了解程序内部的运作过程和原理. 前面我们已经了解了DOM把HTML文档解析为节点树,实际上HTML节点树只是整个DOM树的一个分支,另一个分支则是XML.在详细介绍HTML DOM节点的操作之前,先来看一下完整的DOM树: 网上没找到关于完整的DOM树的图,所以自己大致做了一个.准确说这个应该叫DOM继承树,因为很多我们常用的DO

基础DOM和CSS操作

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

ExtJs4学习（二）：Dom文档操作

现在主流的JS框架要数ExtJs和JQuery应用的比较广泛.JQuery属于轻量级的,一般做网站应用比较常见,可见块头小的优势.ExtJs比较庞大,它除了对基本的JS语法和HTML DOM操作方式的封装之外,还提供了一套强大的UI库.在企业级B/S解决方案应用上独占优势.就单说它在原生JS的封装,DOM操作方式封装方面也足以藐视JQuery.下面我就通过对比API,体现两种框架的异曲同工之处.我们已JQuery API为主线,来看看ExtJs是否有替代的方案. 注意一点:ExtJs4.0相对上

dom节点的操作

dom节点的操作 -- jQuery 内部插入 1.(结尾)append 方法 . appendto方法(为了方便链式操作) (开头)prepend方法 $('#div1').append($('#div2')); //将div2 插入到 div1 里面的末尾 ? $('#div1').appendto($('#div2')); //将div1 插入到 div2 里面的末尾 ? $('#div1').prepend($('#div2')); //将div2 插入到 div

关于DOM的一些操作整理积累

var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个兄弟节点 var ps=s.previousSbiling; //得到s的上一个兄弟节点 var fc=s.firstChild; //获得s的第一个子节点 var lc=s.lastChile; //获得s的最后一个子节点 JS获取节点父级,子级元素先说一下JS的获取方法,其

JQuery DOM 的常用操作

一.JQuery对象的基本方法: (1) get(); 取得所有匹配的元素(2) get(index); 取得其中一个匹配的元素 $(this).get(0) 等同于 $(this)[0](3) Number index(jqueryObj); 搜索子对象(4) each(callback); 类似foreach,不过遍历的是元素数组如: $("img".each(function(index){ this.src = "test" + index + &q

基础DOM和CSS操作(三)

CSS方法 jQuery不但提供了CSS的核心操作方法,比如.css()..addClass()等.还封装了一些特殊功能的CSS操作方法,我们分别来了解一下. width()方法方法名描述 width() 获取某个元素的长度 width(value) 设置某个元素的长度 width(function(index,width) {}) 通过匿名函数设置某个元素的长度 html代码(部分)如下: <div style="background: #eee; width: 800px;&quo

DOM 手势和操作 (HTML)

通过基本文档对象模型 (DOM) 手势事件处理,你可以自定义使用 Windows 触摸语言(如滑动.旋转和调整大小)描述的某些基本手势的用户体验. 针对 Windows 8.1 进行的更新: Windows 8.1 针对指针输入 API 引入了多个更新和改善措施.请参阅 Windows 8.1 的 API 更改获取详细信息. 如果你不熟悉使用 JavaScript 开发应用: 阅读这些主题来熟悉此处讨论的技术. 采用 JavaScript 创建你的第一个应用采用 JavaScript 的应

10-JavaScript之DOM的事件操作

JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 2.事件 JS是以事件驱动为核心的一门语言 2.1事件的三要素事件的三要素:事件源.事件.事件驱动程序. 比如,我用手去按开关,灯亮了.这件