dom节点

2018-01-27 21:04:30

一、DOM节点简介： 1.在HTML DOM中，所有事物都是节点。DOM是被视为节点树的HTML。 2.根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点：整个文档是一个文档节点。每个HTML元素是元素节点。 ...


HTML DOM节点：
一、DOM节点简介：
1.在HTML DOM中，所有事物都是节点。DOM是被视为节点树的HTML。
2.根据W3C的HTML
 DOM标准，HTML文档中的所有内容都是节点：
     <1>整个文档是一个文档节点。
     <2>每个HTML元素是元素节点。
     <3>HTML元素内的文本是文本节点。
     <4>每个HTML属性是属性节点。
     <5>注释是注释节点。
3.通过HTML DOM，节点树中的所有节点均可通过javascript进行访问。所有HTML元素（节点）均可被创建或删除节点。
[警告]：DOM处理中的常见错误是希望元素节点包含文本。例如：<title>DOM教程</title>
元素节点<title>,包含值为“DOM教程”的文本节点。可通过节点的innerHTML属性
来访问文本节点的值。
举例：
     <html>
         <head>
           <title>DOM教程</title>
         </head>
         <body>
           <h1>DOM第一课</h1>
           <p>Hello World!</p>
         </body>
     </html>
在上面的HTML中：
      <1><html>节点没有父节点；它是根节点
      <2><head>和<body>的父节点是<html>节点
      <3>文本节点“Hello World!”的父节点是<p>节点
      <4><html>节点拥有两个子节点：<head>和<body>
      <5><head>拥有一个子节点：<title>节点
      <6><title>节点也拥有一个子节点：文本节点“DOM教程”
      <7><h1>和<p>节点是同胞节点，同时也是<body>的子节点


有关DOM节点的案例：

       1.创建新的HTML元素（即节点）：

 提示： 如果需要向HTML
 DOM添加新元素，你必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

 举例：

 <html>

<head>

<meta charset="utf-8">

<title>创建新节点</title>

</head>

<body>

<div id="div1">

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

<script>

var para=document.createElement("p");//创建新的<p>元素

var node=document.createTextNode("这是新段落。")//创建文本节点

para.appendChild(node);//向<p>元素追加这个文本节点

var element=document.getElementById("div1");//找到一个已有的元素

element.appendChild(para);//向这个已有的元素追加新元素

</script>

</body>

</html>


删除已有的HTML元素：

 提示：如需删除HTML元素，你必须首先获得该元素的父元素。如果能够在不引用父元素的情况下删除某个元素，就太好的。不过很遗憾。DOM需要清楚你需要删除的元素，以及它的父元素。

        这是常用的解决方案：找到你希望删除的子元素，然后使用其parentNode属性来找到父元素 ：

        var child =document.getElementById(“p1”);

        child.parentNode.removeChild(child);//找到它的父元素然后通过父元素来删除这个子元素。+

 举例：

 <html>

 <head>

 <meta charset="utf-8">

 <title>删除节点</title>

 </head>

 <body>

 <div id="div1">

 <p id="p1">这是一个段落。</p>

 <p id="p2">这是另一个段落。</p>

 </div>

 <script>

 var parent=document.getElementById("div1");//找到id="div1"的元素

 var child=document.getElementById("p1");//找到id="p1"的<p>元素

 parent.removeChild(child);//从父元素中删除子元素

 </script>

 </body>

 </html>

收起

展开全文

Dom节点

2019-08-25 16:17:48

在HTML DOM中HTML文档中所有内容都被视为节点，DOM被视为节点树的HTML。节点分为父节点子节点和同胞，一个文档中可以有多个父节点和子节点 <html> <head> <title>DOM 结构</title> </...

Dom是Document Object Model（文档对象模型）的缩写

在HTML DOM中HTML文档中所有内容都被视为节点，DOM被视为节点树的HTML。

节点分为父节点子节点和同胞，一个文档中可以有多个父节点和子节点
<html>
<head>
<title>DOM 结构</title>
</head?
<body>
<h1>DOM 结构</h1>
<p>Hello world!</p>
</body>
</html>

从上面代码可以看出<html></html>有二个子节点分别是<head>和<body>
 <html>为根节点，它没有父节点,它有两个子元素节点<head>、<body>
<head>有一个子元素节点<title>，<body>有两个子元素节点<h1>、<p>
<title>有一个子文本节点：“DOM结构”，类似<h1>和<p>也有一个子文本节点
<h1>和<p>为同胞节点

收起

展开全文

dom节点树、dom节点关系

2019-04-18 12:32:47

一、dom节点树遍历文档节点树遍历元素节点树二、dom节点关系节点属性父级属性子级属性同级属性节点方法一、dom节点树根据w3c的dom标准，文档中的所有内容都是节点，节点是dom的最小组成单元。...

目录

一、dom节点树

遍历文档节点树

遍历元素节点树

二、dom节点关系

节点属性

父级属性

子级属性

同级属性

节点方法

一、dom节点树

根据w3c的dom标准，文档中的所有内容都是节点，节点是dom的最小组成单元。浏览器会根据dom模型将文档解析成一系列节点，这些节点组成一个树状结构，称为dom节点树。dom节点树体现了文档的层次结构。dom节点树有两种类型，其一dom文档节点树，其二dom元素节点树，dom文档节点树包含文档中所有类型的节点，dom元素节点树只包含元素节点。



遍历文档节点树

遍历所有Node节点。遍历dom文档节点树的方法兼容于所有浏览器。

1、parentNode
2、childNodes
3、firstChild
4、lastChild
5、nextSibling
6、previousSibling

//兼容写法获取前一个元素节点
function previousElem(elem){
    var ret = elem && elem.previousSibling;
    if(ret && ret.nodeType != 1){
        ret = previousElem(ret);
    }
    return ret;
}

遍历元素节点树

遍历元素节点，其余类型的节点忽略。除了children方法外其余方法在ie8及以下版本的浏览器中都不兼容。

1、parentElement
2、children
3、childElementCount
4、firstElementChild
5、lastElementChild
6、nextElementSibling
7、previousElementSibling

二、dom节点关系

dom将文档解析成一个由多层次节点构成的结构即dom结构。节点是dom结构的基础。dom节点包含12种类型，每种类型的节点分别表示文档中不同的信息及标记。节点之间的关系构成了层次，整个文档表现为一个以特定节点为根节点的树形结构。节点关系类似于传统的家族关系，节点树相当于家谱。



节点属性

dom节点的关系属性都是只读的。

父级属性

parentNode

每个节点都有一个parentNode属性，该属性指向当前节点在节点树中的父节点。对于一个节点来说，它的父节点只可能为三种类型，分别是元素节点、文档节点和文档片段节点。如果父节点不存在，则返回null。

parentElement

与parentNode属性不同的，该属性指向当前节点在节点树中的父元素节点。ie浏览器中只有元素节点有该属性，其它浏览器中所有类型的节点都有该属性。

<div>
    <strong></strong>
    <span></span>
</div>
<script>
    var strong = document.getElementsByTagName("strong")[0]; 
    console.log(strong.parentElement);    
</script>

子级属性

childNodes

childNodes返回一个只读的NodeList集合，保存着当前节点的第一层子节点。

<div>
    123
    <--注释-->
    <strong></strong>
    <span></span>
</div>
<script>
    var div = document.getElementsByTagName("div")[0]; 
    console.log(div.childNodes);    
    //NodeList(7) [text, comment, text, strong, text, span, text]
    //返回7个子节点，text表示文本节点，comment是注释节点
</script>

children

children返回一个只读的HTMLCollection集合，保存着当前节点的第一层子元素节点。

<div>
    <strong></strong>
    <span></span>
</div>
<script>
    var div = document.getElementsByTagName("div")[0]; 
    console.log(div.children); //HTMLCollection(2) [strong, span]    
</script>

childElementCount

返回当前节点下子元素节点的个数，相当于children.length。ie8及以下版本的浏览器中不兼容。

<div>
    <strong></strong>
    <span></span>
</div>
<script>
    var div = document.getElementsByTagName("div")[0]; 
    console.log(div.childElementCount); //2 
</script>

firstChild

当前节点的第一个子节点。ie8及以下版本浏览器忽略空白文本节点。

lastChild

当前节点的最后一个子节点。ie8及以下版本浏览器忽略空白文本节点。

<div>
    123
    <!--注释-->
    <strong></strong>
    <span></span>
</div>
<script>
    var div = document.getElementsByTagName("div")[0]; 
    console.log(div.firstChild); //"    123    " --> 文本节点
    console.log(div.lastChild);  //#text --> 空文本节点
</script>

firstElementChild

当前节点的第一个元素节点。ie8及以下版本浏览器不兼容。

lastElementChild

当前节点的最后一个元素节点。ie8及以下版本浏览器不兼容。

同级属性

nextSibling

当前节点的后一个兄弟节点。ie8及以下版本浏览器忽略空白文本节点。

previousSibling

当前节点的前一个兄弟节点。ie8及以下版本浏览器忽略空白文本节点。

<div>
    123
    <!--注释-->
    <strong></strong>
    <span></span>
</div>
<script>
    var div = document.getElementsByTagName("strong")[0]; 
    console.log(div.nextSibling);      //#text
    console.log(div.previousSibling);  //#text 
</script>

nextElementSibling

当前节点的后一个兄弟元素节点。ie8及以下版本浏览器不兼容。

previousElementSibling

当前节点的前一个兄弟元素节点。ie8及以下版本浏览器不兼容。

节点方法

hasChildNodes()

判断当前节点是否包含子节点，包含一个或多个子节点时返回true。子节点可以是任意类型。

contains()

contains方法接受一个节点作为参数，返回一个布尔值，表示参数节点是否为当前节点的后代节点。参数为后代节点即返回true，不一定是第一层子节点。ie和safari不支持document.contains()方法，只支持元素节点的contains()方法。

<div id="d1">
    <span id="s1"></span>
    <span id="s2"></span>
</div>
<script>
    console.log(d1.contains(s1)); //true
    console.log(s1.contains(s2)); //false
</script>

收起

展开全文

dom节点

2015-09-24 09:29:37

文档节点元素节点属性节点内容节点注释节点

文档（dom）节点

元素（Element）节点

属性（Attribute）节点

内容（InnerHtml）节点

注释节点

收起

展开全文

vue 获取dom节点 dom节点位置
2020-11-17 13:46:58
2.使用this.refs[′name′]或this.refs['name'] 或 this.refs[′name′]或this.refs.name,即可获取dom节点 this.$refs['div'] 3.获取dom的位置 getBoundingClientRect()可以打印出dom 的位置宽高等信息 this.$refs['...
收起
$(Dom节点1 Dom节点2) 选择器中的两个Dom节点的包含关系
2016-01-20 17:31:00
刚刚开通了自己个人的微博和博客，由于没有过类似的经历，所以有些不知所措。...记得刚开始解除jQuery选择器的时候，看到前辈代码里这三个类似的东西：$('Dom节点1','Dom节点2') 和 $('Dom节点1...
收起
HTML DOM 节点
2020-03-29 12:45:14
文章目录HTML DOM 节点DOM NodesDOM 节点HTML DOM 节点树节点父、子和同胞警告！在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。 DOM Nodes DOM 节点根据 W3C 的 HTML DOM 标准，HTML 文档中的...
收起
js学习二之操作 DOM 节点和修改 DOM 节点 CSS 样式
2019-06-11 14:31:35
1. 操作 DOM 节点 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">...JavaScript操作DOM节点</title> <script type="text/javascript"> function modifyDOM(){...
收起
dom4j添加节点的父节点_HTML DOM节点介绍
2020-12-27 11:35:47
HTML DOM节点介绍，在HTML DOM中，所有事物都是节点。DOM是被视为节点树的HTML。　DOM节点 根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点：　整个文档是一个文档节点每个HTML元素是元素节点　HTML元素内的...
收起
小程序更改dom节点的值_如何更改DOM节点值
2020-08-28 12:51:03
小程序更改dom节点的值Change the value of the innerText property: 更改innerText属性的值： element.innerText = 'x'To lookup the element, combine it with the Selectors API: 要查找元素，请将其与...
收起
区块链 xml 数据结构
HTML DOM节点
2019-10-16 09:50:06
DOM节点 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：整个文档是一个文档节点每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注释节点 HTML DOM 节点树...
收起
vue获取到dom节点_支持多个DOM节点的Vue指令会自动粘贴到顶部
2020-07-21 10:54:46
vue获取到dom节点 Vue-stickto (vue-stickto) A vue directive that support multiple DOM Node stick to top automatically. 支持多个DOM节点的vue指令会自动粘贴到顶部。 View demo 查看演示 Download Source ...
收起
vue python linux xml
DOM 节点操作
2020-05-10 21:40:52
DOM节点分为三大类：元素节点（标签节点），属性节点和文本节点。属性节点和文本节点都属于节点的子节点。因此操作时，需先选中元素节点，再修改属性和文本。注意事项： 1， ID不能重名，如果ID重复，只能取到第一...
收起
javascript
JavaScript 技术篇-textContent获取dom节点text文本内容带空格，js获取带空格的dom节点内容
千次阅读 2019-07-03 21:27:56
JavaScript 技术篇-textContent获取dom节点text文本内容带空格，js获取带空格的dom节点内容。我们用 innerText 获取到的文本信息是除掉空格的。但有时根据需求我们需要获取到完整的文本信息。用 textContent 就...
收起
DOM节点关系及节点操作
2020-05-03 12:21:25
DOM把HTML和XML文档视为一种树结构，这种结构称为节点树(DOM Tree)，浏览器载入文档后，文档中的标签被解析成一系列的节点，**节点是DOM的最小组成单位**。...DOM节点的属性：节点对象.nodeType；元素节点返...
收起
javascript
DOM节点属性
2019-04-15 09:51:57
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性： nodeName : 节点的名称 nodeValue ：节点的值 nodeType ：节点的类型一、nodeName 属性: 节点的名称，是只读的。...
收起
HTML DOM节点和属性
2019-12-28 15:44:39
HTML DOMHTML DOM 简介HTML DOM 节点DOM 节点（DOM Nodes）HTML DOM 节点树节点父、子和同胞节点间关系HTML DOM 属性编程接口innerHTML 属性nodeName 属性nodeValue 属性nodeType 属性查找 HTML DOM 简介 DOM ...
收起
angular获取dom节点
2020-11-26 16:09:35
angular获取dom节点 .html文件中 <div #myBox> dom节点 </div> 在.ts文件中引入 ViewChild import { ViewChild } from '@angular/core'; export class NewsComponent implements OnInit { //写在类...
收起
javascript typescript
JavaScript-dom节点操作
2020-07-09 10:54:36
dom节点操作js 操作dom节点什么是dom过程DOM数--所有的东西都是节点节点的类型---nodeType节点的查找节点的创建节点关系子节点关系父节点关系兄弟节点关系节点的操作增删改复制插入获取节点rect js 操作dom节点 什么...
收起
javascript js
DOM节点【DOM】
2017-08-20 19:19:33
DOM节点类型共有12种：元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 Node.TEXT_NODE(3) CDATA节点 Node.CDATA_SECTION_NODE(4) 实
收起
DOM 节点方法
2017-06-11 15:53:27
DOM节点方法 1.createElement() 创建元素节点 2.creatTextNode() 创建文本节点 3.添加（插入）节点（1）元素.appendChild(文本) 将文本加到元素节点将元素节点添加到父节点（2）元素.pa
收起

DOM节点

Dom节点

dom节点树、dom节点关系

一、dom节点树

遍历文档节点树

遍历元素节点树

二、dom节点关系

节点属性

父级属性

子级属性

同级属性

节点方法

dom节点

vue 获取dom节点 dom节点位置

$(Dom节点1 Dom节点2) 选择器中的两个Dom节点的包含关系

HTML DOM 节点

js学习二之操作 DOM 节点和 修改 DOM 节点 CSS 样式

dom4j添加节点的父节点_HTML DOM节点介绍

小程序更改dom节点的值_如何更改DOM节点值

HTML DOM节点

vue获取到dom节点_支持多个DOM节点的Vue指令会自动粘贴到顶部

DOM 节点操作

JavaScript 技术篇-textContent获取dom节点text文本内容带空格，js获取带空格的dom节点内容

DOM节点关系及节点操作

DOM节点属性

HTML DOM节点和属性

angular获取dom节点

JavaScript-dom节点操作

DOM节点【DOM】

DOM 节点方法

dom节点

Hive实战

IPC/JEDEC-J-STD-035：非密封电子元件的声学显微镜法-英文完整版（17页）

我的Git笔记.pdf

隐马尔可夫模型（HMM）-C++代码类资源

单片机完全学习课程全五季套餐

【数据分析-随到随学】Python语法强化与数据处理

876. 链表的中间结点

能计算3000多位十进制数乘法的C++小程序

bootstrap remote用法是什么

设计模式之工厂模式

matlab产生正弦波及.mif文件的程序-其它文档类资源

【2021】UI自动化测试Selenium3

acuity切台.pdf

javaSpring5 保姆式教程+傻瓜式笔记+附送Junit4的idear版教程.rar（本教程附带Spring所有需要的jar包+Junit的4.1.2j

华为Magic（HI3650V100方案）维修图PCB位置图（PDF格式）

第3章[3.6] 说透Ext JS的窗口及对话框用法

迭代器 Iterator

php base64互转pdf 将base64解析成pdf

旋转LED电子时钟.zip

数据类型转换、运算符、方法入门

js学习二之操作 DOM 节点和修改 DOM 节点 CSS 样式