JavaScript基础之DOM BOM操作

秦俊杰
163 阅读5分钟

JavaScript基础之DOM BOM操作

1.DOM操作

1.1 获取元素

1.1.1 getElementById()

注意：

  • 因为文档页面从上往下加载，所以先有标签，然后才能getElementById
  • 参数是字符串，所以需要加引号
  • 返回的是一个 element 对象 console.dir 可以打印返回的元素对象，更好的查看里面的属性和方法
var timer = document.getElementById('time');
console.log(timer);
console.dir(timer);

1.1.2 getElementsByTagName()

  • 参数是字符串，所以需要加引号d
  • 得到的是对象的集合，可以用遍历来获取所有对象
  • 得到的是动态的 例子: 获取ol里面的li
<ol>
<li>123一二三四五</li>
<li>123上山打老虎</li>
<li>123老虎有几只</li>
<li>123快来数一数</li>
<li>123一二三四五</li>
</ol>
<script>
var ol = document.getElementsByTagName('ol');
//伪数组不能做父元素
var list = ol[0].getElementsByTagName('li');
console.log(list);
console.dir(list);

1.1.3 getElementsByClassName()

  • 类名选择器

1.1.4 querySelector()

  • 返回指定选择器的第一个对象
<div class="box">
<ul>
<li>15212</li>
<li>1641238</li>
</ul>
</div>
<div class="box">
<ul>
<li>151232</li>
<li>1612348</li>
</ul>
</div>
<script>
//注意这里括号里面必须有“.”，因为需要指定选择的选择器
var boxs = document.querySelector('.box');
console.log(boxs);
</script>

1.1.5 querySelectorAll()

  • 返回指定选择器的所有对象集合 用法和querySelector()一样

1.1.6 body和html的获取

  • document.body
    • 获取body元素
  • document.documentElement
    • 获取html元素

2. 事件基础

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。 网页中的每个元素都可以产生某些触发JavaScript的事件。

2.1 事件由三部分组成：

  • 事件源 事件被触发的对象 比如按钮
  • 事件类型 如何触发 比如鼠标点击、鼠标经过、键盘按下、滚动滚轮
  • 事件处理程序 通过函数赋值的方式完成
<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function () {
        alert('触发事件');
    }
</script>

事件类型：

鼠标事件出发条件
onclick鼠标点击左键触发
onmouseover鼠标经过触发
onmouseout鼠标离开触发
onfocus获得鼠标焦点触发
onblur失去鼠标焦点触发
onmousemove鼠标移动触发
onmouseup鼠标弹起触发
onmousedown鼠标按下触发

3. 操作元素

JavaScript可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。

3.1 element.innerText

  • 从起始位置到终止位置的内容，但它去除Html标签，同时空格和换行也会去掉
  • innerText不识别HTML标签
  • 可读写的，可以获取元素里面的内容

3.2 element.innerHTML

  • 从起始位置到终止位置的全部内容，包括Html标签，同时保留空格和换行
  • 能识别HTML标签
  • 可读写的，可以获取元素里面的内容

3.3 修改表单属性

disabled ：让某个表单被禁用，不能被点击， 用法：

btn.onclick = function () {
    btn.disabled = true;
    //或者写成下面这种
    this.disabled = true;
    //this指向的是时间函数的调用者
}

3.4 修改样式属性

  • element.style

  • 行内样式操作，修改元素样式，如果样式比较少或者功能简单的情况下使用 注意：

    • 里面的属性是驼峰命名法
    • JS修改的是行内样式，权重比CSS的高

  • element.className

  • 类名样式操作，适合样式比较多的情况下使用 修改了元素的类名

  • 注意： 这个方法直接修改了类名，也就是说会覆盖原来的类名，原来的就不生效了 如果想要保留原先的类名，如下：

//假设first 是原来的类名，change是想加入的
this.className = 'first change';

3.5 元素属性

获取属性值

element.属性 获取内置属性值（元素自带的属性）

element.getAttribute(‘属性’) 主要获取自定义的属性（标准），我们定义的属性

设置属性值

element.属性 = ‘值’；

element.setAttribute(‘属性’, ‘值’) 主要更改自定义的属性

移除属性值

element.removeAttribute(‘属性’) 主要移除自定义的属性（标准）

操作元素小总结

QQ图片20220412170924.png

4. 表单事件

获得焦点 onfocus 失去焦点 onblur

  • 如果获得焦点，判断里面是否是默认文字，如果是默认文字，就清空表单内容
  • 如果失去焦点，判断表单是否为空，如果为空，则表单内容改为默认文字
  • 获得焦点的时候，把文本框里的文字变黑
  • 失去焦点的时候，文本框文字变浅
<input type="text" value="手机">
<script>
var input = document.querySelector('input');
input.onfocus = function () {
    if (this.value === '手机') {
    	input.value = '';
    }
    this.style.color = '#3c3c3c'; 
}
input.onblur = function () {
    if (this.value === '') {
    	input.value = '手机';
    }
    this.style.color = '#999';
}
</script>

5.节点操作

利用DOM提供的方法获取元素 （逻辑性不强，繁琐）

  • document.getElementById()
  • document.getElementByTagName()
  • document.querySelector 等等

利用 （简单、符合逻辑）

  • 利用父子兄的节点关系获取元素
  • 逻辑性强，但是兼容性差

5.1 节点层级

最常见的是父子兄层级关系。 父级节点：

  • node.parentNode
  • 注意：得到的离元素最近的父级节点（亲爸爸），如果找不到就返回null

子级节点

  • parentNode.childNodes (标准)

返回包含指定节点的子节点的集合，该集合为即时更新的集合，包含的子节点包含元素节点、文本节点等等，所以用 nodeType 判断，用for循环遍历

  • parentNode.children (非标准)

得到所有的子元素节点，虽然是非标准的，但是得到了浏览器的支持，所以以后大量使用这个

  • parentNode.firstChild

    返回第一个子节点，找不到返回null,不管是文本节点还是元素节点都能找到

  • parentNode.firstElementChild

    返回第一个子元素节点，找不到返回null,只返回元素节点（IE9以上才支持）

  • parentNode.lastChild

    返回最后一个子节点，找不到返回null,不管是文本节点还是元素节点都能找到

  • parentNode.lastElementChild

返回最后一个子元素节点，找不到返回null,只返回元素节点（IE9以上才支持）

兄弟节点

  • nodenode.nextSibling

得到下一个兄弟节点，包括元素节点和文本节点

  • node.previousSibling 得到上一个兄弟节点，包括元素节点和文本节点

  • 下面两个方法只有IE9以上才能兼容

    • node.nextElementSibling 得到下一个兄弟元素节点，只有元素节点

    • node.previousElementSibling 得到上一个兄弟元素节点，只有元素节点

创建节点

  • document.createElement(‘tagName’) 这个方法创建由tagName指定的 HTML 元素，因为这些元素原先不存在，是根据我们的需求动态生成的，所以也称为动态创建元素节点

  • node.appendChild(child); 它是追加元素，是在指定父节点的子节点的末尾添加。

  • node.insertBefore(child, 指定元素);

// 节点的创建

 var a = document.createElement('a');

ar span = document.createTextNode('123')

var dc = document.createDocumentFragment('div');  //创建一个文档片段  不是节点  存在内容中

console.log(dc) */
avatar
文章
阅读
粉丝