js_操作DOM

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js_操作DOM相关的知识,希望对你有一定的参考价值。

document.getElementById()

document.getElementsTagName()

css的document.getElemensBytClassName()

// 返回ID为‘test‘的节点:
var test = document.getElementById(‘test‘);

// 先定位ID为‘test-table‘的节点,再返回其内部所有tr节点:
var trs = document.getElementById(‘test-table‘).getElementsByTagName(‘tr‘);

// 先定位ID为‘test-div‘的节点,再返回其内部所有class包含red的节点:
var reds = document.getElementById(‘test-div‘).getElementsByClassName(‘red‘);

// 获取节点test下的所有直属子节点:
var cs = test.children;

// 获取节点test下第一个、最后一个子节点:
var first = test.firstElementChild;
var last = test.lastElementChild;

selector语法querySelector()和querySelectorAll()

兼容性:IE8<=不支持(ie8部分)

// 通过querySelector获取ID为q1的节点:
var q1 = document.querySelector(‘#q1‘);

// 通过querySelectorAll获取q1节点内的符合条件的所有节点:
var ps = q1.querySelectorAll(‘div.highlighted > p‘);

练习

<!-- html结构 -->
<div id="test-div">
<div class="c-red">
    <p id="test-p">javascript</p>
    <p>Java</p>
  </div>
  <div class="c-red c-green">
    <p>Python</p>
    <p>Ruby</p>
    <p>Swift</p>
  </div>
  <div class="c-green">
    <p>Scheme</p>
    <p>Haskell</p>
  </div>
</div>
‘use strict‘;
// 选择<p>JavaScript</p>:
var js = document.getElementById(‘test-p‘);

// 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>:
var arr = document.getElementsByClassName(‘c-red‘)[1].children;

// 选择<p>Haskell</p>:
var haskell = document.getElementsByClassName(‘c-green‘)[1].lastElementChild;

 

以上是关于js_操作DOM的主要内容,如果未能解决你的问题,请参考以下文章

前端开发常用js代码片段

JS中的DOM操作怎样添加移除移动复制创建和查找节点

JS常用代码片段2-值得收藏

JS常用代码片段2-值得收藏

DOM查找与操作(document)_js

js_操作DOM