add more examples to package:web migration (#7040)

I think adding a few more examples and info will help with the migration
process.

---

- [x] I’ve reviewed the contributor guide and applied the relevant
portions to this PR.
- [x] This PR doesn't contain automatically generated corrections or
text (Grammarly, LLMs, and similar).
- [x] This PR follows the [Google Developer Documentation Style
Guidelines](https://developers.google.com/style) — for example, it
doesn't use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first person).
- [x] This PR uses [semantic line
breaks](https://github.com/dart-lang/site-shared/blob/main/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks)
of 80 characters or fewer.

---------

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Amanda Fitch <18406675+antfitch@users.noreply.github.com>

Author: 3 people

src/content/interop/js-interop/package-web.md

@@ -156,6 +156,80 @@ Node append(Node node) native;
 `native` is an internal keyword that means the same as `external` in this
 context.
 
+### `Element` and `HTMLElement`
+
+`Element` is now `HTMLElement` but the extension type `Element` also exists as
+a base type for `HTMLElement`, `SVGElement`, etc.
+See [Element MDN documentation][].
+`querySelector` returns an Element as it can return other subtypes of `Element`
+besides `HTMLElement` like `SVGElement`. A downcast to `HTMLElement` is needed
+if you need to access its methods.
+
+```dart
+element.querySelector('#selectme')!.className = 'test'; // valid in both
+
+element.querySelector('#selectme')!.style.color = 'red'; // Remove
+(element.querySelector('#selectme') as HTMLElement).style.color = 'red'; // Add
+```
+
+### List operations
+
+Unlike `dart:html`, `package:web` methods like `Element.querySelectorAll` and
+`Element.children` return values that don't implement `List`. If a `List` is
+required, you'll need to wrap it with a class.
+
+For immutable operations, you can use `JSImmutableListWrapper`:
+
+```dart
+final anchors = document.querySelectorAll('a');
+for (final anchor in anchors) {} // Remove
+for (final anchor in JSImmutableListWrapper(anchors)) {} //Add
+
+for (final child in parent.children) {} // Remove
+for (final child in JSImmutableListWrapper(parent.children)) {} // Add
+```
+
+You need to add implementation for simple mutable operations like `removeWhere`:
+
+```dart
+parent.children.removeWhere(test); // Remove
+
+for (var i = parent.children.length - 1; i >= 0; --i) {
+  if (test(parent.children.item(i)!)) {
+    parent.children.item(i)!.remove();
+  }
+}  // Add
+
+```
+
+### Common DOM manipulation examples
+
+Here are some common examples of trivial changes that need to be made when
+migrating from `dart:html` to `package:web`:
+
+```dart
+element.querySelector('#selector')?.innerHtml = 'something'; // Remove
+element.querySelector('#selector')?.innerHTML = 'something'.toJS; // Add
+
+element.parent.classes.add('class'); // Remove
+element.parentElement.classList.add('class'); // Add
+
+element.appendHtml(html); // Remove
+element.insertAdjacentHTML('beforeend', html.toJS); // Add
+
+var checkbox = CheckboxInputElement(); // Remove
+var checkbox = HTMLInputElement()..type='checkbox'; // Add
+
+element.querySelectorAll('a').classes.add('link'); // Remove
+for (final a in JSImmutableListWrapper(element.querySelectorAll('a'))) {
+  a.classList.add('a');
+} // Add
+```
+
+{% comment %}
+TODO: add more examples
+{% endcomment -%}
+
 ### Type tests
 
 It's common for code that uses `dart:html` to utilize runtime checks like `is`.
@@ -175,6 +249,9 @@ section of the JS types page covers alternatives in detail.
 ```dart
 obj is Window; // Remove
 obj.instanceOfString('Window'); // Add
+
+element is InputElement; // Remove
+element.isA<HTMLInputElement>(); // Add
 ```
 
 ### Type signatures
@@ -325,3 +402,4 @@ Do we have any other package migrations to show off here?
 [restricts]: /interop/js-interop/js-types#requirements-on-external-declarations-and-function-tojs
 [#54507]: {{site.repo.dart.sdk}}/issues/54507
 [mocking tutorial]: /interop/js-interop/mock
+[Element MDN documentation]: https://developer.mozilla.org/en-US/docs/Web/API/Element