HTML DOM元素小结

开发工具与关键技术：Visual Studio 2015 HTML DOM元素
作者：李国旭
撰写时间：2019年5月27日

首先，我们来认识一下HTML DOM，它就是HTML的标准对象模型和标准的编程接口还有就是W3C的标准。同时，它也定义了所有的HTML元素的对象和属性，以及访问它们的一些方法。总而言之，HTML DOM就是关于如何获取、修改、添加或删除HTML元素的标准。

上图我们可以清晰的看到整个HTML文档，由于展开太多了只能收起来，不过还是能看得到内容的；那么根据W3C对HTML DOM的标准来说：那么整个HTML文档中所有的内容都是节点，每一个HTML元素是元素节点，每个HTML元素内的文本是是属于文本节点而每个HTML属性是属性节点；注释是注释节点，这些节点之间呢又存在一种层级的关系也可以说是父和子还有同胞。那么就是父节点拥有子节点。同级的子节点被称为同胞通俗来讲就“兄弟姐妹”。
从上面的 HTML 中：节点呢是没有父节点的；它是根节点和的父节点是节点文节点 “Hello world!” 的父节点是

节点并且：节点拥有两个子节点：和；节点拥有一个子节点：

对于HTML DOM的方法就是我们可以在节点HTML元素上面干点坏事执行的动作，我们也可以通过JavaScript或者其它的方法来对HTML的元素进行访问。那么所有的HTML元素就会被定义为对象而编程的接口就我们的对象方法和对象属性。干坏事就比如说：在它上面添加一什么东西或者是修改一些元素等等；而属性就是我们能够获取或着是设置的值

比如我们需要一个子页面适应浏览器的高度呢就可以用上面的代码来设置你自己所需要的高度和宽度，它可以根据我们的需要变大或变小这也是它的神奇之处；不过呢在此之前就需要用iframe来嵌套另一个页面，在页面里面嵌套一个页面这样就可以了

常用的 HTML DOM 方法：getElementById(id)：它会获取带有指定 id 的节点或元素；（appendChild(node)：插入新的子节点（元素）；removeChild(node)：删除子节点（元素）
常用的 HTML DOM 属性：innerHTML：节点（元素）的文本值； parentNode：节点（元素）的父节点； childNodes：节点（元素）的子节点； attributes：节点（元素）的属性节点。
以上的就是我对HTML DOM的一些基本了解和认识！

HTML DOM元素小结相关推荐

获取DOM元素方法小结
在开发中不可避免的需要操作DOM,现在就来总结一下原生的获取DOM的API. getElementById() 该方法是最常用的通过元素的id属性来获取DOM元素的API,返回一个DOM元素. < ...
JS中DOM元素获取的宽和高的方法小结
网页可见区域宽: document.body.clientWidth (可变) 网页可见区域高: document.body.clientHeight (可变) 网页可见区域宽: document.b ...
遍历DOM元素的children属性遇到的坑
问题的引出关于DOM元素的children属性,以前我只在意它和childNodes属性的区别:即children属性只会返回子元素节点集合,而childNodes返回的就不止元素节点,还有文本节点 ...
前端JavaScript DOM BOM 自学复盘 D1（DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数）
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
js中Dom元素及获取方法
DOM基础对象 document document.documentElement html部分 document.head document.title document.body body部分 ...
【EASYDOM系列教程】之 DOM 元素树
DOM 元素树结构与 DOM 节点树结构很相似,区别仅在于是利用节点解析 HTML 元素,还是利用元素解析 HTML 元素. DOM 树结构还记得下面这张图吗? 上图中的 HTML 页面源代码如下: ...
JavaScript获取DOM元素位置和尺寸大小
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript ...
vue获取dom元素注意问题
mounted(){setTimeout(()=>{this.contentToggle();},1000)},methods:{contentToggle(){console.log(this ...
JavaScriptjQuery.查询DOM元素
查询DOM元素查询单个元素document.getElementById <!DOCTYPE html> <html> <head> <title>访 ...

HTML DOM元素小结

HTML DOM元素小结相关推荐

最新文章

热门文章