javascript总结3

DOM 元素查询

如果需要操作 HTML 元素，必须首先找到该元素

查询节点的方式

通过 id 查询
通过层次（节点关系）查询
通过标签名称查询
通过 name 属性查询

通过 id 查询

语法:

e = document.getElementById(元素ID)

通过层次（节点关系）查询

parentNode
- 遵循文档的上下层次结构，查找单个父节点
childNodes
- 遵循文档的上下层次结构，查找多个子节点

提示: 不用使用childen属性, 这个属性是Chrome浏览器专用属性, 其他浏览器不一定支持, 这种现象就是浏览器兼容问题, 是普遍问题. 建议使用通用API实现代码, 避免兼容性问题.

根据标签名查询节点

getElementsByTagName()
- 根据指定的标签名称返回所有的元素
- 忽略文档的结构查找整个 HTML 文档中的所有元素(子孙元素)
- 如果标签名称错误，则返回长度为 0 的节点列表
返回一个节点列表（数组）

使用节点列表的 length 属性获取个数
[index]：定位具体的元素

根据 name 属性查询节点

document.getElementsByName()
- 根据标签的 name 属性的值进行查询

适合在表单中查询名字相同的选项框 (单选/复选)

添加节点

DOM API 提供了添加元素的方法;

添加元素步骤:

创建元素
- 新元素=document.createElement(元素名)
追加元素
- 父元素.appendChild(新元素)

案例:

//追加新元素
var li = document.createElement('li');
li.innerHTML='Andy';
var ul = document.getElementById('demo');
ul.appendChild(li);

插入元素步骤:

创建新元素
- 新元素=document.createElement(元素名)
插入元素
- 父元素.insertBefore(新元素, 参考位置元素)
- 在 参考位置元素 之前插入新元素

案例:

//插入新元素
li = document.createElement('li');
li.innerHTML='Mac';
var tom=ul.getElementsByTagName('li')[0];
ul.insertBefore(li, tom);

删除元素

删除元素步骤:

找到父元素
找到子元素
从父元素中删除子元素
- 父元素.removeChild(子元素)

案例:

var ul = $('demo');
var li = ul.getElementsByTagName('li')[0];
//删除元素
ul.removeChild(li);

经典案例级联菜单

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var cities=[
         ['请选择'],
         ['静安','浦东','宝山'],
         ['沈阳','高坎','鞍山'], 
         ['石家庄','保定','唐山','廊坊']];
function changeCities(list){
    //list = document.getElementById('province');
    //得到那个项目被选定了?
    var index = list.selectedIndex;
    console.log(index);
    //找到城市
    var city = cities[index];
    console.log(city);
    var s=document.getElementById("city");
    //清空城市列表
    s.innerHTML=""; 
    //创建城市列表
    for(var i=0; i<city.length; i++){
        //创建option 
        var opt=document.createElement('option');
        //value是发送到服务器的数据,
        // 不是给客户端使用的
        opt.value=i;
        //opt.setAttribute('value', i)
        opt.innerHTML=city[i];
        //添加到城市列表中
        s.appendChild(opt);
    }
}
</script>
</head>
<body>
    <h1>联动菜单</h1>
    省份:
    <select id="province" 
        onchange="changeCities(this);">
        <option value="0">请选择</option>
        <option value='1'>上海</option>
        <option value='2'>辽宁</option>
        <option value='3'>河北</option>
    </select>
    城市:
    <select id="city">
        <option value='0'>请选择</option>
    </select>
</body>
</html>

DOM 元素查询

通过 id 查询

通过层次（节点关系）查询

根据标签名查询节点

根据 name 属性查询节点

添加节点

删除元素

经典案例 级联菜单

猜你喜欢

经典案例级联菜单