`

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 提供了添加元素的方法;

添加元素步骤:

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

案例:

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

插入元素步骤:

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

案例:

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

删除元素

删除元素步骤:

  1. 找到父元素
  2. 找到子元素
  3. 从父元素中删除子元素
    • 父元素.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>
分享到：
| 计算器 案例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Javascript总结导图

    本篇内容将围绕"JavaScript总结导图"展开，深入探讨JavaScript的基础知识、核心概念以及高级特性。 1. **基础语法** JavaScript的基础包括变量声明（var、let、const）、数据类型（如字符串、数字、布尔值、null、...

    javascript课程内容总结

    JavaScript 课程内容总结 JavaScript 是一种广泛应用于网页开发的编程语言，以下是 JavaScript 的基础知识点总结。 数据类型 在 JavaScript 中，数据类型包括字符串（string）、数值型（number）、布尔型...

    JavaScript总结笔记

    ### JavaScript总结笔记 #### JavaScript简介 JavaScript是一种广泛使用的、基于对象和事件驱动的脚本语言。它最初由网景公司（Netscape）的布兰登·艾奇于1995年创建，并逐渐成为现代Web开发的核心技术之一。...

    一张图对Javascript总结，用思维导图总结的。

    JavaScript总结，很适合学习基础的东西。上传的是图片格式是，方便大家打开。仅仅一张图，让你了解javascript。

    JavaScript基础知识总结

    3. JavaScript 的用途 - 动态文本：JavaScript 可以将变量文本实时显示在页面上，比如使用 `document.write` 函数。 - 事件响应：通过监听用户的点击、页面加载等事件，JavaScript 可以在这些事件发生时执行相应...

    JavaScript学习总结

    本文将围绕“JavaScript学习总结”这一主题，深入探讨其基本概念、语法特性、DOM操作以及与CSS的协同使用。 一、JavaScript基础 JavaScript由Brendan Eich在1995年发明，最初是为了网页交互而设计，现在已经成为...

    javaScript学习笔记总结.docx

    3. 跨平台性：JavaScript可以在任何支持它的浏览器上运行，不受操作系统限制。 JavaScript与Java虽然名字相似，但两者是完全不同的语言。Java是一种静态类型的、面向对象的编程语言，而JavaScript则是动态类型的、...

    javascript基础知识总结

    以下是对JavaScript基础知识的总结，主要关注在网页中使用的弹出对话框、函数调用以及带有参数的函数。 1) Alert Box `alert()` 函数用于显示一个包含警告信息的单行对话框，用户只能点击“确定”按钮关闭它。在...

    JavaScript必看全面总结.zip

    3. **对象与原型链**：JavaScript的对象是基于原型的，理解原型、原型链、__proto__与Object.prototype的关系，以及如何通过构造函数和对象字面量创建对象。 4. **数组与字符串方法**：掌握数组的方法如push、pop、...

    JavaScript的学习总结

    自己弄得一个总结文档方便初学者快速学习 csdn真恶心

    JavaScript经验总结

    ### JavaScript经验总结 #### 基础知识与脚本创建 - **创建脚本块**： - 使用 `&lt;script language="JavaScript"&gt;` 来创建一个 JavaScript 的脚本块。 - 示例代码： ```html &lt;script language="JavaScript"&gt; //...

    javascript知识点总结《一》

    ### JavaScript知识点总结《一》 #### 第一章：初步认识JavaScript ##### 学习目标： - **理解JavaScript的特点** - **学会三种JavaScript的引入方式** ##### JavaScript的特点： 1. **了解特点前：** JavaScript...

    JavaScript对象创建总结

    javascript对象创建方法总结，通过这些方法的总结，可以对对象有了更深一步的了解，也加深了对对象的巩固认识。

    JavaScript语言基础知识总结（10张，神一样的总结！）

    这篇总结涵盖了JavaScript语言的基础知识，帮助初学者快速上手并深入理解这门强大的脚本语言。 首先，我们来看“JavaScript 数据类型”。JavaScript有七种数据类型：Undefined、Null、Boolean、Number、BigInt、...

    javascript总结

    在学习完js课程之后，自己手动编写的总结文档，以及平常遇到的小问题的解决办法，通俗易懂，适合正在学习js的同学

    javascript总结.xmind

    javascript总结.xmind

    JavaScript中的循环总结（教辅）

    JavaScript中的循环总结（教辅）JavaScript中的循环总结（教辅）JavaScript中的循环总结（教辅）JavaScript中的循环总结（教辅）JavaScript中的循环总结（教辅）JavaScript中的循环总结（教辅）JavaScript中的循环...

    js常用知识总结经典javascript知识总结，经典javascript知识总结

    这篇经典JavaScript知识总结涵盖了从基础语法到高级特性的多个方面，旨在帮助有一定基础的开发者巩固和扩展他们的JavaScript知识。 1. **创建脚本块**：在HTML文件中，使用`&lt;script&gt;`标签来插入JavaScript代码。...

    JavaScript知识点总结文档

    ### JavaScript知识点总结 #### 一、JavaScript的历史与ECMAScript标准 JavaScript 的历史可以追溯到1992年，当时 Nombas 公司开发了一种名为 C-- 的嵌入式脚本语言，并最终更名为 ScriptEase。随着互联网的发展，...

Magicbox
Global site tag (gtag.js) - Google Analytics