常用的 DOM 方法

最新推荐文章于 2023-03-07 08:41:17 发布
最新推荐文章于 2023-03-07 08:41:17 发布
阅读量1.5k 收藏 7
点赞数
分类专栏： JavaScript基础 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weiguang102/article/details/123996909
版权

阅读目录

HTML DOM 树

在这里插入图片描述
1、document属性和方法：
document 的属性有 head，body 之类，方法有各种获取 element 的方法。

2、element的属性和方法：
属性比如 style，innerHTML 和固有属性，方法比如各种动态操作元素，
比如 createElement，还有操作属性的 set、get、remove、create 解 Attribute。

3、attribute 的属性和方法：有点包含在element 里面的感觉

问题

1、我们熟知 location 是 window 的属性或者说对象，那么 document 对象有 location 属性么？

解答：window 有 location 对象，document 同样有 location 对象。

2、如何获取一个html的文档声明？

解答：document.doctype; 可以知道文档声明，如果没有 return null; 这里是 <!DOCTYPE html>

3、一个有如下 <!DOCTYPE html> 文档声明的 html 文档，它的文档声明的名字是什么？

解答：html

4、如何获取一个 html 的 head 部分？

解答：document.head；很明显选取 head 节点.就是·<head></head> 这段 。

5、如何获取一个 html 的 body 部分？

解答：document.body；选取 body 节点.

6、如何获取一个文档的文档声明的名字？

解答：document.doctype.name；知道文档声明的名字.

7、document 的 location 属性是来干嘛的？

解答：location 一般主要是用来获取地址。

8、如何获取一个文档当前的地址？

解答：document.location.href; 获取当前地址

9、给文档重新分配地址的三种方法是哪三种？

解答：分别是 location 的 assign 方法和 href 属性。

document.location.assign(http://www.baidu.com) 分配一个地址 document.location="http://www.baidu.com"
document.location.href="http://www.baidu.com"

10、innerText 和 innerHTML 的区别是什么（两点区别）？

解答：一个是获取文本，一个是获取标签。 innerText是IE特有，innerHTML则是符合W3C协议的。

11、innerText 里面的标签还是标签么？

解答：不是，已经转义为了文本。

12、element 常用的几个属性是哪几个？

解答：id、nodeName、className、child、lastchild、firstchild、nextSibing、previousSibing

13、如何通过DOM2方法获取一个标签？

解答：var d=document.querySelector("#p1");

14、DOM2 获取一个标签的两个常见方法是哪两个？

解答：querySelector 和 querySelectorAll

15、querySelector 和 querySelectorAll 和区别是什么？

解答：前者获取一个，后者获取所有对应标签的。

16、如何在body中把 b 标签插入到 a 标签之前？

解答：document.body.insertBefore(b,a); 把b插在a前面

17、insertBefore 除了成为普通元素的方法，可否成为 body 的方法？

解答：肯定可以啊

18、在 body 中用 c 标签替换 b 标签怎么实现？

解答：document.body.replaceChild(c,b); //（new,old）

19、属性操作的四个方法是哪四个？

解答：set，get，create，remove，后面分别接 Attribute

20、DOM 0点击事件怎么写？

解答：a.onclick=function(){}

21、DOM2点击事件怎么写？

解答：btn.addEventListener("click",fun,false)

22、DOM2中主要操作事件的两个方法是哪两个？

解答：add 和 remove 接 EventListener

23、btn.addEventListener("click",fun,false) 中的第三个参数是什么意思？

解答：如果是 true 就是在事件捕获阶段调用，如果是 false 则是在事件冒泡阶段调用。

24、这样用 removeEventListener("click",function(){}) 有效果么？

解答：这样是没有效果的。虽然是一个函数，但是JS会认为传入了一个另外一个函数，虽然和之前一个一模一样。

25、IE事件调用的方法是什么？

解答：IE用的是 attach 的方式，a.attachEvent("onclick",function(){}

DOM对象常用对象的方法和属性

HTML文档中的常用节点类型

接口
nodeType
备注
Element
1
元素节点
Text
3
文本节点
Document
9
Document
Comment
8
注释文本
DocumentFragment
11
Document片段
Attribute
2
节点属性

常用的Document的方法

方法
描述
createAttribute()
用指定的名字创建新的Attribute节点
createComment()
用指定的字符串创建新的Comment节点
createElement()
用指定的标记名创建新的Element节点
createTextNode()
用指定的文本创建新的TextNode节点
getElementId()
返回文档中具有指定id属性的Element节点
getElementByTagName()
返回文档中具有指定标记名的所有Element节点

Element常用的属性和方法

方法/属性
描述
tagName
以字符串形式返回指定属性的值
getAttributeNode()
以Attribute节点的形式返回指定属性的值
getElementByTagName()
返回一个Node数组，包含具有指定标记名的所有Element节点的子孙节点，其顺序为在文档中出现的顺序
hasAttribute()
如果该元素具有指定名字的属性，则返回true
removeAttribute()
从元素中删除指定的属性
removeAttributeNode()
从元素的属性列表中删除指定的Attribute节点
setAttribute()
把指定的属性设置为指定的字符串值，如果该属性不存在则添加一个新属性
setAttributeNode()
把指定的Attribute节点添加到该元素的属性列表中

Node常用的属性和方法

方法/属性
描述
Attributes
如果该节点是一个Element,则以NamedNodeMap形式返回该元素的属性
childNodes
以Node[]的形式存放当前节点的子节点，如果没有节点，则返回空数组
firstChild
以Node的形式返回当前节点的第一个节点，如果没有节点则返回NULL
lastChild
以Node的形式返回当前节点的最后一个节点，如果没有节点则返回NULL
parentNode
以Node的形式返回当前节点的父节点，如果没有节点则返回NULL
previousSibling
以Node的形式返回紧挨当前节点，位于它之前的兄弟节点，如果没有这样的节点则返回NULL
nextSibling
以Node的形式返回当前节点的下一个兄弟节点，如果没有节点则返回NULL
nodeName
节点的名字，Element节点则代表Element标记的名称
nodeType
代表节点的类型
appendChild()
通过把一个节点增加到当前节点的childNode[]组，给文档树增加节点
cloneNode()
复制当前节点，或者复制当前节点以及它的所有子孙节点
hasChildNodes()
如果当前节点拥有子结点，则返回true
insertBefore()
给文档树插入一个节点，位置在当前节点的指定位置之前，如果该节点已经存在，则删除之，然后再将节点插入到它的位置。
removeChild()
从文档树中删除并返回指定的子结点
replaceChild()
从文档树中删除并返回指定的子结点，用另一个节点替代它。

DOM对象的常用方法示例

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Z-one</title>
 </head>
<body>
  <p id="p1" class="p">测试</p>
  <p id="p2" class="p">测试</p>
  <p id="p3" class="p">测试</p>
</body>
</html>

以上面 code 为例子

1、document 对象

//可以知道文档声明，如果没有return null;这里是<!DOCTYPE html>
document.doctype;

//知道文档声明的名字.
document.doctype.name

//很明显选取head节点.就是<head></head>这段
document.head

//选取body节点.
document.body

在这里插入图片描述

2、location

我记得 location一般主要是用来获取地址。
常用方法：

//获取当前地址
document.location.href

//分配一个地址
document.location.assign(http://www.baidu.com)

外如果href 是获取当前地址，如果给他赋值，把一个地址给他，也能达到assign的效果；
document.location="http://www.baidu.com"

或者
document.location.href="http://www.baidu.com"

3、innerText，innerHTML

这二个放一起说，主要是都挺像的，这两个的作用都是往文档中写出内容。

但是区别主要是：

document.body.innerText("Z-ONE") 主要是写入一个纯文本内容，此时 <span> 并不是标签。

而是一个文本 "<span>".(其实这样也显得 innerText 的安全性高一点)

在这里插入图片描述
document.body.innerHTML("z-one") 也是写入一个纯文本内容，但是不会将HTML标签进行转义。

在这里插入图片描述
另外 innerHTML 是符合 W3C 协议的，而 innerText 只适用于IE浏览器。

4、Element 元素

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Z-one</title>
</head>

<body>
  <p id="p1" class="p">测试</p>
  <p id="p2" class="p">测试</p>
  <p id="p3" class="p">测试</p>

  <script>
    //获取上面那个例子的p1元素.
    var a = document.getElementById("p1")

    // 获取该元素的id... "p1" (貌似就是通过p1找到的他- -)
    a.id

    //获取到节点的名字(就是标签名字) 这里是"p"
    a.nodeName

    //获取节点的class名字，这里因为关键字的原因，只能用className;
    a.className
    
    另外还有一些
    child//获取子元素  这里没有
    lastchild//最后一个子元素.
    firstchild//第一个子元素.
    nextSibling//下一个兄弟元素.
    previousSibing//上一个兄弟元素.
  </script>
</body>
</html>

应用示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Z-one</title>
</head>

<body>
  <p id="p1" class="p">测试</p>
  <p id="p2" class="p">测试</p>
  <p id="p3" class="p">测试</p>

  <script>
    window.onload = function () {
      //用id获取第二个p标签的元素
      var a = document.getElementById("p2");
      a.style.color = "red";

      //用标签名字来获取第一个p标签;
      var b = document.getElementsByTagName("p")[0]//获取的是一个集合,
      b.style.fontSize = "30px";//这里font-size,会报错,就用fontSize;

      //用类名来获取第三个标签.
      var c = document.getElementsByClassName("p")[2]//和上面一个道理
      c.style.fontWeight = "bold";
      
      //通过DOM2的方法获取第1个标签;
      var d = document.querySelector("#p1");
      //如果是queryselectorAll() 就是获取一个集合,操作方式和上面类似。
      //这里是通过类名，如果是ID就用#p1 标签就用p,一般是获取第一个元素.这点和Tag和Class都不一样
      d.style.color = "green";
    }
  </script>
</body>

</html>

在这里插入图片描述

5、Element 创建和添加元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>创建元素</title>
</head>
<script>
  window.onload = function () {
    var a = document.createElement("div");
    a.className = "p1"
    a.innerHTML = ("<span>测试下</span>");

    //添加到文档中
    document.body.appendChild(a);//这下子元素就写进去了

    //如果还要添加 可以照着上面来，我们现在就添加一个元素进去
    var b = document.createElement("div");
    b.innerHTML = "<p>测试第二弹</p>";

    //这次我们添加在上一个元素前面
    document.body.insertBefore(b, a);//把b插在a前面- -
    
    //这时候不想要b了，想替换掉，可以这么做!
    var c = document.createElement("div");
    c.innerHTML = "我就是来替换的";
    document.body.replaceChild(c, b);//（new,old）
  }
</script>
<body>

</body>
</html>

6、属性操作

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>创建元素</title>
</head>
<body>
  <div id="x1" class="p1"></div>

  <script>
    var a = document.getElementById("x1");
    a.getAttribute("id");//获取该阶段的属性：id
    a.setAttribute("id", "Z-one");//设置一个属性。
    a.removeAttribute("id")//删除ID节点
  </script>
</body>
</html>

在这里插入图片描述

DOM 事件处理

DOM0级事件处理

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>创建元素</title>
</head>
<body>
<input type="button" id="a" value="按钮">

<script>
var a=document.getElementById("a");
a.onclick=function(){
  console.log("测试一下");
}
//这样点击按钮就会在控制台输出测试一下
</script>
</body>
</html>

在这里插入图片描述

DOM2级事件处理程序

这里前面区别开来，就是我是你的升级版！。

出了这两个方法
addEventListener(); //添加
removeEventListener(); //去除

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>创建元素</title>
</head>

<body>
<input type="button" value="按钮">

<script>
var fun = function () {
  console.log("测试一下");
}
var btn = document.querySelector("input");
btn.addEventListener("click", fun, false)
btn.removeEventListener("click", fun, false)
//如果是true 就是在事件捕获阶段调用，如果是false则是在事件冒泡阶段调用。
//另外如果这里要用removeEventListener("click",function(){})//这样是没有效果的。虽然是一个函数，但是JS会认为传入了一个另外一个函数，虽然和之前一个一模一样。
</script>
</body>
</html>

在这里插入图片描述

创建DOM节点、添加DOM节点、设置节点属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>核心DOM操作</title>
</head>
<body>
<script>
//创建DOM节点
var div1 = document.createElement("div");
var txt1 = document.createTextNode("穿梭");

//添加DOM节点
div1.appendChild(txt1);
document.body.appendChild(div1);

//创建水平线节点
var hr1 = document.createElement("hr");

//水平线节点添加到body上
document.body.appendChild(hr1);

var marquee1 = document.createElement("marquee");
var img1 = document.createElement("img");

//设置节点属性
img1.setAttribute('src', 'https://img-home.csdnimg.cn/images/20211025054554.png');
img1.setAttribute('width', '200px');
img1.setAttribute('height', '200px');

//图片节点添加到marquee节点上
marquee1.appendChild(img1);
document.body.appendChild(marquee1);

/*
HTML marquee 元素（<marquee>） 用来插入一段滚动的文字。
 <marquee> 元素已经 过时，请不要再使用。尽管一些浏览器仍然支持它，但它不是必须的。
*/
</script>
</body>
</html>

测试代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body id="body">

  <div id="div1">
    321321
  </div>

  <button onclick="add_h3()">add_h3</button>

  <hr>
  <a id="a_1" name='tag_name' href="www.baidu.com">链接1</a>
  <a name='tag_name' href="">链接2</a>
  <a name='tag_name' href="">链接3</a>
  <a name='tag_name' href="">链接4</a>

  <!--<button οnclick="getAElements()">点我</button>-->
  <button onclick="testGetAttribute()">点我</button>
  <hr>

  <ul id="ul_1">1
    <li>javascript</li>3
    <li>jquery</li>5
    <li>html</li>7
  </ul>

  <button onclick="remove_child_test()">我就是看你不爽，我就要删了你</button>
  <hr>
  <button onclick="test_parentNode()">获取body</button>
  111

  <div id="marquee_test">

  </div>
  332
  <button onclick="test_sibling()">测试上下兄弟</button>
  <button onclick="add_marquee()">添加跑马灯标签</button>
  <!--<marquee>-->
  <!--<img src="./ym.jpg">-->
  <!--</marquee>-->
  <hr>

  <script>
    var ul_1_aa = document.getElementById('ul_1');
    var ul_1 = document.getElementById('ul_1').childNodes;
    console.log(ul_1.length+" - childNodes");
    // console.log(ul_1[0]);
    // console.log(ul_1_aa.firstChild);

    console.log(ul_1[6]);
    console.log(ul_1_aa.lastChild);
        // console.log(ul_1[1]);
        // console.log(ul_1[2]);
        // console.log(ul_1[3]);
        // console.log(ul_1[4]);
        // console.log(ul_1[5]);
        // console.log(ul_1[6]);
        // console.log(ul_1[0].nodeType);
  </script>
  <ul>1<li>2</li>3</ul>
</body>
<script>
  //你知道dom操作是用js操作dom树的原理，并且知道几个核心函数，要用的时候不熟悉的函数直接去查文档
  //查文档的话可以直接百度 ‘dom 操作’或‘dom 操作教程’ 关键词
  /*常用函数*/
  //1、document.getElementById('div1');

  //标签之间，如果有文本，就是文本节点，如果没有，就是空白节点
  //<ul>1<li>2</li>3</ul> 1,2,3的位置都是这样，1、3是儿子，2是孙子


  // var div1=document.getElementById('div1');
  //console.log(div1);
  // console.log(div1.nodeValue);


  //var innerHTML=div1.innerHTML;
  var body_1 = document.getElementsByTagName('body');
  var body1 = body_1[0];
  //div1.removeChild(Node);
  // console.log(div1);
  //console.log(innerHTML);
  //console.log(body_1);

  function testGetAttribute() {
    var a_1 = document.getElementById('a_1');
    var a_1_href = a_1.getAttribute('href');
    console.log(a_1_href);
    console.log(a_1_href.nodeValue + '   :a_1_href.nodeValue');
    a_1.setAttribute('a_id', '7865');
  }

  function getAElements() {
    var aa = document.getElementsByName('tag_name');
    console.log(aa.length);
    console.log(aa);
  }


  //1.现在的目标，给div增加一个h3，h3里面的文本内容是‘还我命来’，h3还有一个属性是‘huai_ren’，值是‘fry’
  function add_h3() {
    var div1 = document.getElementById('div1');
    var h3_1 = document.createElement("h3");
    var str1 = document.createTextNode('还我命来');
    h3_1.append(str1);
    h3_1.setAttribute('huai_ren', 'fry');
    div1.append(h3_1);
  }

  function add_marquee() {
    // var div1=document.getElementById('marquee_test');
    var body1 = document.getElementById('body');
    var marquee_1 = document.createElement("marquee");
    var img_1 = document.createElement("img");
    img_1.setAttribute('src', 'https://img-home.csdnimg.cn/images/20201124032511.png');
    marquee_1.append(img_1);
    // div1.append(marquee_1);
    body1.append(marquee_1);
  }

  //目标：我们想在body里面删了ul标签
  function remove_child_test() {
    var body1 = document.getElementById('body');
    var ul_1 = document.getElementById('ul_1');
    body1.removeChild(ul_1);
  }

  //目标：获取 id为marquee_test标签的父节点
  function test_parentNode() {
    var marquee_test = document.getElementById('marquee_test');
    console.log(marquee_test.parentNode);
  }

  //目标：获取 id为marquee_test标签 的  上一个兄弟和下一个兄弟
  function test_sibling() {
    var marquee_test = document.getElementById('marquee_test');
    console.log(marquee_test.nextSibling);
  }
</script>

</html>

DOM中Event 对象使用

1、将 event 作为参数传递进来，然后就可以调用 event 对象的各种属性和方法了。

<body onmousedown="whichButton(event)">

2、事件通常与函数结合使用，函数不会在事件发生前被执行！

之前：

1、包括页面事件和键盘鼠标等外设的事件，就是监听所有对它可能影响的操作

2、先记住四个，onclick，onblur，onchange，onfocus

3、如何使用 dom 中 event 对象？

解答：将event作为参数传递进来，然后就可以调用event对象的各种属性和方法了。
<body onmousedown="whichButton(event)">
event.button;
event.clientX

4、如何判断哪个鼠标按钮被点击？

解答：event.button; event 事件的 button 属性。

5、如何判断光标的坐标是？

解答：event.clientX。dom 中 event 对象的 clientX 和 clientY 属性。

获取鼠标哪个键的点击

在这里插入图片描述

<html>
<head>
<script type="text/javascript">
  function whichButton(event) {
    var btnNum = event.button;
    if (btnNum == 2) {
      alert("您点击了鼠标右键！")
    }
    else if (btnNum == 0) {
      alert("您点击了鼠标左键！")
    }
    else if (btnNum == 1) {
      alert("您点击了鼠标中键！");
    }
    else {
      alert("您点击了" + btnNum + "号键，我不能确定它的名称。");
    }
  }
</script>
</head>
<body onmousedown="whichButton(event)">
  <p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>
</body>
</html>

获取光标的坐标

在这里插入图片描述

<html>
<head>
  <script type="text/javascript">
    function show_coords(event) {
      x = event.clientX
      y = event.clientY
      alert("X 坐标: " + x + ", Y 坐标: " + y)
    }
  </script>
</head>

<body onmousedown="show_coords(event)">

  <p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>

</body>
</html>

事件句柄　(Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

属性此事件发生在何时...
onabort图像的加载被中断。
onblur元素失去焦点。
onchange域的内容被改变。
onclick当用户点击某个对象时调用的事件句柄。
ondblclick当用户双击某个对象时调用的事件句柄。
onerror在加载文档或图像时发生错误。
onfocus元素获得焦点。
onkeydown某个键盘按键被按下。
onkeypress某个键盘按键被按下并松开。
onkeyup某个键盘按键被松开。
onload一张页面或一幅图像完成加载。
onmousedown鼠标按钮被按下。
onmousemove鼠标被移动。
onmouseout鼠标从某元素移开。
onmouseover鼠标移到某元素之上。
onmouseup鼠标按键被松开。
onreset重置按钮被点击。
onresize窗口或框架被重新调整大小。
onselect文本被选中。
onsubmit确认按钮被点击。
onunload用户退出页面。

鼠标 / 键盘属性

属性描述
altKey返回当事件被触发时，"ALT" 是否被按下。
button返回当事件被触发时，哪个鼠标按钮被点击。
clientX返回当事件被触发时，鼠标指针的水平坐标。
clientY返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey返回当事件被触发时，"CTRL" 键是否被按下。
metaKey返回当事件被触发时，"meta" 键是否被按下。
relatedTarget返回与事件的目标节点相关的节点。
screenX返回当某个事件被触发时，鼠标指针的水平坐标。
screenY返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey返回当事件被触发时，"SHIFT" 键是否被按下。

标准 Event 属性

下面列出了 2 级 DOM 事件标准定义的属性。

属性描述
bubbles返回布尔值，指示事件是否是起泡事件类型。
cancelable返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget返回其事件监听器触发该事件的元素。
eventPhase返回事件传播的当前阶段。
target返回触发此事件的元素（事件的目标节点）。
timeStamp返回事件生成的日期和时间。
type返回当前 Event 对象表示的事件的名称。

标准 Event 方法

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：

方法描述
initEvent()初始化新创建的 Event 对象的属性。
preventDefault()通知浏览器不要执行与事件关联的默认动作。
stopPropagation()不再派发事件。
知其黑、受其白
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js常用DOM方法详解
10-20
本文主要介绍了js常用的DOM方法，具有很好的参考价值，下面跟着小编一起来看下吧
常用DOM的方法
ikEason_的博客
06-03 1585
1、createElement方法 创建一个新的元素（节点）。 语法：document.createElement(nodeName) 2、appendChild方法 插入新建的节点。 语法：parent.appendChild(child) 3、createTextNode方法 创建一个文本（节点）。 语法：document.createTextNode (text) 例如： var testdiv = document.getElementById (“testdiv”); var
原生JS DOM操作方法汇总
weixin_34405557的博客
01-09 693
创建节点 1. document.createElement(tagname) 创建一个由tagName决定的HTML元素 2. document.createTextNode(data) 创建一个文本节点，文本内容为data 3. document.createDocumentFragment() 创建一个空白的文档片段。文档片段是 DocumentFragment 对象的引用。是DOM节点，但...
DOM操作
weixin_62824507的博客
03-07 1654
**文档对象模型( Document Object Model ,简称DOM)** , 是W3C组织推荐的处理可扩展标记语言( HTML 或者XML )的**标准编程接口。** W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。
Dom(方法篇)
qq_58242432的博客
12-17 295
DOM
Javascript中DOM常用方法和属性总结
qq_2511276124的博客
12-09 1660
文档对象模型 (DOM)将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM 模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点 (node)，每个节点都包含着对象 (objects)。DOM 的方法 (methods) 让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。
常用DOM整理
09-03
js在操作DOM中存在着许多跨浏览器方面的坑，本文花了我将近一周的时间整理，我将根据实例整理那些大大小小的“坑”。
dom4j常用方法
04-28
dom4j常用方法 i.SAXReader sr = new SAXReader(); 生成解析器对象 ii.解析器对象.read(file对象)； 解析文件生成Document对象 iii.文档对象.getRootElement() 获取跟元素节点 iv.元素节点.elements() 获取到指定...
js中常用Dom方法
10-26
javascript中常用Dom方法. 写js时非常有用.
JS——DOM对象常用方法知识简记
TKY666的博客
05-01 3457
目录 获取DOM对象方法一 1.通过id获取 2. 通过class(类名)获取 3. 通过标签名获取 4. 通过name属性获取 5. 通过querySelector（选择器）获取 6. 通过querySelectorAll获取 获取特殊对象方法 body html 获取或返回元素内容方法 JS与CSS交互 js添加与修改属性样式 样式获取（查询） 类操作 DOM节点 节点属性操作 节点操作（增删复插替） 获取DOM对象方法二 节点查找 父节点查找子节点方法...
DOM常用方法【DOM】
QQ1012421396的博客
08-20 1889
DOM方法：是我们可以在节点（HTML 元素）上执行的动作。 ①appendChild(Node newChild)     作用：为给定元素的最后增加一个子节点：                                           var newreference = element.appendChild(newChild).
常用DOM方法
暖心~的博客
11-22 346
1、createElement方法      创建一个新的元素（节点）。      语法：document.createElement(nodeName)     2、appendChild方法      插入新建的节点。      语法：parent.appendChild(child) 3、createTextNode方法      创建一个文本（节点）。
javascript之DOM操作
weixin_34343308的博客
08-15 193
javascript之DOM操作 一、document.getElementById()根据Id获取元素节点 <divid="div1"> <pid="p1">...
20.DOM的理解，常见的操作有哪些？
kleinBlue.的博客
10-20 387
一、DOM 文档对象模型 (DOM) 是HTML和XML文档的编程接口 它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容 任何HTML或XML文档都可以用DOM表示为一个由节点构成的层级结构 节点分很多类型，每种类型对应着文档中不同的信息和（或）标记，也都有自己不同的特性、数据和方法，而且与其他类型有某种关系，如下所示： <html> <head> <title&gt...
5.DOM常用方法
mzy1711231996的博客
09-15 121
DOM常用方法 一些常用的 HTML DOM 方法： getElementById(id) - 获取带有指定 id 的节点（元素） appendChild(node) - 插入新的子节点（元素） removeChild(node) - 删除子节点（元素） 一些常用的 HTML DOM 属性： innerHTML - 节点（元素）的文本值 parentNode - 节点（元素）的父节点 childNodes - 节点（元素）的子节点 attributes - 节点（元素）的属性节点 全面方法 getElem.
DOM主要方法总结
晴天的专栏
05-07 734
DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件。 DOM 中的节点    *  整个文档就是一个文档节点。    *  而每一个HMTL标签都是一个元素节点(divElement)。    *  标签中的文字则是文本节点(div)。   
document对象的神奇作用l
iteye_5218的博客
12-13 513
在web开发中，document有着很多神奇的作用。 今天先介绍document对象获取HTML元素的方法。 在我们编写web表单是会用到很多function方法，例如存取表单的获取的数据，这时就需要用document来获取html元素了。 通常document获取html元素有以下这么集中方法。 var x=document.getElementById("main"); //查找i...
HTML DOM Document 对象详解
Hengistchan的博客
01-09 1577
       本文转载于      https://segmentfault.com/a/1190000000660947        在浏览器中，与用户进行数据交换都是通过客户端的javascript代码来实现的，而完成这些交互工作大多数是document 对象及其部件进行的，因此document对象是一个比较重要的对象。 document对象概述 document对象是文档的根节点，w...
JavaScript基础
GWHMYS的博客
08-01 204
JavaScript基础——JS基本选择器及其数据类型的认识
html dom常用方法大全
最新发布
07-17
以下是HTML DOM中常用的一些方法： 1.ById(id)：通过元素的id属性获取元素。 2. getElementsByTagName(tagName)：通过元素的标签名获取元素集合。 3. getElementsByClassName(className)：通过元素的类名获取元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

知其黑、受其白

喝个咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值