Javascript--HTML DOM基础知识

1.HTML DOM是什么,以及它的作用:

  w3c对DOM有一系列的解释和定义,用自己理解的话来说就是:HTML DOM是html的标准对象模型,可以使JavaScript去操作(获取,修改,删除,添加,)HTML对象。

2.DOM 如何获取HTML元素?

  在DOM中访问HTML元素的方法有多种 :

  1.DOM 节点:

    (在核心DOM中访问父子,兄弟节点)

    node.parentNode    访问父节点

    node.childNodes          访问所有子节点

    node.firstChild    访问第一个子节点

    node.lastChild    访问最后一个子节点

    node.nextSibling   访问下一个兄弟节点

    node.previousSibling 访问上一个兄弟节点

    (由核心DOM精简出的HTML DOM访问父子、兄弟节点)

    element.parentElement      访问父元素

    element.childern         访问所有子元素

    element.firstElementChild     访问第一个子元素

    element.lastElementChild     访问最后一个子元素

    element.nextElementChild       访问下一个子元素

    element.perviousElementChild    访问上一个子元素

  这两者之间的区别就在于 核心DOM无论访问的是父子节点还是兄弟节点 都会将空格,换行符当做节点 这就会造成使用的不便,而精简的HTML DOM 只会访问HTML中的元素。

  2.DOM 方法

    getElementById(id属性值)        返回带有id的元素

    getElementsByTagName(标签名)       返回指定标签名的所有元素 以数组的形式存储

    getElementsByClassName(class属性值)  返回是定类名的所有元素 以数组形式存储

    getElementsByName(name属性值)

  3.css选择器

    document.querySelectorAll("")  通过选择器获取元素  返回一个数组

    document.querySelector("")   通过选择器获取元素  返回一个元素

3.DOM 如何修改HTML元素的内容、属性、样式

  1.修改其内容(element表示某个元素)

    对于双标签:element.innerHTML = “……”

    对于单标签:element.value = " ……"

  2.修改其属性

    element.class = " " 修改class属性

    element.href  =  " " 修改超链接href属性

  3.修改其样式

    element.style.fontSize = "16px"  修改字体大小

4.DOM 如何添加HTML元素

  1.追加

    element.appendChild(elem)   向父元素element追加一个子元素elem

  2.插入

    element.insertBefore(elem,oldElem)  向父元素的oldElem元素前插入一个elem元素

  3.替换

    element.replaceChild(elem,oldElem)  将父元素element的oldElem替换为elem元素

5.DOM如何删除HTML元素

  parentNode.removeChild(elem)  删除父节点的elem子节点

  

  

原文地址:https://www.cnblogs.com/blogzzy/p/11374060.html

时间: 2024-10-19 00:48:21

Javascript--HTML DOM基础知识的相关文章

javascript中DOM基础知识介绍

1.1.     基本概念 1.1.1.      DOM DOM Document Object Model 文档对象模型 就是把HTML文档模型化,当作对象来处理 DOM提供的一系列属性和方法可以视作一个工具箱,极大地方便了我们对文档的处理. 1.1.2.      内容概念 文档(Document):就是指HTML或者XML文件 节点(Node):HTML文档中的所有内容都可以称之为节点,常见的节点有 元素节点 属性节点 文本节点 注释节点 元素(Element):HTML文档中的标签可以

HTML DOM基础知识

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

javascript之正则表达式基础知识小结

javascript之正则表达式基础知识小结,对于学习正则表达式的朋友是个不错的基础入门资料. 元字符 ^ $ . * + ? = ! : | \ / ( ) [ ] { } 在使用这些符号时需要用“\”来进行转移. 如果记不清楚那些标点符号需要转移,可以在使用标点符号时都使用反斜杠“\” 简单匹配 1.直接量 /javascript/ 匹配带有“javascript”的字符串 比如“javascript is an object-oriented scripting language” 2.[

JavaScript之DOM基础——我想和你好好谈谈

小编步入BS的学习阶段有段时间了,学习拖拖拉拉,需要好好整理之前学习到的知识.回顾JavaScript 中的知识点之DOM(Document ObjectModel)文档对象模型,针对HTML和XML文档的API (应用程序接口). 是W3C组织推荐的处理可扩展标志语言的标准编程接口. 一.DOM 介绍 DOM 中的三个字母:D(文档)理解为D(文档)可以理解为整个Web 加载的网页文档:O(对象)可以理解为类似 window 对象之类的东西,可以调用属性和方法,这里我们说的是document对

JavaScript,jQuery基础知识

JavaScript基础:JavaScript是一门可以嵌入html代码中,直接由浏览器即可执行的编程语言. jQuery:jQuery是一个优秀的JavaScript库,可以极大的简化日常中使用JavaScript的复杂度. jQuery UI:jQuery UI是以jQuery为基础的开源JavaScript网页用户界面代码库. jQuery Mobile:jQuery Mobile是jQuery在手机上和平板设备上的版本. 一.客户端(浏览器)JavaScript功能(由网景公司95年创立

JavaScript简介及基础知识(1)

1.JavaScript是什么—它是个脚本语言,需要宿主文件,它的宿主文件是html文件. Javascript是一种脚本语言,比HTML要复杂.不过即便你先前不懂编程,也不用担心,因为Javascript写的程序都是以源代码的形式出现的,也就是说你在一个网页里看到一段比较的Javascript代码,恰好你也用得上,就可以直接拷贝,然后放到你的网页中去.正因为可以借鉴.参考优秀网页的代码,所以让Javascript本身也变得非常受欢迎,从而被广泛应用.原来不懂编程的人,多参考Javascript

JavaScript学习笔记--基础知识

1. javaScript能做什么? (1)写入HTML输出 document.write("<h1>This is a heading</h1>"); 注意:只能在HTML输出中使用document.write.如果在文档加载后使用该方法,会覆盖整个文档. (2)对事件作出反应 <button type="button" onclick="alert('welcome!')">点击这里</button&

DOM基础知识

首先,我们需要介绍什么是DOM.DOM的英语全称为Document Object Model,翻译成中文就 是文档对象模型.也就是说,将整个文档看作是一个对象.而一个文档又是由很多节点组成的, 那么这些节点也可以被看作是一个个的对象.DOM里面的对象属于宿主对象,需要浏览器来作 为宿主.一旦离开了浏览器这个环境,那么该对象将不复存在.同样,上一章我们所介绍的 BOM也是如此,需要浏览器来作为宿主,所以它也是一个宿主对象. DOM的作用如下: ?浏览器提供的操纵HTML文档内容的应用程序接口 ?用

JavaScript笔记:基础知识

一.数据类型 字符串示例. var str = 'Hello World'; str[5] = '.'; var len = str.length; var upperStr = str.toUpperCase(); var lowerStr = str.toLowerCase(); var i = str.indexOf('World'); var substr = str.substring(6, 11); 数组示例. var arr = [0, 1.0, '1', true, undefi