赵工的个人空间

JavaScript操控网页元素

JavaScript可以对各种网页元素进行操控，也就是可以通过代码就能添加网页元素、删除网页元素、修改网页元素内容、修改网页元素的显示样式等，非常方便。
1. 获取网页元素：
1）使用id获取：
JavaScript使用document.getElementById("idName")来获取一个特定id的网页元素，这个id必须是此网页元素中唯一的，在html标记的属性中使用id="idName"来进行设置。一般把获取的这个特定网页元素幅值给一个常量或变量，以便以后使用：
const inval=document.getElementById("inval");
2）使用标记获取：
tag称为标记或称标签，也就是使用<和≷括起来的有特定含义的符号，如div、span、p、img、a等等，可以使用getElementsByTagName("tagName")来获取。注意，这种方法获取到的是一个数组，要按数组进行操作。
var parray=document.getElementsByTagName("p");;
当然也可以在一定范围内使用getElementsByTagName("tagName")，比如在id="main"的元素中查找：
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
3）使用类名获取：
类，在html中使用class表示，可以使用getElementsByClassName("className")获取所有使用相同类名的网页元素，这里获取的也是一个数组。
var redclass=document.getElementsByTagName("red");
4）使用CSS选择器获取：
可以获取所有匹配指定CSS选择器的html元素，使用querySelectorAll("selector")，其中的选择器可以是id、类名、类型、属性、属性值等等。
var redsel = document.querySelectorAll("p.red");
上述代码选择所有class="red"的所有p元素列表，也是一个数组。
5）使用HTML对象集合获取：
可以使用的HTML对象集合包括：
document.anchors
document.body
document.documentElement
document.embeds
document.forms
document.head
document.images
document.links
document.scripts
document.title
比如获取id="frm1"的form元素，可以使用：
var frm=document.forms["frm1"];
这样得到的是一个对象数组，可以使用frm.elements[i].value获取其中的每个值。
可以看到，使用JavaScript获取网页元素有多种方法，但一般得到的都是一个数组，还要进行后续处理，只有document.getElementById("idName")获取的才是唯一的对象元素，所以这种方法最常用。

2. 创建网页元素：
创建网页元素一般使用document.createElement("tagName")方法，这种方法产生一个标记名为tagName的网页元素，比如div、p、span、img、a等。不过这个标记需要放置在网页结构的位置成为一个网页节点上才能显示出来，需要使用appendChild(node)方法。示例：
const pnode = document.createElement("p");
const main = document.getElementById("main");
main.appendChild(pnode);
上述代码中，首先创建一个p元素，然后获取网页中一个id="main"的网页元素，把p元素作为main的子节点附加其后。
使用appendChild()方法可以把一个元素追加到父节点上而成为其最后一个元素，而使用insertBefore()方法则可以加在某节点之前：
const pnode0 = document.createElement("p");
main.insertBefore(pnode, pnode0);
因为p元素一般是作为显示文本使用的，可以为其添加一个文本节点，代码为：
const txtnode = document.createTextNode("这是新文本。");
pnode.appendChild(txtnode);

3. 删除网页元素：
删除网页元素首先要找到其父节点，然后使用parent.removeChild(child)方法：
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
如果只知道需要删除的元素，可以使用其parentNode属性找到其父节点，然后删除：
var child = document.getElementById("p1");
child.parentNode.removeChild(child);

4. 更改网页元素：
网页元素更改，可以用一种元素替换另一种元素，比如把p元素替换为img元素，或其他元素，使用replaceChild()方法：
const imgnode = document.createElement("img");
main.replaceChild(pnode, imgnode);

5. 获取网页输入值：
网页使用表单form元素来与用户交互，以获取输入值。常用的表单元素有input输入框、textarea文本区、select下拉列表、button按钮等，HTML5还增加了datalist、keygen、output。
1）input输入框：
input输入框种类最多，包括text文本、password密码、submit按钮、radio单选按钮、checkbox复选框、button按钮等，HTML5还增加了color颜色、date日期、datetime日期时间、datetime-local本地日期时间、email电邮、month月、number数值、range范围、search搜索、tel电话号码、time时间、url网址、week星期等，相应的样式在不同的浏览器的显示会有一些差别，或者只是按text显示。
虽然input输入框类型很多，但基本都有value属性，用于显示对应元素的值，可以通过JavaScript获取此值，也可以通过程序改变此值以改变显示：
const input1 = document.getElementById("input1");
let inputval1=input1.value;
需要注意，这里获取得到的input输入框的value值一般是一个字符串值，如果要输入数值进行计算需要类型转换为数值。
类型为text的input输入框，一般都有defaultValue属性用于设置默认值，maxLength属性用于设置最大字符数，accessKey属性设置快捷键，placeholder属性用于显示输入提示。

2）textarea文本区：
textarea文本区可以输入多行文字，其中显示的内容也是使用value值，可以直接使用JavaScript获取或输出。
textarea文本区可以使用rows和cols设置显示的行数和宽度，不过一般建议使用CSS的 height 和 width 属性。可以使用maxlength设置允许的最大字符数，placeholder属性用于显示输入提示。

3）select下拉列表：
select下拉列表的HTML表示一般为：
<select id="idnum" onchange="selchange()">
 <option value ="val1">text1</option>
 <option value ="val2">text2</option>
 <option value ="val3">text3</option>
</select>
这样，就可以在js代码中写一个选择后的处理函数selchange()。代码中，一般使用document.getElementById()方法获取下拉列表的id：
const sel = document.getElementById('idnum');
这样取得的sel是一个对象数组，其长度为sel.length。
被点选项的数组索引为selectedIndex，可以用下面方法获取：
let selval=sel.selectedIndex;
而下列列表的每一项都为对象数组的options属性，对应每个option标记，每个option都有一个value和innerText属性，分别对应每个option的value和显示文本text1。
可以对下列列表动态添加或删除一项：
const newopt=document.createElement("OPTION");
sel.options.add(newopt);
newopt.value=newVal;
newopt.innerText=newText;
sel.options.remove(sel.length-1);    //删除最后一项
下列列表可以通过size属性设置可见选项的数目，通过multiple属性设置允许多选，此时一般需要使用每个options的selected属性来判断是否选择。
对一个页面的下拉列表，页面加载时一般会显示最后一项或最后几项（如果设置size属性），这时可以通过程序代码来控制，用sel.selectedIndex=num来设置加载时显示第num项。

4）submit按钮和button按钮：
这两种都为按钮，但submit有固定样式，并默认使用表单form的Form.submit()方法和Form.onsubmit事件处理表单；而button没有默认行为，必须设置onclick事件以便使用。HTML5中已经加入button标记来表示一个按钮，因此一般不再使用input的button类型，但使用方法类似键。
button使用value显示按钮上的文字，可用通过JavaScript动态修改。

5）radio单选按钮：
radio单选按钮的HTML表示一般为：
 <input type="radio" name="radiosel" checked="checked" value="val0" onclick='radiochg()'/>text1
 <input type="radio" name="radiosel" value="val1" onclick='radiochg()'/>text2
 <input type="radio" name="radiosel" value="val2" onclick='radiochg()'/>text3
可见，radio单选按钮就是连续几个具有相同name的类型type都为radio的input输入，为了区分每个单选项，每个项都有不同的value值，而点选后的事件处理也相同（也可以都不设置）。一般情况下都会设置一个默认选择项，其checked属性值为checked。
使用时为了获取单选按钮要用document.getElementsByName()，这里获取到的是一个对象数组：
const radiosel = document.getElementsByName('radiosel');
然后对这个对象数组进行遍历，获取checked属性值为checked的那个单选按钮对应的value属性值：
let radioval=0;
for(let i=0;i<radiosel.length;i++) {
  if(radiosel[i].checked) radioval=radiosel[i].value;
}
一般为了方便使用switch分支处理，会把每个单选按钮的value属性值按0、1、2...顺序设置。当然也可以使用其他设置值，目的都是根据获取的value值进行判断，然后进行后续处理。
单选按钮，可以使用defaultChecked属性设置默认状态，值为true或false，也可以使用checked属性设置。

6）checkbox复选框：
checkbox复选框的HTML表示与单选按钮类似：
 <input type="checkbox" name="checksel" value="val0"/>text1
 <input type="checkbox" name="checksel" value="val1" />text2
 <input type="checkbox" name="checksel" value="val2" />text3
可见，checkbox复选框也是连续几个具有相同name的input输入，只不过类型type都为checkbox。因为可以多选，每个项的value值可以相同，但一般情况下还是用不同值，而点选后的事件处理一般不设置。可以把一些项用checked属性值为checked设置为默认选中，但也可以不设。
使用时为了引用复选框也要用document.getElementsByName()获取对象数组：
const checksel = document.getElementsByName('checksel');
然后对这个对象数组进行遍历，获取checked属性值为checked的多个选项对应的value属性值。
复选框可以使用defaultChecked属性设置默认状态，值为true或false，也可以使用checked属性设置。

6. 网页输出值：
网页输出值，一般使用span元素输出，当然input也有readonly属性可以设置为只读用于输出。对span元素，输出显示值一般使用innerText或innerHTML来设置，其中innerText只能包含一般字符串，而innerHTML可以使用一些带有格式的HTML标记。

7. 标注：
对于输入或输出，有时往往需要标注其名称参数等，用于提示，一般使用label标记。label标记类似span，也是一种行内元素，不过其具有for属性，可以用于设置对应哪一个输入或输出的元素。