摘要：前端知识点即文档对象模型，是一种用于和文档的编程接口。指的是返回当前元素的所有元素节点，代码如下打印结果很直观的返回元素节点的属性。接下来对比父节点，父元素两者在通常情况下是一样的，因为包含元素的节点只有可能是元素节点。运行劫夺一致，都是。
前端DOM知识点
DOM即文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。DOM把网页和脚本以及其他的编程语言联系起来。DOM属于浏览器的，而非JavaScript语言规范里规定的核心内容。W3C规范中常用的DOM节点类型有以下几种： 一、查找元素
document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合
parentNode // 父节点 childNodes // 所有的子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有的子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementSibling // 下一个子标签元素 previousElementSibling // 上一个子标签元素
区别：childNodes，children
childNodes指的是返回当前元素子节点的所有类型节点，其中连空格和换行符都会默认文本节点
打印结果：
其中空格和文本均打印为文本节点
如果给li标签添加属性总长度不会改变，因为childNodes只会返回文本和元素节点，并不能返回属性节点。
children指的是返回当前元素的所有元素节点，代码如下
打印结果：
children很直观的返回元素节点的属性。
接下来对比parentNode（父节点），parentElement（父元素）
两者在通常情况下是一样的，因为包含元素的节点只有可能是元素节点。
文本节点只是文本本身，文本节点的父节点是元素节点。
运行劫夺一致，都是HTML。然而再往上一层，就是根部document，并不是元素，执行下面代码：
执行结果：
区别就在于parentNode找的是节点，就可以显示出来，parentElement找的是元素，因此找到根部document的时候就出现值为null的报错。
二、操作innerText //文本 innerHTML //HTML内容 value //值
attributes // 获取所有标签属性 setAttribute(key,value) // 设置标签属性 getAttribute(key) // 获取指定标签属性
className // 获取所有的类名 classList.remove(cls) // 删除指定类 classList.add(cls) // 添加类
a.创建标签
// 方式一
var tag = document.createElement("a")
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/wupeiqi"
// 方式二
var tag = "wupeiqi"
b.操作标签
// 方式一
var obj = "";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement("afterBegin",document.createElement("p"))
//注意：第一个参数只能是"beforeBegin"、 "afterBegin"、 "beforeEnd"、 "afterEnd"
// 方式二
var tag = document.createElement("a")
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])
var obj = document.getElementById("i1")
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
//总文档高度
document.documentElement.offsetHeight
//当前文档占屏幕高度
document.documentElement.clientHeight
//自身高度
tag.offsetHeight
//距离上级定位高度
tag.offsetTop
//父定位标签
tag.offsetParent
//滚动高度
tag.scrollTop
/*
clientHeight -> 可见区域：height + padding
clientTop -> border高度
offsetHeight -> 可见区域：height + padding + border
offsetTop -> 上级定位标签的高度
scrollHeight -> 全文高：height + padding
scrollTop -> 滚动高度
特别的：
document.documentElement代指文档根节点
*/
document.geElementById("form").submit()
console.log 输出框 alert 弹出框 confirm 确认框 // URL和刷新 location.href 获取URL location.href = "url" 重定向 location.reload() 重新加载 // 定时器 setInterval 多次定时器 clearInterval 清除多次定时器 setTimeout 单次定时器 clearTimeout 清除单次定时器
三、事件
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/101294.html
摘要：所有我们不熟悉或者没有掌握的知识皆可称之为知识盲区，有知识盲区并不可怕，针对知识盲区去学习即可。只有这样，我们才会准确知道自己的知识盲区所处何处，以及发现更多的知识盲区。节点对应的对象是，其他的具体节点对象全都是继承自对象。 前端时间在部门内进行分享，准备素材时偶然发现下面的一个现象，因为和当时分享的主题无关，就先记下来了，事后重新审视，并把一些思考记录如下： 一、问题 HTML： ...
摘要：前端知识点总结什么是什么是专门操作网页内容的标准为什么统一不同浏览器操作网页内容的标准优点几乎所有浏览器兼容什么是网页中所有内容在内存中都是保存在一棵树形结构中网页中每项内容元素文本属性注释，都是树上的一个节点对象。 前端知识点总结——DOM 1.什么是DOM: Document Object Model 什么是: 专门操作网页内容的API标准——w3c 为什么: 统一不同浏览器操作网...
摘要：前端渲染过程的二三事本文不会介绍整个前端渲染过程的步骤，只是记录最近阅读的文章的些许思考和感悟。那么现在我们可以明白这个问题的关键所在了，因为在大部分页面中是拥有的，而由于其解析顺序，那么在事件之前必定已经成功构造树。 前端渲染过程的二三事 本文不会介绍整个前端渲染过程的步骤，只是记录最近阅读的文章的些许思考和感悟。（文章地址一（系列）,文章地址二） 希望大家在阅读这篇文章之前能将上述...
摘要：手把手教你做个人火的时候，随便一个都能赚的盆满钵满，但是，个人没有服务端，没有美工，似乎就不能开发了，真的是这样的吗秘密花园经典的中文手册。涵盖前端知识体系知识结构图书推荐以及入门视频教程，全的简直不要不要的了。 JavaScript 实现点击按钮复制指定区域文本 html5 的 webAPI 接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能，不需要依赖 flash。...
摘要：下面我们撇开网络方面的优化，只分析静态资源方面的优化。不过，也会阻止的构建和延缓网页渲染。未优化正常加载优化后异步加载根据上面的分析，我们可以清楚的认识到，非必要优先加载的，选择异步加载是最优选择。 为什么做优化 经典问题：白屏时间过长，用户体验差产生的原因：网络问题、关键渲染路径（CRP）问题 怎么做优化 如何做好优化呢，网上随便一搜，就有很多优化总结，无非就是网络优化、静态资源（h...
阅读 1373·2021-11-11 16:54
阅读 9168·2021-11-02 14:44
阅读 2330·2021-10-22 09:53
阅读 3240·2019-08-30 11:18
阅读 1903·2019-08-29 13:29
阅读 1984·2019-08-27 10:58
阅读 1610·2019-08-26 11:38
阅读 3490·2019-08-26 10:31
