javaScript:什么是DOM操作?DOM节点? |
您所在的位置:网站首页 › 节点和超级节点是什么意思 › javaScript:什么是DOM操作?DOM节点? |
目录 一.什么是DOM操作 1.DOM 操作可以用于实现以下功能: 2.DOM树 3.DOM节点/操作 什么是DOM节点? nodeName 属性 含有某一个节点的名称 nodeValue 属性,获取某一节点的值 nodeType 属性,返回的是节点的类型,是一个数字 注意 常见节点 元素节点: 文本节点: 属性节点: 注释节点: 文档节点: 获取元素中所有子节点 特殊节点 获取节点内容的几种常用方法 1.innerHTML 2.innerText 3.textContent 相关代码 DOM基础 特殊节点 获取节点内容 一.什么是DOM操作DOM 操作指的是使用 JavaScript 通过文档对象模型(DOM)来操纵网页中的 HTML 元素和内容。DOM 是一个树状结构,表示网页的结构和内容,它允许开发者通过 JavaScript 修改、添加、删除或查询网页中的元素和属性。 1.DOM 操作可以用于实现以下功能:获取元素:可以通过 DOM 操作获取网页中具有特定标签名、类名、ID 或其他属性的元素。这使我们能够选择需要进行操作的元素,并获取对应的 DOM 对象。 修改元素内容:通过 DOM 操作,我们可以修改元素的文本内容、HTML 结构、属性值等。例如,可以通过 DOM 操作更改段落的文本、更新图片的 URL 或修改按钮的样式。 添加和删除元素:通过 DOM 操作,我们可以动态地添加新的元素到网页中,或者删除现有的元素。这对于创建动态内容、动态生成列表或实现动画效果非常有用。 修改元素样式:DOM 操作可以修改元素的 CSS 样式,包括颜色、尺寸、位置等。通过 JavaScript 可以动态地添加、删除或修改元素的类名和内联样式,从而改变元素的外观和布局。 处理事件:通过 DOM 操作,可以为元素添加事件监听器,以便在用户执行特定操作时触发相应的 JavaScript 代码。这使我们能够实现交互性和响应性的网页,例如处理按钮点击、鼠标移动或键盘输入等事件。 DOM 操作允许开发者以编程方式更改网页的结构和内容,从而实现动态和交互性的效果。通过利用 DOM 操作,可以创建出富有交互性、响应式和动态的网页应用程序。 2.DOM树DOM树的概念,所谓的Dom其实就是一个文档结构,当浏览器记录该dom结构的时候 会在底层把该结构转化为树状结构 3.DOM节点/操作 什么是DOM节点?dom节点,dom结构中的每一个元素,都是一个dom节点,根据节点的结构,可以分为 根节点,父节点,子节点 nodeName 属性 含有某一个节点的名称nodeName 属性 含有某一个节点的名称 元素节点 的 nodeName 是元素的名字,大写的英文单词 属性节点 的 nodeName 是属性名称 文本节点 的 nodeName 都是 #text ,所有的文本节点名字都是#text 文档节点 的 nodeName 是#document nodeValue 属性,获取某一节点的值nodeValue 属性,获取某一节点的值 属性节点 和 文本节点的 nodeValue ,都是他们对于的内容 元素节点 和 文本节点 没有 nodeValue 值 nodeType 属性,返回的是节点的类型,是一个数字nodeType 属性,返回的是节点的类型,是一个数字 注意在html中每一次操作,包括换行,回车,注释都会产生一个节点 元素的children属性,用来获取该元素的所有第一个层元素节点(子元素) 常见节点 元素节点:每一个html标签都是一个元素节点 列如 div ul li ,nodeType 值是 1 (nodeType节点类型) 文本节点:元素节点或者属性节点中的内容,nodeType 值是3 属性节点:元素节点的属性,列如 id class src title 等,nodeType 值是 2 注释节点:被注释掉的内容,nodeType 值是8 文档节点:整个document文档,nodeType值是9 获取元素中所有子节点 //childNodes获取元素中所有子节点 console.log(list.childNodes); //获取节点列表 特殊节点document.body; 获取body 标签元素对象 document.documentElement 获取html 标签元素对象 document.doctype 文档声明节点,他的nodeType值是10 获取节点内容的几种常用方法 1.innerHTMLinnerHTML 可以获取内容,获取的是一个字符串,包含dom结构 中的制表符和空格,当元素设置为隐藏的时候,仍然可以获取 2.innerTextinnerText 可以获取标签中的所有的文本内容,会忽略内容中的制表符和空格(空格变成1个) 并且当 display:none的时候,可以获取到内容,此时不会忽略内容中的制表符和空格 ,当隐藏设置为 visibility: hidden; 的时候,获取不到元素的内容。 3.textContentie8以下不支持,获取元素中所有的文本内容,所有格式保留,元素隐藏和显示都会获取内容 相关代码 DOM基础 dom基础 两情如是久长时朝朝暮暮吃壮馍 3 4 5 6 7 8 9 10 /* DOM:(document object model) 文档对象模型 1.DOM中提供了很多属性和方法,能够使我们方便的对html文档及其内部的 元素对象进行 创建 删除 插入 修改 替换 拷贝 查询 等。 2.DOM树的概念,所谓的Dom其实就是一个文档结构,当浏览器记录该dom结构的时候 会在底层把该结构转化为树状结构 3.dom节点,dom结构中的每一个元素,都是一个dom节点,根据节点的结构,可以分为 根节点,父节点,子节点 */ let list = document.getElementById('list') //childNodes获取元素中所有子节点 console.log(list.childNodes); //获取节点列表 console.log(list.nodeType,list.nodeName,list.nodeValue) //nodeName节点名称 /* 元素节点:每一个html标签都是一个元素节点 列如 div ul li , nodeType 值是 1 (nodeType节点类型) 文本节点:元素节点或者属性节点中的内容,nodeType 值是3 属性节点:元素节点的属性,列如 id class src title 等,nodeType 值是 2 注释节点:被注释掉的内容,nodeType 值是8 文档节点:整个document文档,nodeType值是9 */ //文本节点 let listNodel = list.childNodes[0]; console.log(listNodel.nodeType,listNodel.nodeName,listNodel.nodeValue) //属性节点,属性节点的获取需要使用 let ids = list.attributes['id'] console.log(ids.nodeType,ids.nodeName,ids.nodeValue) //注释节点 let comt = list.childNodes[1]; console.log(comt.nodeType,comt.nodeName,comt.nodeValue) //文档节点 console.log(document.nodeType,document.nodeName,document.nodeValue) /* nodeName 属性 含有某一个节点的名称 元素节点 的 nodeName 是元素的名字,大写的英文单词 属性节点 的 nodeName 是属性名称 文本节点 的 nodeName 都是 #text ,所有的文本节点名字都是#text 文档节点 的 nodeName 是#document nodeValue 属性,获取某一节点的值 属性节点 和 文本节点的 nodeValue ,都是他们对于的内容 元素节点 和 文本节点 没有 nodeValue 值 nodeType 属性,返回的是节点的类型,是一个数字 在html中每一次操作,包括换行,回车,注释都会产生一个节点 元素的children属性,用来获取该元素的所有第一个层元素节点(子元素) */ console.log(list.childNodes,list.children); for (let i = 0; i < list.children.length; i++) { list.children[i].onclick = function(){ alert(this.innerHTML) } } 特殊节点 特殊节点 /* document.body; 获取body 标签元素对象 document.documentElement 获取html 标签元素对象 document.doctype 文档声明节点,他的nodeType值是10 */ let body = document.body; console.log(body.nodeType,body.nodeName,body.nodeValue); let html = document.documentElement; console.log(html.nodeType,html.nodeName,html.nodeValue); let doc = document.doctype; console.log(doc.nodeType,doc.nodeName,doc.nodeValue); 获取节点内容 获取节点内容 *{ margin: 0; padding: 0; } .test{ width: 200px; height: 200px; background: pink; }古今多少事 杨 慎都付笑谈中 /* 获取元素节点的内容 因为 nodeValue 不能在元素节点上使用 获取元素节点内容的方式 1.innerHTML innerHTML 可以获取内容,获取的是一个字符串,包含dom结构 中的制表符和空格,当元素设置为隐藏的时候,仍然可以获取 2.innerText innerText 可以获取标签中的所有的文本内容,会忽略内容中的制表符和空格(空格变成1个) 并且当 display:none的时候,可以获取到内容,此时不会忽略内容中的制表符和空格 ,当隐藏设置为 visibility: hidden; 的时候,获取不到元素的内容。 3.textContent ie8以下不支持,获取元素中所有的文本内容,所有格式保留,元素隐藏和显示都会获取内容 */ let wp = document.getElementById('wp') console.log(wp.innerHTML); console.log(wp.innerText); console.log(wp.textContent); |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |