浏览器中的JavaScript
浏览器中JavaScript
如何选取元素
element = dcoument.getElementById("idName")
根据IdName来选取元素
element = document.getElementById("id")
element = dcoument.getElementByClassName("className")
根据类的名字来选取元素
element = document.getElementsByClassName("className")
element = document.getElementsByTagName("tagName")
根据Tag名来选取元素
element = document.getElementsByTagName("tagName")
下面的就是通过css选择器来选取元素的方法
element = document.querySelector(selectors);
文档对象模型Document
引用的querySelector()
方法返回文档中与指定选择器或选择器组匹配的第一个 html元素Element
。 如果找不到匹配项,则返回null
。
var el = document.querySelector(".myclass")
var el = document.querySelector("div.user-panel.main input[name='login']")
选择器可以是使用的css选择器(class,id,属性等)
elementList = parentNode.querySelectorAll(selectors)
选取符合条件的元素列表项
返回的NodeList像使用数组那样使用即可
选取后向其写入或者读取呢?
Element.textContent
ie8不支持,会替换掉原先的内容
读取内容
let content = Element.textContent
写入内容
Element.textContent = Element.textContent + "!"
<ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li>jquery</li><li>HTML5</li><li>CSS3</li><li>ES6</li></ul><script>let Elements = document.querySelectorAll("li")Elements.forEach((items,index)=> {console.log(items.textContent)items.textContent = items.textContent + " : " + index})</script>
HTML : 0 CSS : 1 JavaScript : 2 jquery : 3 HTML5 : 4 CSS3 : 5 ES6 : 6
Element.innerText
var renderedText = HTMLElement.innerText;
HTMLElement.innerText = string;
与textContent的区别
- textContent 会获取所有元素的内容,包括
script
和style
元素,然而 innerText 不会。 innerText
受 CSS 样式的影响,并且不会返回隐藏元素的文本,而textContent会。- 由于
innerText
受 CSS 样式的影响,它会触发重排(reflow),但textContent
不会。
<script>let content1 =document.querySelector("body").textContentlet content2 =document.querySelector("body").innerTextconsole.log("content1" + content1)console.log("content2" + content2)</script>
content1HTML : 0CSS : 1JavaScript : 2jquery : 3HTML5 : 4CSS3 : 5ES6 : 6let Elements = document.querySelectorAll("li")Elements.forEach((items,index)=> {console.log(items.textContent)items.textContent = items.textContent + " : " + index})let content1 =document.querySelector("body").textContentlet content2 =document.querySelector("body").innerTextconsole.log("content1" + content1)console.log("content2" + content2)content2HTML : 0CSS : 1JavaScript : 2jquery : 3HTML5 : 4CSS3 : 5ES6 : 6//innerText忽略了script里的内容,而textContent完整的显示了出来
Element.innerHtml
const content = element.innerHTML;
element.innerHTML = htmlString;
知道了如何为元素添加和读取内容,那么如何创建新的元素呢?
document.createDocumentFragment()
是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。在DOM树中,文档片段被其所有的子元素所代替。
因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(对元素位置和几何上的计算)。因此,使用文档片段通常会带来更好的性能。
< !-- html-->
<ul id="ul">
</ul>var element = document.getElementById('ul'); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera', 'Safari', 'Internet Explorer'];
//js
browsers.forEach(function(browser) {var li = document.createElement('li');li.textContent = browser;fragment.appendChild(li);
});element.appendChild(fragment);
document.createElement("tag")
创建指定的HTML节点
let element = document.createElement(tagName[, options]);
document.createTextNode()
创建新的文本节点
var text = document.createTextNode(data)
知道了如何创建元素那么如何将元素添加到DOM中呢?
添加
var child = node.appendChild(child)
方法将一个节点添加到指定父节点的子节点列表末尾
node
是要插入子节点的父节点.child
既是参数又是这个方法的返回值// 创建一个新的段落p元素,然后添加到body的最尾部 var p = document.createElement("p"); document.body.appendChild(p);
注意:
如果被插入的节点已经存在于当前文档的文档树中,则那个节点会首先从原先的位置移除,然后再插入到新的位置.
如果你需要保留这个子节点在原先位置的显示,则你需要先用
Node.cloneNode
方法复制出一个节点的副本,然后在插入到新位置.
var dupNode = node.cloneNode(deep)
node
将要被克隆的节点dupNode
克隆生成的副本节点deep
可选,是否采用深度克隆,如果为true,
则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.
删除和替换
Node.removeChild(n)
node是要删除的节点的父节点,而n是你要删除的节点(使用获取方法对其进行获取)
Node.replaceChild(newNode,oldNode)
使用新的节点替换旧的节点
如何通过改变类来控制元素的样式
这个类可以是新创建的或者原先有的,通过控制类的存在与否使得样式改变
元素的classList
属性
let elementClasses = elementNodeReference.classList;
属性就有方法
add( String [, String] )
添加指定的类值。如果这些类已经存在于元素的属性中,那么它们将被忽略。
remove( String [,String] )
删除指定的类值。
item ( Number )
按集合中的索引返回类值。
toggle ( String [, force] )
当只有一个参数时:切换 class value; 即如果类存在,则删除它并返回
false
,如果不存在,则添加它并返回true
。当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则删除它
contains( String )
检查元素的类属性中是否存在指定的类值。
replace( oldClass, newClass )
用一个新类替换已有类。
自定义数据属性
data-name
自定义属性可以快速通过document.querySelectorAll('[data-name="name"]')
获取到,还可以在某些类似于图片地址的懒加载时设置自定义属性将地址先存于内,然后使用时替换即可!
转载于:https://www.cnblogs.com/daixixi/p/11046639.html
浏览器中的JavaScript相关推荐
- 第十一章:WEB浏览器中的javascript
客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...
- JavaScript 编程精解 中文第三版 十三、浏览器中的 JavaScript
十三.浏览器中的 JavaScript 原文:JavaScript and the Browser 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译 部分参考了<JavaSc ...
- 别问,问就是我差点在所有浏览器中注入 JavaScript 代码
聚焦源代码安全,网罗国内外最新资讯! 专栏·供应链安全 数字化时代,软件无处不在.软件如同社会中的"虚拟人",已经成为支撑社会正常运转的最基本元素之一,软件的安全性问题也正在成为 ...
- 《JavaScript权威指南第7版》第15章 Web浏览器中的JavaScript 15.1 15.2 15.3
第15章 Web浏览器中的JavaScript 15.1 网络编程基础 15.1.1 HTML script 标签中的JavaScript 模块 指定脚本类型 脚本运行时:异步和延迟 按需加载脚本 1 ...
- 如何在Google Chrome浏览器中启动JavaScript调试器?
使用Google Chrome浏览器时,我想调试一些JavaScript代码. 我怎样才能做到这一点? #1楼 在Chrome浏览器中按F12功能键以启动JavaScript调试器,然后单击" ...
- 在浏览器中调试 JavaScript
文章目录 1.使用console.log() 2.使用调试器 3.设置断点 参考文档 在本教程中,您将借助示例了解 JavaScript 中的调试. 在编写程序时,您可能并且将会遇到错 ...
- VS Code使用系列 -- 在浏览器中调试javascript(browser app)
环境安装 插件1:Live Server 插件2:JavaScript Debugger 使用步骤 1,从状态栏启动Live Server(点击"Go Live") 如果状态栏被隐 ...
- svg html转换器,如何在浏览器中使用JavaScript将HTML SVG节点转换为Base64
尽管通常情况下, 我们不应该将这种逻辑用于生产资料, 因为总有更好的选择来阻止你执行此操作, 有时这并不取决于你, 而是取决于第三方.无论你是从Web上剪贴内容, 还是创建修改某些矢量图像的自动化脚本 ...
- web浏览器中的javascript
window 对象中其中一个最重要的属性是document,它引用document对象,后者表示显示在窗口中的文档.document对象有一些重要方法,比如getElementById(),它可以基于 ...
最新文章
- 一份来自上海院校的考研预调剂系统已开放名单!
- linux下必看的60个命令
- (二)nimlang web开发 hello world jester
- JAVA遇见HTML——JSP篇(JSP内置对象上)
- iOS攻防——(四)class-dump-与-Dumpdecrypted-使用
- 使用 Spring 2.5 注释驱动的 IoC 功能
- 字符串处理 —— 回文串相关 —— 回文串的判断
- Mac下Intellij IDea发布Web项目详解一
- 6月第4周全球域名注册商(国际域名)新增注册量TOP22
- mod_signalwire.c:371 Curl Result 1, Error: Protocol https not supported
- 硬件算法与软件算法实现区别通俗易懂
- 高考全国卷导数题分类
- 低级格式化软件测试,低级格式化,几款优秀的低级格式化工具对比制作步骤
- python开发网页视频播放器_python实现媒体播放器功能
- 怎样在xlsx中加入图片——怎样在excel中加入图片
- 什么是微前端及微前端优缺点
- C# Winform控件贴透明png图片遇到的问题
- 2016年新运维:论《普通运维人员就是秋后的蚂蚱》
- 转计算机大牛-崔添翼
- 线性嵌套实例(三个小实例)
热门文章
- 经验 | 如何使用Python进行可视化?
- mysql无损复制_MySQL无损复制(转)
- 两种方式带你爬点你想要的东西
- 小白来学C语言之字符串与指针
- 卷积神经网络实现多个数字识别
- echarts 三环圆环_echarts实现环形进度图
- airpods pro连接安卓声音小_airpods pro 麦克风声音小
- python 日期 格式转换 英文_量化数据预处理-中文日期(含)转英文日期
- mysql使用条件限制乐观锁_使用Mysql乐观锁解决并发问题
- 计算机一级office考试题库及答案,2016下半年计算机一级msoffice考试试题及答案