Document对象中的⽅法介绍
⽂章⽬录
Document中重要且常⽤的⼏个查询⽅法
ElementById(elementId)
通过标签的id属性查标签dom对象，elementId是标签的id属性
ElementsByName(elementName)
通过标签的name属性查标签dom对象，elementName是标签的name属性值
ElementsByTagName(tagname)
通过标签名查标签dom对象，tagname是标签名
ateElement(tagname)
通过给定的标签名，创建⼀个标签对象，这个对象创建完成后还是在内存⾥⾯，我们需要把它放在指定的标签⾥⾯所有我们⼀般要配合appendChild() 或 insertBefore()⽅法使⽤，tagname是标签名
问题描述：
当⽤户点击了校验按钮要获取输⼊框中的内容，然后验证其是否合法。
验证规则：
必须要有字母，数字，下划线组成，且长度为5到12位
1.获取输⼊框中的内容
<body>
<input type="text"id="12"value="0"/>
<button onclick="b()">校检</button>
</body>
创建⼀个⽂本输⼊框⽤来给⽤户提供输⼊；id为12；默认值为0
创建⼀个校检按钮，加⼊onclick(点击发⽣事件)属性
function b(){
var ElementById("12");
alert(obj.value);
}
b()函数，⽤ElementById("12")获取到id为12的标签，然后obj.value可以返回obj对象(即id为12的⽂本输⼊框标签)，框中的值
2.验证字符串符合规则
需要⽤到正则表达式的技术
正则表达式知识内容请移⾄
var a=obj.value;
var patt=/^\w{5,12}$/;
st(a));
定义⼀个变量a接收输⼊框内的返回值，然后判断a是否符合规则 然后提⽰
问题描述：
创建⼀个多选，并创建⼀个全选，⼀个反选，⼀个全不选按钮
⾸先有这么⼀个多选框和三个按钮
<body>
兴趣爱好：
<input type="checkbox"name="hobby"value=java/>java
<input type="checkbox"name="hobby"value=hadoop/>hadoop
<input type="checkbox"name="hobby"value=c++/>c++
<input type="checkbox"name="hobby"value=c/>c <br />
<button onclick="a()">全选</button>
<button onclick="b()">全不选</button>
<button onclick="c()">反选</button>
</body>
var ElementsByName("hobby");
查name为hobby的标签，同时返回他们的dom对象，返回值是多个标签的dom对象的集合
即此时obj是⼀个集合，⾥⾯有所有的name为hobby的dom对象。
这个集合的操作⽅法和数组⼀样，可以⽤数组的操作⽅法来对其操作。
obj[n]代表标签的dom对象 集合⾥⾯的顺序就是html中从上到下的顺序
alert(obj.length);//查有⼏个元素
alert(obj[0].checked)
//当某⼀项被选中，则它的checked=true
选中是由checked=checked决定的 但是只要多选标签⾥⾯有checked，不管其值是多少，初始这项都会被选中
选中对象的checked属性并对其进⾏操作
当某⼀项被选中，则它的checked=true，当他未被选中则其checked=false。
标签的checked属性可被改变
我们可以⽤这个对其是否选中状态进⾏操作
obj[0].checked=true使第⼀个元素进⼊选中状态
obj[0].checked=false使第⼀个元素进⼊不选中状态
代码如下
var ElementsByName("hobby");
function a(){
var i=0;
while(i<4){
obj[i].checked=true;
i++;
}
}
function b(){
var i=0;
while(i<4){
html document是什么
obj[i].checked=false;
i++;
}
}
function c(){
var i=0;
while(i<4){
if(obj[i].checked){
obj[i].checked=false;
}else{
obj[i].checked=true;
}
i++;
}
}
问题描述：
通过input标签获取到所有的input标签对象，并创建⼀个按钮，点击按钮可获取他们所有的默认值
注：input type=“text” 获取到的默认值是⽂本框⾥⾯的数值
<body>
<input type="checkbox"value=java/>java
<input type="checkbox"value=hadoop/>hadoop
<input type="checkbox"value=c++/>c++
<input type="checkbox"value=c/>c <br />
<button onclick="b()">全选</button>
</body>
创建多选项和按钮
function b(){
var ElementsByTagName("input");
//获取到input标签对象的集合
alert(obj[0]);
var i=0;
do{
console.log(obj[i].value);
i++
}while(i<4);
}
其操作⽅法和数组⼀样
集合中元素顺序还是他们在html页⾯中从上到下的顺序
问题描述：使⽤js代码来创建html标签，并显⽰在页⾯上，标签内容：<div>阿涵，你真帅</div>
解决步骤：
1.创建div对象
2.向div⾥⾯加⼊值
3.把整个div对象放在body⾥⾯
//1.创建div对象
var ateElement("div");
//2.向div⾥⾯加⼊值
obj.innerHTML="阿涵，你真帅";
//3.把整个div对象放在body⾥⾯
document.body.appendChild(obj);
}
当创建完对象时他是在内存中的，不在html的body中，所以配合document.body.appendChild(obj)把它放在body中
三个查询⽅法的优先使⽤顺序
如果有id我们优先使⽤ElementById(elementId)，没有id但有name优先使⽤
注意：
这三个⽅法，⼀定要在页⾯加载完成之后执⾏，才能查询到标签对象。即，整个页⾯代码读取完成，形成⼀个dom模型，这个时候查询才能有效。所以这些查询代码需要写在函数⾥⾯供其他代码调⽤，或者写在load=function(){}这些页⾯加载响应后才执⾏的函数⾥⾯才能有⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。