`

DOM访问元素 创建节点 innerHTML

 
阅读更多

DOM访问元素
document.getElementsByTageName(tagname)相关属性和方法
var obj = document.getElementsByTageName(tagname);
obj.length();//数组长度
obj[0].tagName;//标签名
obj[0].nodeValue;//标签值
obj[0].hasChildNodes()//是否有子结点
obj[0].childNodes[0].value

document.getElementById("id");


DOM创建新节点:
var obj = document.createElement("p");//新建<p>节点
var obj2 = document.createTextNode("text content");//创建一个文本节点
obj.appendChild(obj2);//将obj2节点赋予obj节点
document.body.appendChild(obj);//将obj节点赋予body节点


innerHTML:表示标签之间的所有内容,可以读可以写
document.getElementById("id").innerHTML();

分享到:
评论

相关推荐

    DOM节点中元素节点与文本节点操作方法.pdf

    DOM提供了一系列方法来操作这些节点,如`createElement`和`appendChild`用于创建和添加新元素,`replaceChild`用于替换节点,`firstElementChild`和`lastElementChild`用于访问元素子节点,以及`nextElementSibling`...

    JS操作DOM元素属性和方法大全

    - `style`: 直接访问元素的行内样式,例如`element.style.color = 'red'`。 - `getComputedStyle`: 获取元素的最终计算样式,包括继承和浏览器默认样式。 - `classList`: 操作元素的类名,如添加、移除、切换类。...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四:HTML DOM-文档元素的操作(二)

    DOM是HTML和XML文档的一种结构化表示,它将网页内容转化为树形结构,使得JavaScript可以方便地访问和修改每个元素。在这个部分,我们将学习更多关于DOM元素操作的方法和技巧。 首先,`getElementById()`是获取特定...

    第06章 DOM节点操作(下)

    DOM中的每个元素都是一个节点,包括元素节点、属性节点、文本节点等。元素节点(如`&lt;div&gt;`、`&lt;p&gt;`)是文档结构的主要构成部分,属性节点存储元素的属性信息(如`class`、`id`),而文本节点则包含元素内的文本内容。...

    第06章 DOM节点操作(上)

    我们可以使用DOM API来访问这些节点,比如通过`document.getElementById`、`document.getElementsByTagName`等方法找到特定的元素。 在DOM操作中,我们关注的核心概念有: 1. **节点类型**:包括元素节点(Element...

    JavaScript程序设计——DOM访问实验报告.docx

    实验报告的主题是“JavaScript程序设计——DOM访问”,其目的是深入理解和掌握DOM(Document Object Model)在JavaScript中的应用,包括文档对象的属性、方法以及使用方式。DOM是HTML和XML文档的标准化表示,允许...

    html dom 底层 javascript

    3. **添加元素**:使用`createElement()`创建新的DOM节点,然后用`appendChild()`将其添加到文档中。 4. **删除元素**:使用`removeChild()`从文档中移除节点。 #### DOM 中的重要数据类型 在DOM中,有几个关键的...

    JavaScript DOM元素常见操作详解【添加、删除、修改等】

    添加元素通常需要先创建一个新的元素节点,然后将其插入到DOM树中的合适位置。常用的方法有: - 创建新元素:使用`document.createElement`方法。 - 插入元素:使用`appendChild`、`insertBefore`等方法。 删除...

    DOM 节点操作 【微重点】【案例】.pdf

    - 访问元素节点:可以通过例如document.getElementById()、document.getElementsByTagName()、document.getElementsByClassName()等方法来访问特定的元素节点。 - 创建新元素节点:可以使用document.createElement()...

    JS中使用DOM来控制HTML元素.docx

    8. **DOM节点操作**: 包括访问节点(如`parentNode`, `firstChild`, `nextSibling`等),创建节点(`createElement`, `createTextNode`),修改节点(`innerHTML`, `textContent`, `setAttribute`),删除节点(`...

    原生JS经典小项目-DOM练习

    通过JavaScript,我们可以访问并操作这些节点,比如获取元素、添加或删除元素,以及更新元素内容。 在JavaScript中,我们经常需要对DOM节点进行集合操作,这就涉及到了数组方法。尽管DOM节点集合本身并不是真正的...

    dom教程 dom文档对象实例教程

    5. **修改节点**:通过`innerHTML`、`innerText`、`setAttribute`等属性修改元素的属性和内容。 6. **事件处理**:绑定和触发事件,如`addEventListener`和`removeEventListener`,以及事件冒泡和事件捕获的概念。 7...

    非常实用的DOM文档对象中文手册

    9. **选择器API**:除了基本的节点访问,DOM还引入了CSS选择器API,如`querySelector()`和`querySelectorAll()`,可以更方便地根据CSS选择器选取元素。 10. **DOM事件和事件流**:DOM事件模型包括冒泡、捕获和目标...

    javascriptDOM

    3. **访问元素**:使用`getElementById()`、`getElementsByClassName()`、`getElementsByTagName()`等方法来查找特定的元素。例如,`document.getElementById('myID')`将返回具有指定ID的元素。 4. **选择器API**:...

    HTML DOM 参考手册 电子书

    5. **遍历DOM**:遍历DOM树是常见操作,比如查找所有子节点、向上找到父节点或者找到同级元素。`childNodes`、`firstChild`、`lastChild`、`nextSibling`和`previousSibling`等属性在遍历时非常有用。 6. **创建和...

    htmlDOM.rar_DOM_HTML DOM_HTML dom_HTMLD_w3c htmld

    DOM是一个接口,使得任何编程语言都可以访问和操作网页内容。在这个“htmlDOM.rar”压缩包中,我们找到了一个名为“htmlDOM方法手册.chm”的文件,这很可能是关于HTML DOM的详细参考指南,特别适合初学者学习。 DOM...

    14jQueryDOM节点操作.docx

    在jQuery中,创建节点变得更加简单。只需使用`$()`函数,可以直接传入HTML结构来创建节点: ```javascript var div = $("这是一个通过 jQuery 动态添加的 div&lt;/div&gt;"); ``` 2. **jQuery节点的插入** - **内部...

    HTML DOM 教程

    - **节点(Node)**:DOM中的基本单元,包括元素节点(如`&lt;div&gt;`)、文本节点、注释节点等。 - **元素(Element)**:HTML标签对应于DOM中的元素节点,例如`&lt;body&gt;`、`&lt;p&gt;`等。 - **属性(Attribute)**:元素上...

    Javascript_Dom操作案例

    - `document.createElement()`:创建新的DOM元素。 - `appendChild()`, `insertBefore()`, `replaceChild()`:这些方法用于在DOM树中添加、插入或替换元素。 4. **更新DOM元素**: - `innerHTML`:用于设置或...

Global site tag (gtag.js) - Google Analytics