L7-DOM基础

今天学习了DOM,它是JavaScript组成(ECMAScript 、DOM、 BOM)部分之一。

DOM是什么?

DOM:文档对象模型(Document Object Model,简称DOM)。具有操作HTML页面的能力。

DOM节点

  childNodes   nodeType

childNodes获取到的节点包含:文本节点和元素节点。其中获取到的文本节点和元素节点的混合体,而其中文本节点是没有添加删除属性等的操作,如果我们要对元素节点进行属性操作,必须要通过另外一个属性nodeType配合使用。(扩展:nodeType==3是文本节点,nodeType==1是元素节点,我们就可以对其进行if判断,来对我们的元素节点进行操作)。

children

有没有直接获取元素节点的方法呢?其实是有的,接下来就是我们要介绍的children,它就是只获取元素节点的一个方法。

parentNode

parentNode是获取元素节点的父节点。

例子:点击链接,隐藏整个li

<ul id = "ul1">

<li>aaa<a href = "javascript:;">隐藏</a></li>

<li>bbb<a href = "javascript:;">隐藏</a></li>

<li>ccc<a href = "javascript:;">隐藏</a></li>

</ul>

var oUl = document.getElementById("ul1");

var aLi  = oUl.getElementsByTagName("a");

for(var i = 0; i < aLi.length; i++){

aLi[i].onclick = function(){

aLi[i].parentNode.style.display = "none";

}

}

offsetParent

绝对定位的元素是根据谁定位的?绝对定位的元素是根据他定位的父级元素定位,如果它的直接父级没有定位,那么它会往上找,直到找到,那么就是他的父级元素。我们可以同offsetParent来快速查找出他的父级定位元素。

获取首尾节点

firstChild       lastChild           //使用在IE6-8版本的

firstElementChild      lastElementChild      // FF Chrome IE9

获取兄弟节点

nextSibling      previousSibling    //使用在IE6-8版本的

nextElementSibling  perviousElementSibling    // FF Chrome IE9

操作元素属性的方法

  第一种:obj.style.display = ‘block‘

  第二种:obj.style[‘display‘] = ‘block‘

  第三种:DOM方式

DOM操作元素节点

  获取:getAttribute(名称)

  设置:setAttribute(名称,值)

  删除:removAttribute(名称)

时间: 2024-08-06 16:06:15

L7-DOM基础的相关文章

【JS学习笔记】DOM基础-字节点,父节点

一.DOM基础 (1)什么是DOM?DOM,即document,是用来操作页面上的元素,比如操作div获取,修改样式等.是JS的组成部分,还是一套规范. (2)浏览器的支持情况 现在主流的浏览器有3种,分别是IE,Chrome,Firefox. IE:在IE6-8版本中,对DOM的支持差不多是百分之十几差不多了,但是到了IE9就有了质的飞跃. Chrome:介于两者之间,在60%左右,对DOM支持的不是那么的好也不是那么的差. Firefox:对于DOM的支持几乎可以用99%来形容. 二.DOM

ajax——dom基础

javascript中dom实现可以使我们在ajax中通过javascript代码对html和xml数据进行dom方式操作,从而做到页面的动态修改更新和数据的提取处理. dom概念 dom文档对象模型,允许程序和脚本动态访问和更新文档的内容,结构和风格. dom对象树 在浏览器中一个页面对应一个html文档,因此有一个与之对应的html的dom树. 例如: 在浏览器中一个页面可能处理多个xml文档,因此可能有多个xml的dom树. dom对象树中常用的节点 在dom树中,文档内容中对应了很多不同

DOM基础(二)

在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE老版本,也是IE8之前的版本,包括IE8是不支持textContent的,只支持innerText.那要如何解决这个问题呢,我们总不能规定用户兼容我们写的代码的浏览器吧.毕竟顾客是上帝这句话是不变的真理,同样的,对于互联网来说,用户就是上帝.其实做为一个前端开发者来说,痛恨的不是顾客为什么不用好的浏

获取元素节点(DOM基础 )

一.DOM 简介:以一种独立于平台和语言的方式访问和修改(添加.移动.改变或移除的方法和属性)一个文档(主要是网页)的内容和结构.是表示和处理一个HTML或XML文档的常用方法. 节点的定义:D(Web网页文档)O(document对象)M(网页文档的树形结构)M中树形结构可以理解为由节点组成.把每个标签看作一个节点.   节点的分类:以一个完成的标签为例<div id ="box">测试Div</div> 元素节点:是标签<div></div

DOM基础

1.几个概念 文档: html 页面 文档对象: 页面中的元素 文档对象模型: 定义API,为了让 js 去操作页面中的元素 DOM 会把文档看成一棵树,同时会定义很多 "方法" 和 "属性" 来操作这棵树的每一个节点 元素.childNodes a.只读属性,子节点列表 b.dom节点有12种 1 // NodeType 2 const unsigned short ELEMENT_NODE = 1; 3 const unsigned short ATTRIBUT

HTML DOM基础知识

HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3.通过 JavaScript,您可以重构整个 HTML 文档.您可以添加.移除.改变或重排页面上的项目.要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口.这个入口,连同对 HTML 元素进行添加.移动.改变或移除的方法和属性,都是通过文档对象模型来获得

第一百一十三节,JavaScript文档对象,DOM基础

JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM脱胎于Netscape及微软公司创始的DHTML(动态HTML),但现在它已经成为表现和操作页面标记的真正跨平台.语言中立的方式. 一.DOM介绍 DOM中的三个字母,D(文档)可以理解

【JavaScript基础知识】——DOM基础

基本概念 DOM即文档对象模型,针对HTML和XML文档的API(应用程序接口).它描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构,也就是表示和处理一个HTML或XML文档的常用方法. D即document,上网查了一下它的英文翻译,最初的意思是记录.所以把它说是文档也是有迹可循的.O即Object,也就是对象,可以理解为类似window对象之类的东西,可以调用属性和方法.M(模型)可以理解为网页文档的树

javascript(js)基础 dom基础(js语法)未来会删除此博客

<script> //文档中第三个图像:document.images[2] //文档中名为'aa'的表单:document.form['aa'] //层只有唯一 的id:document.layers[id] //微软的层id:docment.all[id] //如果想找到id的left位置并把它赋值给变量bs,在其他浏览器中是这样操作的:document.layers[id].left; //统一标准的dom是这样的:bs=document.getElementByid(id).style

js入门——Dom基础

DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML DOM 针对HTML文档的标准模型 对于一个新生程序员来说.HTML是什么,其实并不重要.但是都知道.html文件,可以用浏览器打开. HTML和XML,基本相同.只不过是,HTML中节点 标记,是预先定义好的.而XML中的节点,由文档的作者定义.所以XML是可扩展的. HTML: 超文本标记语言.主