js通用方法获取元素,节点父子关系查找

/*

*通用方式来获取元素

* 1.通过id来获取元素document.getElementById(‘属性名‘)

* 2.通过便签名来获取元素document.getElementsByTagName(‘属性名‘);得到的是一个数组

* 3.通过class属性来获取元素有兼容性问题document.getElementsByClassName(‘class属性名‘);得到是一个数组

* 4.通过name属性来获取元素存在兼容性问题document.getElementsByName(‘name属性名‘);返回一个数组

/*

*节点父子关系查找

* 1.获取所有的子节点,包括空格和制表符等

* a.先获取元素

* b.元素名.childNodes;

* 2.获取所有的标签节点

* 元素名.child;

* 3.获取第一个子节点

* 元素名.firstChild;

* 4.获取第一个标签元素

* 元素名.firstElementChild;

* 5.获取最后一个子节点

* 元素名.lastChild;

* 6.获取最后一个标签元素

* 元素名.laseElementChild

* 7.获取当前元素的上一个元素

* 元素名.previousSibling

* 8.获取上一个标签元素

* 元素名.previousElementSibling

* 9.获取下一个节点

* 元素名.nextSibling

* 10.获取下一个标签元素

* 元素名.nextElementSibling

* 11.通过元素获取父级元素

* 元素名.parentNode;

* 12.父级元素节点

* 元素名.parentElement

*/

/*

*快速获取元素节点的方法

* 1.获取所有表单的节点document.forms;

* 2.获取所有a标签的节点document.links;

* 3.快速获取img标签的节点

* a.document.images;

* b.document.getElementsBytagName(‘标签名‘);

*/

/*标签元素的操作

* 1.元素的属性添加,添加class属性

* a.setAttribute(‘属性名‘,‘属性值‘);

//属性更改css样式

* b.setAttribute(‘class‘,‘属性名‘);

* 2.元素的移除removeAttribute(‘要移除的属性名‘);

* 3.获取属性getAttribute(‘属性名‘);

*标签文本的操作

* 1.文本的获取

* a.innerHTML,可以获取元素的标签属性和值

* b.textContent只能获取纯文本,不能获取中间的标签

* 2.文本的设值 innerHTML = "要赋的值"

*样式的操作

* 1.样式的修改

* a.获取该类的属性document.(images,links,forms)

* b.使用for循环赋值

* 2.样式的获取:属性名.style.样式

*/

时间: 2024-12-15 06:58:48

js通用方法获取元素,节点父子关系查找的相关文章

轻松学习JavaScript二十一:DOM编程学习之获取元素节点的子节点和属性节点

我们这里所说的获取元素节点的所有子节点包含元素子节点和文本节点两种.还是拿上一篇博文的代码实例进行 分析: <span style="font-size:18px;"><span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

JS获取元素节点的子节点

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <titl

js 原生方法获取所有兄弟节点

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible"

获取元素节点(DOM基础 )

一.DOM 简介:以一种独立于平台和语言的方式访问和修改(添加.移动.改变或移除的方法和属性)一个文档(主要是网页)的内容和结构.是表示和处理一个HTML或XML文档的常用方法. 节点的定义:D(Web网页文档)O(document对象)M(网页文档的树形结构)M中树形结构可以理解为由节点组成.把每个标签看作一个节点.   节点的分类:以一个完成的标签为例<div id ="box">测试Div</div> 元素节点:是标签<div></div

获取元素节点

1.大纲 关于获取元素节点,主要有三种方式. getElementById() getElementsByTagName() getElementsByName() 2.第一种方式程序 在编写 HTML 文档时, 需确保 id 属性值是唯一的. 该方法为 document 对象的方法. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>I

JavaScript之怎样获取元素节点

JavaScript获取元素节点一共有三种方法,分别是通过元素ID.通过标签名字和通过类名字来获取: 1.通过元素ID属性的ID值来获得元素对象-getElementById() DOM提供了一个名为getElementById()的方法,这个方法将返回一个与括号里有着一样id值的元素节点对应的对象.他是document对象特有的函数,这个函数的参数只有一个,只能是你想要获得的元素的ID值,这个值必须放在单引号或者双引号里面. 注意:JavaScript语言区分字母大小写,所以在写getElem

js通用方法检测浏览器是否已安装指定插件(IE与非IE通用)

/* * 检测是否已安装指定插件 * * pluginName 插件名称 */ function checkPlugins(pluginName) { var np = navigator.plugins; if (window.ActiveXObject) { // IE // ActiveXObject的对象名 var activexObjectName = pluginName + "." + pluginName; try { var axobj = eval("ne

根据ClassName获取元素节点

功能描述: 通过ClassName获取元素节点,并解决兼容性问题 实现效果: 编码思路: 利用getElementsByTagName选出所有元素,再根据ClassName条件进行筛选 代码示例:

jquery outerHeight方法 outerWidth方法 获取元素实际宽度高度

以前写代码中,每当需要获取元素的实际"宽度"(这里的宽度是指元素宽度加上其边距)时,都需要用元素宽度加上margin值才行,今天发现一个叫outerWidth(options)的方法 ,很好用.完成了原来需要用一段来操作做的工作. 这个方法不适用于window 和 document对象,可以使用.width()代替. 下面是其简单介绍 outerWidth(options) 获取第一个匹配元素外部宽度(默认包括补白和边框). 此方法对可见和隐藏元素均有效. 返回值:Integer 一个