【後转前要多久】# Day25 JS - 选取、操作DOM标签

选择HTML标签元素

取得元素 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 = "成功执行!!";
}

HTML标签、栏位、属性操作

取得栏位内容值

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标签

两种动态操纵HTML标签的方式

  • innerHTML 组完字串对语法渲染,效能快,安全性较差(XSS跨站攻击)。除非来源是可以信任的资料(自己的data)而非使用者输入,否则尽量少用。
  • createElement 以DOM节点来处理,效率较差,安全性较高

innerHtmlinnerTexttextContent 比较

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及Process Monitor

今天预计要来介绍两支程序,让编辑登录档稍微安全的组策略编辑器(gpedit.msc)跟监控系统大小变...

【系统程序】1-3简化指令电脑(SIC)

1-3简化指令电脑(SIC) 简介 简化指令电脑(Simplified Instructional ...

Day 03:Android 开发工具

前言 在开始写 Android 之前,想先介绍如何提升写 code 的速度, 如果从现在开始习惯,并...

Motion 效果基本项目

上一篇介绍了Motion Graphic制作的基本流程,接下来要分析一下几个常用的动态效果。 Mot...

Day06 - Docker 简介,Container是什麽 ?

什麽是 Container ? 在了解 Container 之前,先来聊聊服务是如何建立的。传统服务...