javaScript DOM节点树

1.

例如:

<html>

<head>

<title>节点树<title/>

<head/>

<body>

<p>学生信息<p/>

<ul id ="ul1">

<li>姓名<li/>

<li id="sex">性别<li/>

<li>年龄<li/>

<ul/>

<body/>

<html/>

html的子节点是body和head而body和head它们俩是兄弟节点,父节点是html。head的子节点是title。

2.访问指定元素(方法)

getElementById();注:获得指定id的元素,返回的是一个对象。getElementsByName();注:获得指定名称的元素,返回的是一个集合。getEilementsByTagName() ;注:获得指定标签的元素,返回的是一个集合。getElementsByClassName();注:获得指定Class的元素,返回的是一个集合。

例如:

获得id为sex的li标记:

var v = document.getElementById("sex");

获得所有的li标记

var v = document.getEliementsByTagName("li");

3.访问指定元素(属性)

parentNode;注:获得元素的父标记,返回一个对象,因为每个标记只有一个父标记。chidNodes;注:获得指定元素的子标记,空格也属于子标记,返回的是一个集合。firstChild;注:获得第一个子节点,返回的是一个对象。lastchild;注:获得最后一个子节点,返回一个对象。previousSibling;注:获得前一个兄弟节点,返回一个对象。nextSibling;注:获得后一个兄弟节点,返回一个对象。

例如:

获得li的父标记ul

var v = document.getElementById("sex").parentNode;

获得ul的子标记li

var v = document.getElementById("ul1").childNodes;

时间: 2024-10-14 12:07:07

javaScript DOM节点树的相关文章

JS遍历DOM 节点树的实现

本文将分享 DOM 节点树深度遍历.广度遍历代码. 假定我仅遍历 body 且其结构如下: <body> <section class="container"> <div class="left"> <div class="menu"></div> </div> <div class="right"> <div class="b

JavaScript DOM节点和文档类型

以下的例子以此HTML文档结构为例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="demo"> <ul id="contents">

javascript dom节点x

一,js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test"); var parent = test.parentNode; // 父节点 var chils = test.childNodes; // 全部子节点 var first = test.firstChild; // 第一个子节点 var last = test.lastChile; // 最后一个子节点 var previous = test.previ

javascript dom节点的

一,js 获取元素(父节点,子节点,兄弟节点) 按 Ctrl+C 复制代码 按 Ctrl+C 复制代码 二,jquery 获取元素(父节点,子节点,兄弟节点) $("#test1").parent(); // 父节点 $("#test1").parents(); // 全部父节点 $("#test1").parents(".mui-content"); $("#test").children(); // 全

javascript DOM节点

获得子节点方式: 1.将文本内容也当成节点 childNodes firstChild lastChild 2.获得标签为内容的节点 children firstElementChild lastElementChild 原文地址:https://www.cnblogs.com/hjw123/p/10885648.html

前端学习系列之JavaScript DOM

JavaScript DOM简介 介绍 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM编程: DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准 HTML DOM节点树 通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问.所有 HTML 元素(节点)均可被修改,也可以创建或删除节点 理解几个概念,html标签没有父辈,没有兄弟,所以html标签为根标签.head标签是htm

JavaScript DOM编程艺术 读书笔记

3 DOM DOM分别指document,object和model. DOM中包含的节点主要分为三种:元素节点.文本节点和属性节点.DOM的原子是元素节点,标签的名字就是元素的名字,元素可以包含其他的元素.没有被包含在其他元素里的唯一元素是<html>元素,它是树节点的根元素:在XHTML文档里,文本节点总是被包含在元素节点的内部.但并非所有的元素节点都包含有文本节点:属性节点用来对元素做出更具体地描述. 有3种DOM方法可获取元素节点,分别是通过元素ID.通过标签名字和通过类名字来获取. 1

javascript-DOM 基本概念及DOM节点

一:属性和方法 属性:是节点(HTML 元素)的值,您能够获取或设置(比如节点的名称或内容). 方法:是我们可以在节点(HTML 元素)上执行的动作.(比如添加或修改元素). 二:HTML DOM 定义: DOM(Document Object Model):文档模型, HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法. HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准. 在js中通过document这个对象提供的方法 三:HTML DOM 节

JavaScript DOM 编程艺术(第2版)读书笔记 (7)

动态创建标记 一些传统方法 document.write document.write()方法可以方便快捷的把字符串插入到文档里. 请把以下标记代码保存为一个文件,文件名就用test.html 好了. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Test</title> </head>