getElementBy
document.getElementById('id')
回传符合ID的单一物件,id前面不用加 #
。因为id不会重复,只会回传一笔资料。
document.getElementsByClassName('class')
class前面不用加 .
。回传符合的阵列型式物件
querySelector
HTML
<body>
<h1 class="h1">
<div class="class">Just For Test</div>
<div class="class">Just For Test</div>
<div class="class">Just For Test</div>
</h1>
<script src="index.js"></script>
</body>
querySelector
只针对符合的第一笔资料
var el = document.querySelector('.class');
console.log(el);
el.textContent = "成功执行!!";
querySelectorAll
多选,捞取符合的全部资料,回传阵列
JS
var els = document.querySelectorAll('h1 .test'); // 多重选择器 可以连结多个 Selector
console.log(els) // [div.test, div.test, div.test]
for(var i = 0; i < els.length; i++){
els[i].textContent = "成功执行!!";
}
var data = document.getElementById('id').value;
document.getElementById('id').textContent = "抹茶";
var a = el.getAttribute('href') // 取得`<a> href 属性`
var el = document.querySelector('.h1 a');
var text = el.textContent; // 取得标签内容文字
var html = el.innerHTML;
HTML
<body>
<h1 class="h1">
<div class="class">Just For Test</div>
<div class="class">Just For Test</div>
<div class="class">Just For Test</div>
<a href="#">我是连结</a>
</h1>
<script src="index.js"></script>
</body>
CSS
#website{
background-color: yellow;
}
JS
var el = document.querySelector('.h1 a')
el.setAttribute('href','https://gjlmotea.com'); // 改变`<a> href 属性`
el.setAttribute('id', 'website'); // 动态新增`id`,就可以吃到样式了
两种动态操纵HTML标签的方式
innerHTML
组完字串对语法渲染,效能快,安全性较差(XSS跨站攻击)。除非来源是可以信任的资料(自己的data)而非使用者输入,否则尽量少用。createElement
以DOM节点来处理,效率较差,安全性较高innerHtml
、innerText
、textContent
比较HTML
<body>
<p id="main">我是段落。</p>
<script src="index.js"></script>
</body>
JS
var el = document.querySelector('#main');
str = "<h1>今天天气真好呀~</h1>"
el.innerHtml = str+str;
innerHtml
修改内部HTML(会覆盖掉当前的HTML内容),可直接塞<tag>
HTML
<body>
<ul class="list"></ul>
<script src="index.js"></script>
</body>
JS
var el = document.querySelector('.list')
var displayText = "Google";
var url = "https://google.com";
el.innerHTML = '<li><a href="'+ url + '">' + displayText + '</a></li>';
innerText
与textContent
雷同
仅返回可见文本
textContent
塞进去的特殊符号文字会被转码成HtmlEncode
<
: <
>
: >
返回完整文本
createElement
透过JS创建元素、描述元素节点,
再在挂载到其他节点上
不会动到、删除到其他节点
appendChild
依序加在後面
HTML
<body>
<h1 class="h1">建立内容中...</h1>
<script src="index.js"></script>
</body>
CSS
.blue{
color: blue;
}
JS
var str = document.createElement('p'); // 创建元素
str.textContent = "建立内容完毕!!"; // 描述内容
str.setAttribute('class','blue');
document.querySelector('.h1').appendChild(str); // 在母节点挂上欲挂载的子节点
<<: 【程序】基础沟通问题 转生成恶役菜鸟工程师避免 Bad End 的 30 件事 - 27
>>: 自动化 End-End 测试 nightwatch-html-reporter
今天预计要来介绍两支程序,让编辑登录档稍微安全的组策略编辑器(gpedit.msc)跟监控系统大小变...
1-3简化指令电脑(SIC) 简介 简化指令电脑(Simplified Instructional ...
前言 在开始写 Android 之前,想先介绍如何提升写 code 的速度, 如果从现在开始习惯,并...
上一篇介绍了Motion Graphic制作的基本流程,接下来要分析一下几个常用的动态效果。 Mot...
什麽是 Container ? 在了解 Container 之前,先来聊聊服务是如何建立的。传统服务...