JavaScript基础插曲—获取标签，插入元素，操作样式

2022-10-02 20:18:19

Js基础

1：document.write()

这个是动态创建元素内容，利用js。这个可以利用js来创建元素，文本，标签等，document.write()与document.writeln()的区别就在于writeln（）输出内容后，会在源代码中换一行，而write()会紧挨着输出不会有任何换行。这个标签必须随页面一同加载显示。

在一个网页中引用其它网页可以使用js的document.write(html代码)，这样子生成。

2：最基本的dom遍历属性

àdocument.getElementById()

根据元素id获取元素，使用这个，不是集合，是单个的元素。

àdocument.getElementsByName()

但是这个特殊，根据元素的name获取元素,这个放回的是对象数组，和下面获取到的是集合只有上面的获取到的是单个的元素。在表单元素的时候使用最好。

à document.getElementsByTagName()

这个也是获取元素，根据页面上标签的名字获取所有的元素，获取到的是个集合。

Eg:按钮实现里面内容变化

<script type="text/javascript">
window.onload = function() {
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = function () {
for (var c = 0; c < inputs.length; c++) {
if(inputs[c].type=="button") {
inputs[c].value = '哈哈哈';
}
}
this.value = '呜呜';
};
}
};
</script>

Eg：利用计时器实现使用说明的等待时间。

<script type="text/javascript">
window.onload = function () {
var ss = 4;
//这里启动计时器
var time=setInterval(function() {
var sa = document.getElementById('btn1');
if (ss > 0) {
sa.value = '请稍等几分钟' + ss + '';
ss--;
} else {
sa.value = '同意';
sa.disabled = false;
clearInterval(time);
}
}, 1000);
};
</script>

àdocument.createElement('标签名');

<script type="text/javascript">
window.onload = function() {
document.getElementById('btn').onclick = function() {
var alink = document.createElement('a'); //动态创建元素
alink.href = 'http://www.baidu.com';
alink.target = '_black';
alink.innerText = '百度';
document.getElementById('div1').appendChild(alink); //将其添加到div中.
var btton = document.createElement('input');
btton.type = 'text';
document.getElementById('div1').appendChild(btton);
};
};
</script>

删除层中元素

document.getElementById('btn1').onclick = function() {
var sss = document.getElementById('div1');
while (sss.firstChild) {
sss.removeChild(sss.firstChild);
}
};

***：在程序中需要判断类型，我们可以利用typeof()来得到其变量的类型。

innerText.和innerHTML的区别

这个就是

Eg:往table中添加内容。

下面的dict格式是json的格式，也是一种键值对的形式。

<title></title>
<script type="text/javascript">
var dict = {
'百度': 'http://www.baidu.com',
'京东': 'http://www.jd.com',
'淘宝': 'http://www.taobao.com',
};
window.onload = function() {
document.getElementById('btn').onclick = function() {
var table = document.createElement('table');
table.border = '1';
table.backgroundColor = 'red';
for (var key in dict) {
var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.innerHTML = key;
var td2 = document.createElement('td');
td2.innerHTML = '<a href="' + dict[key] + '">' + key + '</a>';
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);
}
document.body.appendChild(table);
};
};
</script>

Js操作样式

注意：

修改元素的样式不是设置class属性，而是className属性。class是js中的一个保留字，属性不能使用关键字，保留字就变为了classname。

使用方式，属性名.style，注意这里的属性名可能和css中的名字不一样，我们要注意区分。

<script type="text/javascript">
window.onload = function() {
document.getElementById('btn').onclick = function() {
var div = document.getElementById('div').style;
div.backgroundColor = 'red';
div.border = '1px solid blue';
div.width = '200px';
div.height = '400px';
div.fontFamily = '楷体';
div.styleFloat = 'right';
};
document.getElementById('btn1').onclick = function() {
document.getElementById('div').style.display = 'none';
};
};
</script>