JavaScript获取节点

1、通过ID获取，是id唯一：

document.getElementById("main ");

2、通过class名获取元素是类数组，拿到的是一个类数组，这个数组包含所有class是left的元素。类数组是从上往下拿元素

document.getElementsByClassName("left");

let l =document.getElementsByClassName("left");
console.log(l[0]);//获取类数组中第一个元素

3、通过标签名获取元素是类数组，同上(获取的是所有的p标签)

document.getElementsByTagName("p")

let l = document.getElementsByTagName("p");
console.log(l[0]);//获取类数组中第一个元素

4、通过属性name来获取元素是类数组

document.getElementsByName("属性值");

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div name="n1"></div><p name="n1"></p><div name="n2"></div>
</body>
<script>let l = document.getElementsByName("n1");console.log(l);
</script>
</html>

效果图：

5、通过选择器获取

document.querySelector("#main .nav") 拿到单个元素，就算页面中有多个符合条件，也只拿第一个元素

document.querySelectorAll(#banner li) 拿到所有符合条件的元素，拿到的是类数组

7、

特殊标签的获取

获取html标签 document.documentElement

获取head标签 document.head

获取body标签 document.body

获取title标签 document.title

8、通过获取的父节点来获取里面的子节点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="parse"><div class="sub"></div></div>
</body>
<script>let parse  = document.getElementsByClassName("parse")[0];//let sub = parse.getElementsByClassName("sub")[0];let sub = parse.querySelector(".sub");console.log(sub);
</script>
</html>

类数组只能使用（box.length）不能使用数组的方法，但可以通过Array.from(box)或 ...box 转换成数组

操作HTML内容

节点.innerHTML 获取/修改元素的HTML内容，会解析标签

节点.innerText 获取/修改元素的文本内容（老版本FF不支持这个属性，使用 .textContent 代替），不会解析标签。

JavaScript获取节点相关推荐

JavaScript获取节点类型、节点名称和节点值
DOM节点信息包括节点类型(nodeType).节点名称(nodeName)和节点值(nodeValue). 节点类型 DOM节点中,每个节点都拥有不同的类型. W3C规范中常用的 DOM节点类型有以 ...
html 获得文本节点,JavaScript获取节点——获取文本节点
0.前言上一章讲了如何获取获取标签(元素)节点,这一节来和大家说一下如何获取属性节点. 我还是用代码来讲解: 获取属性节点 var jsInput = document.getElementById ...
JavaScript获取节点的方法大全
1. 通过document节点获取(直接获取) 案例: <body><ul ><li id="one">一个</li><li ...
[轉]JavaScript获取HTML DOM父,子,临近节点
在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很 ...
轻松学习JavaScript二十：DOM编程学习之获取节点
我们这里所说的获取节点包含元素节点,属性节点和文本节点.通常,通过DOM我们就能够操作HTML元素.为了做到这件事情,您必须首先找到该元素.W3C提供了比较方便简单的定位节点的方法和属性,以便我们快 ...
JavaScript中节点获取，节点的属性，如何操作节点
任何 HTML 或 XML 文档都可以用 DOM 表示为一个由节点构成的层级结构. 一般来说在HTML中文档的节点分为三种: 1.元素节点通过querySelector获取的节点就是元素节点 ...
Javascript获取页面、屏幕尺寸大小参数
Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clien ...
html关于计时的函数,关于JavaScript获取时间函数及实现倒计时
关于JavaScript获取时间函数及实现倒计时 JavaScript获取当前时间函数 var time=new Date() 获取时间函数 Date() 返回当日的日期和时间. getDate() ...
html中获取浏览器窗口宽度,JavaScript 获取浏览器窗口的大小
简明现代魔法 -> JavaScript -> JavaScript 获取浏览器窗口的大小 JavaScript 获取浏览器窗口的大小 2010-04-16 程序演示: 获取浏览器当前窗口 ...

JavaScript获取节点

操作HTML内容

JavaScript获取节点相关推荐

最新文章

热门文章