JavaScript入门笔记day2

文章目录

• 常用互动方法
• • • 1. document.write() 直接向页面输出内容
    • 2. `alert();`弹出消息对话框
    • 3. confirm消息对话框
    • 4. prompt弹出消息对话框，用于需要与用户进行交互的情形
    • 5. window.open();打开新窗口
    • 6.window.close()关闭窗口
• DOM操作
• • • 1.DOM(Document Object Model)文档对象模型
    • 2.节点树中的节点之间彼此拥有层级关系
    • 3. HTML DOM中的方法和属性
• 操作符优先级

常用互动方法

1. document.write() 直接向页面输出内容

2. alert();弹出消息对话框

3. confirm消息对话框

confirm("我是消息框的提示文字");

• notes
  ** 当用户点击"确定"按钮时，返回true
  ** 当用户点击"取消"按钮时，返回false

4. prompt弹出消息对话框，用于需要与用户进行交互的情形

其中包含一个文本输入框、确定按钮、取消按钮

• 点击确定按钮，把输入框内容作为函数值返回
• 点击取消按钮，返回null

5. window.open();打开新窗口

window.open('url','窗口名称','参数字符串');

• url
  可选参数，将要显示网页的路径或者地址。
  如果忽略这个参数，或者地址为空，页面显示空白
• 窗口名称
  可选参数，将要显示网页的名称

1. 该名称由字母、数字、下划线组成
2. “_top”、"_blank"、"_self"具有特定意义
   • “_top” 框架网页中的上部显示目标网页
   • “_blank” 在新窗口打开目标网页
   • “_self” 在当前窗口打开目标网页
3. name是唯一标识窗口的，不能出现重名现象；且name中不能包含空格

• 参数字符串
  可选参数，设置目标窗口参数，参数之间用逗号隔开
  

6.window.close()关闭窗口

• window.close();//关闭本窗口
• 窗口名称.close();//关闭指定窗口

DOM操作

1.DOM(Document Object Model)文档对象模型

定义访问和处理HTML和XML的标准方法，分别定义了他们所有的对象和属性。
把HTML文档表达为带有元素属性和文本的树结构（节点树）
DOM标准被分为三个不同的部分：

1. 核心DOM：针对任何结构化文档的标准模型
2. HTML DOM：针对HTML文档的标准模型
3. XML DOM：针对XML文档的标准模型

• 其中HTML DOM是关于如何获取、修改、添加、删除HTML元素的标准；
  在HTML DOM中，所有事物都是节点，DOM被视为节点树的HTML：
  – 整个文档是一个文档节点
  – 每个HTML元素是元素节点
  – HTML元素内的文本是文本节点
  – 每个HTML属性是属性节点
  – 注释是注释节点
  eg：通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

2.节点树中的节点之间彼此拥有层级关系

• 父母（parent）、孩纸（child）、兄弟姐妹（sibling）
• 父母节点拥有孩子节点，同级的子节点互称为兄弟姐妹节点
• 在节点树中，顶端节点称为根（root）
• 除了根之外，所有的节点都拥有父节点
• 一个节点可以拥有任意数量的子节点
• 同胞是拥有相同父节点的节点
  

3. HTML DOM中的方法和属性

• 常用方法

1. getElementById() 返回带有指定 id 的元素。
2. getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
3. getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
4. appendChild() 把新的子节点添加到指定节点。
5. removeChild() 删除子节点。
6. replaceChild() 替换子节点。
7. insertBefore() 在指定的子节点前面插入新的子节点。
8. createAttribute() 创建属性节点。
9. createElement() 创建元素节点。
10. createTextNode() 创建文本节点。
11. getAttribute() 返回指定的属性值。
12. setAttribute() 把指定属性设置或修改为指定的值。

• 常用属性

1. innerHTML 节点（元素）的文本值!区分大小写
2. parentNode 节点（元素）的父节点
3. childNode 节点（元素）的子节点
4. attributes 节点（元素）的属性节点

操作符优先级