首先先要知道我们必须要明白的节点类型的值 1---元素类型 2---元素的属性类型 3--元素的值类型 4--cdata注释类型 8--注释 9--文档类型 操作节点属性 nodeType nodeName nodeValue parentNode 常规跨浏览器的原声dom选择器 在操作节点的时候注意各浏览器对空文本节点的处理,ie是忽略的(childNodes) 一、document.getElementById() 根据Id获取元素节点 二、document.getElementsByName() 根据name获取元素节点 三、document.getElementsByTagName() 根据HTML标签名获取元素节点,注意getElements***的选择器返回的是一个NodeList对象,能根据索引号选择其中1个,可以遍历输出。 h5新增dom选择器 document.getElementsByClassName() 根据class获取元素节点 类css选择器 document.querySelector() document.querySelectorAll() 文档结构和遍历 1、parentNode 获取该节点的父节点 2、childNodes 获取该节点的子节点数组注意低版本的处理 3、firstChild 获取该节点的第一个子节点 4、lastChild 获取该节点的最后一个子节点 5、nextSibling 获取该节点的下一个兄弟元素 6、previoursSibling 获取该节点的上一个兄弟元素 7、nodeType 节点的类型,9代表Document节点,1代表Element节点,3代表Text节点,8代表Comment节点,11代表DocumentFragment节点 8、nodeVlue Text节点或Comment节点的文本内容 9、nodeName 元素的标签名(如P,SPAN,#text(文本节点),DIV),以大写形式表示 H5新增的节点识别,统一文本节点处理(IE9之前不会返回节点的文本节点,这样会对firstChild以及childNodes属性的使用产生影响--摘自javascript高级程序设计) 1、firstElementChild 第一个子元素节点 2、lastElementChild 最后一个子元素节点 3、nextElementSibling 下一个兄弟元素节点 4、previousElementSibling 前一个兄弟元素节点 5、childElementCount 子元素节点个数量 h5还新增document.createNodeIterator document.createTreeWalker(相比nodeIterator 更加高级,不仅仅只有nextNode,previosNode还包括parentNode,nextSibling,previousSibiling,firstNode,lastNode)
javascript操作DOM节点的属性 getAttribute(); setAttribute(); 1、innerText、textContent innerText与textContent的区别,当文本为空时,innerText是"",而textContent是undefined 2、innerHTML和outHTML //注意火狐浏览器不支持innerText,但是所有的浏览器基本都支持textContent outHTML是包含所操作节点本身 innerHTMl所操作节点内部的html元素 创建,插入,删除节点 document.createTextNode() 创建一个文本节点 新建文档碎片有利于提高性能,减少对文档的重排 document.createDocumentFragment(); 创建一个元素节点 document.createElement() 在节点后面插入一个新的节点 document.appendChild(); document. insertBefore(); removeChild(); 由父元素调用,删除一个子节点 replaceChild() //删除一个子节点,并用一个新节点代替它,第一个参数为新建的节点,第二个节点为被替换的节点
相关推荐
本书循序渐进的对jQuery的各种方法和使用进行介绍,读者可以系统的掌握jQuery关于DOM操作、事件监听和动画、表单操作、AJAX以及插件方面知识点,并结合每个章节后面的案例演示进行练习,达到掌握本章节知识点的目的...
前端知识点总结 1. HTML(超文本标记语言):用于创建网页的标记语言,包含标签、属性、文本等元素,用于描述网页的结构和内容。 2. CSS(层叠样式表):用于美化网页的样式语言,包含选择器、属性和值,用于描述...
# 一面 2:JS-Web-API 知识点与高频考题解析 除 ES 基础之外,Web 前端经常会用到一些跟浏览器相关的 API,接下来我们一起梳理一下。 ## 知识点梳理 - BOM 操作 - DOM 操作 - 事件绑定 - Ajax - 存储 ------ ##...
此外,我还会在此博客账号上持续更新前端相关内容(js基础语法,BOM操作,DOM操作),与此同时会持续优化更新笔记内容,后边也会更新一些后端内容,欢迎您的关注和支持,也欢迎各位小伙伴来讨论js和node.js相关知识...
主要介绍了JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支,结合实例形式总结分析了JS页面加载事件,数组操作,DOM节点操作,循环和分支所涉及的相关事件、函数及操作注意事项,需要的朋友可以...
前端知识点总结内容持续更新中...目录1. html基础2. CSS 基础css3 新增的属性css3 动画css3 Animate/transition/translatecss3 rem 与 emcss3 响应式布局CSS 常见布局方式css预处理器,Sass、Less和Stylus移动端1px...
基础知识点笔记
Web前端的黑客攻防技术是一门非常新颖且有趣的黑客技术,主要包含Web前端安全的跨站脚本(XSS)、跨站请求伪造(CSRF)、界面操作劫持这三大类,涉及的知识点涵盖信任与信任关系、Cookie安全、Flash安全、DOM渲染、...
前端面试之道 - 宋小菜,助你建立起完整的前端知识架构体系,探究知识的原理,深入了解大厂常考知识点 JavaScript 深入系列、JavaScript 专题系列、ES6 系列、React 系列 - 冴羽的博客 高级前端进阶博文 - 木易杨...
本书循序渐进的对jQuery的各种方法和使用进行介绍,读者可以系统的掌握jQuery关于DOM操作、事件监听和动画、表单操作、AJAX以及插件方面知识点,并结合每个章节后面的案例演示进行练习,达到掌握本章节知识点的目的...
前端开发入门阶段,需要掌握的关键知识点主要包括以下几个方面: HTML (HyperText Markup Language) 理解HTML文档的基本结构,例如<!DOCTYPE>, , , 等元素。 学习和使用常见的HTML标签,如标题标签(至)、段落...
内容概要:2023前端vue+react最全面试题汇总,前端知识点全部覆盖,保你面试无忧。 适合人群:最近在准备面试,具备一定编程基础,工作1-3年的研发人员, 题目举例:1、说说vue动态权限绑定渲染列表(权限列表渲染)...
本资源整理归纳了css+div JavaScript Dom编程的常用知识点 适合做为快速查看手册
Web前端的黑客攻防技术是一门非常新颖且有趣的黑客技术,主要包含Web前端安全的跨站脚本(XSS)、跨站请求伪造(CSRF)、界面操作劫持这三大类,涉及的知识点涵盖信任与信任关系、Cookie安全、Flash安全、DOM渲染、...
DOM对象.jpg ... javascriptDOM基本操作.gif javascript函数基础.gif javascript变量.gif javascript字符串函数.gif ...知识点查漏补缺必看,职业知识体系一目了然 客户端知识体系.jpg 浏览器对象.jpg 游戏前端.jpg
Web前端的黑客攻防技术是一门非常新颖且有趣的黑客技术,主要包含Web前端安全的跨站脚本(XSS)、跨站请求伪造(CSRF)、界面操作劫持这三大类,涉及的知识点涵盖信任与信任关系、Cookie安全、Flash安全、DOM渲染、...
web前端的黑客攻防技术是一门非常新颖且有趣的黑客技术,主要包含web 前端安全的跨站脚本(xss)、跨站请求伪造(csrf)、界面操作劫持这三大类,涉及的知识点涵盖信任与信任关系、cookie安全、flash 安全、dom ...
通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree 构建Rendering tree Rendering Tree 渲染树并不等同于DOM树,因为一些像Header或display:none的东西就没必要放在渲染树中了。 CSS 的 Rule Tr