DOM操作获取标签方法、数据类型

一、操作 html 页面

document.getElementById('box'); // 选中一个id为box的标签

可以理解为从文档里面通过一个 id:box 来获取一个元素
// => document 文档 ⇒ get 得到 ⇒ Element 元素 ⇒ By 通过 ⇒ id:box

二、操作标签内容：

innerHTML – 会解析标签

var box = document.getElementById("box");
box.innerTHML = "<p>我被添加到了盒子里面</p>";console.log(box.innerHTML); // <p>....</p>

innerText – 不会解析标签

var box = document.getElementById("box");
box.innerText = "<p>我会添加到box里面</p>";console.log(box.innerText); // 我会添加到box里面

三、变量：

变量的初始化

var name = 'mary';
var lastName = 'bob';

变量必须先声明再赋值

a = 123;
console.log(a); // 123 -- 理论上是不可以的// 必须先声明再赋值
var a;
a = 123;// 或者直接一步到位
var a = 123;

声明变量，没赋值默认为 undefined

var a;
console.log(a); // undefined

变量不声明就使用会报错

console.log(a); // a is not defined

不使用 var 声明的变量，会变成全局变量，挂到 window对象 上面

a = 123 === window.a = 123

变量多次赋值以最后一次赋值为准

var a = 132;
a = 465;
console.log(a); // 465

var 定义多个变量，用逗号隔开

// bad
var a = 123;
var b = 456;
var c = 789;// good --> 规范的写法
var a = 123,b = 456,c = 789;

四、变量的命名规则

严格区分大小写

var abc = 123;
var ABC = 123;
// 这是两个不同的变量

见名知意

var fadfaf13 = 134423; × // 别人不知道你这是什么var inputValue = 131;
var keyCode = 65;

不能以数字开头，只能包含字母、下划线、数字和$(美元符)

var 1abc = 113; ×
var a1 = 123;
var _name = 133;
var $val = 123;

不能使用中文

var 你好 = 133; ×

不能使用 关键字(已经有了特殊功能的) 和 保留字(未来可能使用的文字)

var class = ...; ×
var var = ...; ×

必须遵守 驼峰命名法（大驼峰、小驼峰）

var myBox = ...;
var thisTemp = ...;

五、DOM操作之获取标签方法

通过 id 获取

var box = document.getElementById("box");

通过 class 获取

var aStu = document.getElementsByClassName("names");

通过 标签名 获取

var aUl = document.getElementsByTagName("ul");

通过 name (表单)获取

var aName = document.getElementsByName("username");

获取 一堆标签中的第一个

var oLi = document.querySelector("#box > ul > li");

获取 一堆标签

var aLi = document.querySelector("#box > ul > li");

获取 html 标签

var html = document.documentElement;

获取 body 标签

var body = document.body;

获取 head 标签

var head = doucment.head;

获取网页标题 title

var titleVal = document.title;

建议获取单个用 getEle..... 获取多个用 querySelectorAll
获取多个元素，最终得到的是一个元素数组，取的话用索引就可以了 arr[0]

六、给元素添加样式：

Element.style.属性名 = 属性值

var box = document.querySelector('box');
box.style.display = 'none';

element.style.classText

box.style.classText = `width: 200px;height: 200px;background-color: red;margin: 10px 0 0 10px;
`;

样式属性比较多就用 classText ，样式少就直接加

Element.classList – 操作已经存在的 class

length ⇒ 返回类列表里面类名的个数
add() ⇒ 添加一个或者多个类名
remove()⇒ 移除一个或者多个类名
toggle(class, [true | false]) ⇒ 第二个参数可选，用于强制添加或者移除类名，不管这个类名是否存在。为 true 就是添加，false 移除
contains(class) ⇒ 判断指定的类名是否存在，返回 true / false
item(index) ⇒ 返回索引对应的类名，从 0 开始

let title = document.querySelector('.title');
// 添加类
title.classList.add('red', 'pink', 'blue', 'green', 'yellow', 'purple', 'brown');
// 输出一共有多少个类名
console.log(title.classList.length); // 8
// 移除类名
title.classList.remove('red', 'pink');
console.log(title.classList.length); // 6
title.onclick = function () {// 切换类title.classList.toggle('show');
}
// 判断制定的类名是否存在
console.log(title.classList.contains('title'));
// 返回元素中索引值对应的类名
console.log(title.classList.item(0)); // title

DOM操作获取标签方法、数据类型相关推荐

DOM操作之getAttribute方法
DOM操作之getAttribute方法 1.getAttribute()方法介绍 elementNode.getAttribute(name):获取节点的属性,name是属性名称,比如ID,titl ...
Web APIs /APIs --DOM简述/DOM中获取元素方法/事件（含鼠标事件）/操作（含案例）
Web APIs Web APIs 和 JS 的关联性: Web APIs是 W3C 组织的标准,主要学习DOM 和 BOM Web APIs是 JS 所独有的部分主要学习页面交互功能 Web AP ...
Dom操作（标签--增、删、移动）
Dom操作移动或者插入标签的方法 1.append()和appendTo():在现存元素的内部,从后面放入元素: 先声明一个变量用来保存新标签 var $span = $('这是一个span元素' ...
JS获取标签方法及兼容处理
document.getElementById('Id名'); // 所有浏览器 document.getElementsByTagName('标签名'); // 所有浏览器 document.get ...
dom操作获取盒子宽高位置的三种方法,offset/scroll/client三大家族使用详解(附源码及注释)
结论:页面body的高度==视口的高度+滚动条滚动的距离. 这是一个恒等式,看完本篇博客,你将了解offset/scroll/clent三大事件获取宽高位置的具体含义,运用所学内容可以推导出这样的恒等 ...
HTML5常见标签的使用以及DOM操作
一.HTML5的介绍 Web 技术发展时间线 1991 HTML 1994 HTML2 1996 CSS1 + JavaScript 1997 HTML4 1998 CSS2 2000 XHTML1( ...
Python|并发编程|爬虫|单线程|多线程|异步I/O|360图片|Selenium及JavaScript|Scrapy框架|BOM 和 DOM 操作简介|语言基础50课：学习（12）
文章目录系列目录原项目地址第37课:并发编程在爬虫中的应用单线程版本多线程版本异步I/O版本总结第38课:抓取网页动态内容 Selenium 介绍使用Selenium 加载页面查找 ...
常见的DOM操作有哪些
这里是修真院前端小课堂,本篇分析的主题是 [常见的DOM操作有哪些] 这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文 ...
json对象、字符串-数组和数学对象中的相关方法、BOM对象、JS中的DOM操作
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 json对象字符串对象的相关方法获取字符串长度 length 清除两侧的空白 trim [ python的strip ] ...

DOM操作获取标签方法、数据类型

DOM操作获取标签方法、数据类型相关推荐

最新文章

热门文章