JavaScript之DOM

一、什么是DOM?

  • DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。
  • DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法。  当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

二、HTML DOM树

HTML DOM 模型被构造为对象的树。

DOM标准规定HTML文档中的每个成分都是一个节点(node):

  • 文档节点(document对象):代表整个文档
  • 元素节点(element 对象):代表一个元素(标签)
  • 文本节点(text对象):代表元素(标签)中的文本
  • 属性节点(attribute对象):代表一个属性,元素(标签)才有属性
  • 注释是注释节点(comment对象) 

JavaScript 可以通过DOM创建动态的 HTML:

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

三、查找标签

  1. 直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByClassName 根据class属性获取 document.getElementsByTagName 根据标签名获取标签合集
  2. 间接查找

    找到一个元素后就可以通过元素.XX的形式间接查找跟它相关的元素,

    如:header = document.getElementById('header')

      header.parentElement     //查找header元素的父标签。注意不要加括号

    常用方法如下:

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

四、节点操作

测试代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点操作测试</title>
</head>
<body>
<div class="d1">
    <div class="d2">
        <p id="p1">测试一下,你就知道</p>
    </div>
</div>
</body>
</html>
  1. 创建节点 d3Ele = document.createElement('div') //创建一个新的div元素 d3Ele.className = 'd3' //给它设置class名 d3Ele.innerText = '我后来创建的div' //设置div里面的内容
  2. 添加子节点 d2Ele = document.getElementsByClassName('d3') //获取id为d2的div元素 d2Ele.appendChild(d3Ele) //将d3Ele作为子元素添加到d2Ele中
  3. 删除节点 d2Ele.removeChild(d3Ele) //删除d2Ele的子元素d3Ele
  4. 替换节点 d3Ele = document.createElement('div') //创建一个新的div元素 d3Ele.innerText = '测试一下,你就知道' //添加内容 d2Ele.replaceWith(d3Ele) //将都d2Ele替换为d3Ele
  5. 属性节点 sds 获取文本节点的值: var divEle = document.getElementById("d1") divEle.innerText divEle.innerHTML 设置文本节点的值: var divEle = document.getElementById("d1") divEle.innerText="1" divEle.innerHTML="<p>2</p>" attribute操作: var divEle = document.getElementById("d1"); divEle.setAttribute("age","18") divEle.getAttribute("age") divEle.removeAttribute("age") // 自带的属性还可以直接.属性名来获取和设置 imgEle.src imgEle.src="..."
  6. 获取值操作 var iEle = document.getElementById("i1"); console.log(iEle.value); 语法: elementNode.value 适用于以下标签:
    • .input   
    • .select
    • .textarea 
  7. class的操作
    • className 获取所有样式类名(字符串)
    • classList.remove(cls) 删除指定类
    • classList.add(cls) 添加类
    • classList.contains(cls) 存在返回true,否则返回false
    • classList.toggle(cls) 存在就删除,否则添加 var d1Ele = document.getElementById('p1') //找到id为p1的元素 d1Ele.className //查看d1Ele有哪些类 d1Ele.classList.add('clear-fixed')  //为它添加一个名为clear-fixed的类名 d1Ele.classList.remove('clear-fixed') //移除类 d1Ele.classList.contains('clear-fixed') //判断是否有clear-fixed类 d1Ele.classList.toggle('clear-fixed') //有clear-fixed类就移除,没有就添加,用于鼠标点击的时间循环切换状态
  1. 指定 CSS操作 d1Ele.style.background='red' //改变指定元素的背景颜色 d1Ele.style.height='100px' //改变指定元素的宽度 ………………………………………………………………

五、事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),

比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,

这些属性可插入 HTML 标签来定义事件动作。

  1. 常用事件 onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 // 练习:输入框 onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动) onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onselect 在文本框中的文本被选中时发生。 onsubmit 确认按钮被点击,使用的对象是form。
  2. 绑定方式
    • 方式一: <div id="d1" onclick="changeColor(this);">点我</div> <script> function changeColor(ths) { ths.style.backgroundColor="green"; } </script> 注意: this是实参,表示触发事件的当前元素。 函数定义过程中的ths为形参。
    • 方式二: <div id="d2">点我</div> <script> var divEle2 = document.getElementById("d2"); divEle2.onclick=function () { this.innerText="呵呵"; } </script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

语义化HTML:ul、ol和dl

一、语义化元素                             1. ul标签      W3C草案: The ul element represen...

3138
来自专栏每日一篇技术文章

weex-11-组件slider的使用

1.怎么让banner的宽度和屏幕的宽度相等 2.怎么让banner自动轮播和轮播间隔 3.如何添加指示器 4.如何设置指示器的颜色和大小 5.点击轮播...

1621
来自专栏前端杂货铺

mouseenter以及mouseleave兼容性

在IE的全系列中都实现了mouseenter和mouseleave事件,但是在早期的w3c浏览器中却没有实现这两个事件。有时候,我们需要使用 mouseente...

3987
来自专栏从零开始学自动化测试

appium+python自动化26-模拟手势点击坐标(tap)

前言: 有时候定位元素的时候,你使出了十八班武艺还是定位不到,怎么办呢?(面试经常会问) 那就拿出绝招:点元素所在位置的坐标 一、 tap用法 1.tap是...

5254
来自专栏逸鹏说道

Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)

如果要语法高亮就在```后面加小写语言名,eg:html,css,javascript,python,cs(csharp)等等

56711
来自专栏练小习的专栏

当inline-block和text-indent遇到IE6,IE7

在实际应用中,考虑到seo,很多button,icon都要用到inline-block和text-indent来处理,例如: <a href="#" class...

1926
来自专栏Google Dart

AngularDart Material Design 选择 顶

可以手动(在模板中)或通过SelectionOptions实例指定选项。 可以通过模板或通过检查选择模型将选项标记为已选择。

1122
来自专栏前端知识分享

Vue---自定义组件

       组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,...

1842
来自专栏卡少编程之旅

Vue进阶部分文档研读和学习

3137
来自专栏逸鹏说道

Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)

如果要语法高亮就在```后面加小写语言名,eg:html,css,javascript,python,cs(csharp)等等

2933

扫码关注云+社区

领取腾讯云代金券